/* 宜蘭生活網｜生活警報元件 v1（2026-10-05），2026-10-05 配合正式站改為藍色系、站內字型 */
   全部 class 以 ic- 開頭，包在 .ic-life 底下；不使用 :root 與 CSS 變數。
   正式站若已有 .ic-life 的基本樣式（h1、h2、.ic-card、.ic-chip 等），可只保留「生活警報專用」以下的段落。 */

/* ---------- 共用（正式站若已有可刪） ---------- */
.ic-life .ic-al{font-family:"Microsoft JhengHei","PingFang TC",sans-serif;font-size:16px;line-height:1.7;color:#152532;}
.ic-life .ic-al *{box-sizing:border-box;}
.ic-life .ic-al a{color:#0566ad;}
.ic-life .ic-al a:focus-visible,.ic-life .ic-al button:focus-visible,.ic-life .ic-al select:focus-visible,.ic-life .ic-al summary:focus-visible{outline:3px solid #D9A441;outline-offset:2px;}
.ic-life .ic-al h1{font-family:inherit;font-weight:700;font-size:30px;line-height:1.35;margin:8px 0 12px;color:#123f62;}
.ic-life .ic-al h2{font-family:inherit;font-weight:700;font-size:22px;line-height:1.4;margin:32px 0 12px;color:#123f62;}
.ic-life .ic-al h3{font-size:17px;margin:0 0 6px;color:#123f62;}
.ic-life .ic-al .ic-muted{color:#586774;font-size:14px;}
.ic-life .ic-al .ic-crumb{font-size:14px;color:#586774;margin-bottom:4px;}
.ic-life .ic-al .ic-crumb a{color:#586774;}
.ic-life .ic-al .ic-card{background:#ffffff;border:1px solid #dce5eb;border-radius:14px;padding:18px;}
.ic-life .ic-al .ic-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.ic-life .ic-al .ic-chip{font:inherit;font-size:14px;border:1px solid #c9d6df;background:#ffffff;color:#123f62;border-radius:999px;padding:4px 12px;cursor:pointer;text-decoration:none;}
.ic-life .ic-al .ic-tag{display:inline-block;font-size:12px;border-radius:4px;padding:1px 7px;margin-right:4px;}
.ic-life .ic-al .ic-empty{background:#ffffff;border:1px dashed #c9d6df;border-radius:14px;padding:14px;}
.ic-life .ic-al details{background:#ffffff;border:1px solid #dce5eb;border-radius:14px;padding:10px 14px;margin:10px 0;}
.ic-life .ic-al summary{cursor:pointer;font-weight:500;}

/* ---------- 生活警報專用 ---------- */
/* 五張狀態卡 */
.ic-life .ic-al-st{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px;}
.ic-life .ic-al-s{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:12px;}
.ic-life .ic-al-s b{display:block;font-size:18px;color:#123f62;line-height:1.3;}
.ic-life .ic-al-s div span{display:block;}
.ic-life .ic-al-i{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;}
.ic-life .ic-al-k{font-size:13px;color:#586774;}
.ic-life .ic-al-sd{font-size:13px;}
.ic-life .ic-al-f{font-size:12px;color:#586774;margin-top:4px;}

/* 停班停課公告框 */
.ic-life .ic-al-ws{border-radius:12px;padding:12px 14px;border-left:6px solid #0566ad;background:#e8f1f6;}
.ic-life .ic-al-ws b{font-size:18px;color:#123f62;}
.ic-life .ic-al-ws p{margin:4px 0;}
.ic-life .ic-al-ws.ic-all{border-left-color:#D6553A;background:#FBE3DC;}
.ic-life .ic-al-ws.ic-part{border-left-color:#D9A441;background:#FBF0D4;}

/* 日期按鈕（停水、停電共用） */
.ic-life .ic-pw-days{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;}
.ic-life .ic-pw-day{font:inherit;flex:none;display:flex;flex-direction:column;align-items:center;gap:0;min-width:64px;border:1px solid #dce5eb;background:#ffffff;color:#123f62;border-radius:12px;padding:6px 8px;cursor:pointer;line-height:1.3;}
.ic-life .ic-pw-day span{font-size:12px;color:#586774;}
.ic-life .ic-pw-day em{font-style:normal;font-size:12px;background:#FBF0D4;color:#7a5410;border-radius:999px;padding:0 7px;margin-top:2px;}
.ic-life .ic-pw-day.ic-on{background:#123f62;color:#ffffff;border-color:#123f62;}
.ic-life .ic-pw-day.ic-on span{color:#e6eef4;}
.ic-life .ic-pw-day.ic-on em{background:#D9A441;color:#123f62;}
.ic-life .ic-pw-town{margin-top:10px;}
.ic-life .ic-pw-town h3{font-size:16px;margin:0 0 4px;color:#123f62;}
.ic-life .ic-pw-row{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:7px 0;border-top:1px solid #eff5f8;font-size:15px;}
.ic-life .ic-pw-time{font-weight:700;color:#D6553A;font-size:14px;}
.ic-life .ic-pw-time small{font-weight:400;color:#586774;}
.ic-life .ic-al-sel{display:flex;gap:8px;align-items:center;margin:10px 0 6px;font-size:14px;color:#586774;}
.ic-life .ic-al-sel select{font:inherit;padding:5px 8px;border:1px solid #c9d6df;border-radius:6px;background:#ffffff;color:#123f62;}
.ic-life .ic-wo-fix{background:#FBE3DC;color:#A33A22;}
.ic-life .ic-wo-plan{background:#e8f1f6;color:#0566ad;}

/* 最近 24 小時示警 */
.ic-life .ic-al-tl{list-style:none;margin:0;padding:0;}
.ic-life .ic-al-tl li{display:flex;gap:12px;background:#ffffff;border:1px solid #dce5eb;border-radius:14px;padding:12px 14px;margin-bottom:8px;}
.ic-life .ic-al-tl li p{margin:4px 0 0;}
.ic-life .ic-al-tli{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;}
.ic-life .ic-al-end{background:#eff5f8;color:#586774;}
.ic-life .ic-al-live{background:#FBE3DC;color:#A33A22;}

/* 天氣：十二鄉鎮 */
.ic-life .ic-wx-towns{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.ic-life .ic-wx-town{font:inherit;display:flex;flex-direction:column;align-items:center;gap:0;border:1px solid #dce5eb;background:#ffffff;color:#123f62;border-radius:12px;padding:8px 4px;cursor:pointer;line-height:1.3;}
.ic-life .ic-wx-town b{font-size:14px;}
.ic-life .ic-wx-town span{font-size:13px;}
.ic-life .ic-wx-town em{font-style:normal;font-size:12px;border-radius:999px;padding:0 7px;margin-top:2px;}
.ic-life .ic-wx-town.ic-on{border:2px solid #D9A441;background:#f7fafc;}
.ic-life .ic-pop-hi{background:#2f7fa8;color:#ffffff;}
.ic-life .ic-pop-md{background:#e6eef4;color:#123f62;}
.ic-life .ic-pop-lo{background:#f1f6f8;color:#586774;}

/* 天氣：24 小時 */
.ic-life .ic-wx-hrs{display:grid;grid-template-columns:repeat(8,minmax(52px,1fr));gap:4px;overflow-x:auto;}
.ic-life .ic-wx-hr{display:flex;flex-direction:column;align-items:center;gap:2px;}
.ic-life .ic-wx-hr b{font-size:16px;color:#123f62;}
.ic-life .ic-wx-hr small{font-size:12px;color:#2f7fa8;}
.ic-life .ic-wx-bar{display:flex;align-items:flex-end;width:14px;height:44px;background:#eff5f8;border-radius:4px;overflow:hidden;}
.ic-life .ic-wx-bar i{display:block;width:100%;background:#2f7fa8;border-radius:4px 4px 0 0;}

/* 天氣：一週 */
.ic-life .ic-al-wk{display:grid;grid-template-columns:repeat(7,minmax(96px,1fr));gap:8px;overflow-x:auto;padding-bottom:6px;}
.ic-life .ic-al-d{background:#ffffff;border:1px solid #dce5eb;border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;}
.ic-life .ic-al-d.ic-on{border:2px solid #D9A441;background:#f7fafc;}
.ic-life .ic-al-w{font-size:13px;color:#152532;min-height:2.6em;line-height:1.3;}
.ic-life .ic-al-pop{font-size:12px;color:#0566ad;border-radius:999px;padding:0 8px;margin:2px 0;background:#f1f6f8;}
.ic-life .ic-al-pop.ic-pop-md{background:#e6eef4;}
.ic-life .ic-al-t b{font-size:20px;color:#D6553A;}
.ic-life .ic-al-t span{font-size:16px;color:#0566ad;}
.ic-life .ic-al-n{display:flex;align-items:center;gap:2px;font-size:12px;color:#586774;border-top:1px dashed #dce5eb;padding-top:4px;margin-top:4px;}

/* 天氣：氣溫圖 */
.ic-life .ic-al-chart{position:relative;}
.ic-life .ic-al-tip{position:absolute;display:none;pointer-events:none;background:#123f62;color:#ffffff;font-size:13px;padding:6px 10px;border-radius:6px;max-width:260px;line-height:1.5;top:4px;}
.ic-life .ic-tbar{cursor:pointer;outline:none;}
.ic-life .ic-tbar:focus rect.ic-tb{stroke:#D9A441;stroke-width:3;}

/* LINE 通知預告 */
.ic-life .ic-al .ic-al-line{margin-top:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:#123f62;border-color:#123f62;}
.ic-life .ic-al-line span.ic-al-lt{flex:1;min-width:220px;color:#ffffff;}
.ic-life .ic-al-line b{font-size:17px;}
.ic-life .ic-al-line small{font-size:14px;color:#e6eef4;}
.ic-life .ic-al .ic-al-soon{background:#D9A441;color:#123f62;font-size:13px;padding:4px 10px;}

.ic-life .ic-al-err{background:#FBE3DC;border:1px solid #D6553A;border-radius:14px;padding:14px;color:#A33A22;}

@media (max-width:820px){
 .ic-life .ic-al-st{grid-template-columns:1fr 1fr;}
 .ic-life .ic-al-s b{font-size:16px;}
 .ic-life .ic-wx-towns{grid-template-columns:repeat(3,1fr);}
 .ic-life .ic-al h1{font-size:25px;}
}
@media (max-width:480px){
 .ic-life .ic-pw-row{grid-template-columns:90px 1fr;font-size:14px;}
 .ic-life .ic-al-s{padding:10px;gap:8px;}
 .ic-life .ic-al-i{width:34px;height:34px;}
 .ic-life .ic-al-i svg{width:24px;height:24px;}
}