/* ===== 서해 낚시 날씨 — 새벽 출조 팔레트 ===== */
:root{
  --bg:#0e1726;        /* 새벽 남청 */
  --bg-soft:#13203a;
  --card:#1a2742;
  --card-hi:#21314f;
  --line:#2c3e60;
  --sunset:#f59e42;    /* 일몰 호박 */
  --golden:#ffd27d;    /* 박명 골든타임 */
  --sea:#4aa6c4;       /* 바다 청록 */
  --foam:#bfe6f1;
  --good:#5fc285;      /* 낚시 좋음 */
  --warn:#eaa53d;      /* 주의 */
  --danger:#ec5b4f;    /* 특보 */
  --t1:#eef4fb;        /* 본문 */
  --t2:#a4b7d3;        /* 보조 */
  --t3:#6f84a6;        /* 흐림 */
  --r:18px;
  --mono:"SF Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Pretendard,system-ui,sans-serif;
  background:
    radial-gradient(120% 60% at 50% -10%, #1a2c4d 0%, transparent 60%),
    var(--bg);
  color:var(--t1);
  min-height:100dvh;
  line-height:1.5;
  padding:max(16px,env(safe-area-inset-top)) 14px calc(40px + env(safe-area-inset-bottom));
  max-width:560px;margin-inline:auto;
}

/* ===== 헤더 ===== */
.hd{padding:14px 4px 18px}
.hd-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hd-title{
  font-size:1.65rem;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--foam),var(--golden));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hd-sub{color:var(--t2);font-size:.9rem;margin-top:3px}
.hd-time{color:var(--t3);font-size:.78rem;margin-top:8px;font-family:var(--mono)}
.hd-refresh{
  flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);color:var(--foam);
  font-size:1.2rem;cursor:pointer;transition:transform .3s,background .2s;
}
.hd-refresh:hover{background:var(--card-hi)}
.hd-refresh:active{transform:rotate(180deg)}
.hd-refresh.spin{animation:spin .8s ease}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== 특보 배너 ===== */
.warnbanner{
  background:linear-gradient(100deg,#3a1614,#2a1512);
  border:1px solid var(--danger);border-left:4px solid var(--danger);
  border-radius:14px;padding:12px 14px;margin-bottom:14px;
  font-size:.86rem;color:#ffd9d4;
}
.warnbanner b{color:var(--danger)}

/* ===== 항구 카드 ===== */
.ports{display:flex;flex-direction:column;gap:14px}
.skeleton{color:var(--t3);text-align:center;padding:48px 0;font-size:.9rem}
.port{
  background:linear-gradient(180deg,var(--card-hi),var(--card));
  border:1px solid var(--line);border-radius:var(--r);
  padding:16px 16px 18px;overflow:hidden;position:relative;
}
.port-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.port-name{font-size:1.18rem;font-weight:700}
.badge{
  font-size:.74rem;font-weight:700;padding:5px 11px;border-radius:999px;
  letter-spacing:-.01em;white-space:nowrap;
}
.badge.good{background:rgba(95,194,133,.16);color:var(--good);border:1px solid rgba(95,194,133,.4)}
.badge.warn{background:rgba(234,165,61,.16);color:var(--warn);border:1px solid rgba(234,165,61,.4)}
.badge.danger{background:rgba(236,91,79,.18);color:#ff8478;border:1px solid rgba(236,91,79,.5)}

/* ===== signature: 빛 타임라인 ===== */
.light{margin:4px 0 16px}
.light-bar{
  position:relative;height:40px;border-radius:10px;overflow:hidden;
  /* 하루의 빛: 자정 남청 → 박명 호박 → 한낮 → 일몰 → 자정 */
  background:linear-gradient(90deg,
    #0c1320 0%, #16233f 18%, #4a3a5e 26%, var(--sunset) 31%,
    var(--foam) 42%, #cfe6f2 50%, var(--foam) 58%,
    var(--sunset) 69%, #4a3a5e 74%, #16233f 82%, #0c1320 100%);
}
.light-golden{
  position:absolute;top:0;bottom:0;
  background:repeating-linear-gradient(45deg,rgba(255,210,125,.5) 0 4px,transparent 4px 8px);
  border-left:2px solid var(--golden);border-right:2px solid var(--golden);
}
.light-now{position:absolute;top:-3px;bottom:-3px;width:2px;background:#fff;box-shadow:0 0 8px #fff}
.light-now::after{
  content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;border-radius:50%;
  background:#fff;box-shadow:0 0 8px #fff;
}
.light-labels{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--mono);font-size:.72rem;color:var(--t2)}
.light-labels .gold{color:var(--golden)}
.light-cap{font-size:.72rem;color:var(--t3);margin-top:5px}

/* ===== 지표 그리드 ===== */
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metric{background:rgba(12,20,36,.45);border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.metric.wide{grid-column:1 / -1}
.metric-k{font-size:.72rem;color:var(--t3);margin-bottom:4px;display:flex;align-items:center;gap:5px}
.metric-v{font-size:1.15rem;font-weight:700;font-family:var(--mono)}
.metric-v small{font-size:.74rem;color:var(--t2);font-weight:400;margin-left:3px}
.dust-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dust-1{background:var(--good)} .dust-2{background:var(--warn)}
.dust-3{background:var(--danger)} .dust-4{background:#b14ad6}

/* 파고 미니 막대 */
.sea-cap{font-size:.72rem;color:var(--t3);margin-bottom:14px}
.waves{display:flex;gap:6px;align-items:flex-end;height:38px;margin-top:4px}
.wave{flex:1;background:linear-gradient(180deg,var(--sea),#27566b);min-height:5px;border-radius:3px 3px 0 0;position:relative}
.wave span{position:absolute;top:-15px;left:0;right:0;text-align:center;font-size:.62rem;color:var(--t2);font-family:var(--mono)}
.wave em{position:absolute;bottom:-15px;left:0;right:0;text-align:center;font-size:.6rem;color:var(--t3);font-style:normal}
.wave.hi{background:linear-gradient(180deg,var(--warn),#8a5a1e)}

.ft{margin-top:26px;text-align:center;color:var(--t3);font-size:.74rem;display:flex;flex-direction:column;gap:4px}
.ft-note{color:var(--line);font-size:.7rem}
.err{color:#ff8478;text-align:center;padding:30px 0}

:focus-visible{outline:2px solid var(--golden);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== 설정 페이지 ===== */
.card-h{font-size:1.05rem;font-weight:700;margin-bottom:3px}
.card-sub{font-size:.78rem;color:var(--t3);margin-bottom:12px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 2px;cursor:pointer;border-top:1px solid var(--line)}
.card .toggle:first-of-type{border-top:none}
.t-label{font-size:.92rem;color:var(--t1)}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.switch{flex:none;width:46px;height:27px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);position:relative;transition:background .2s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:var(--t2);transition:transform .2s,background .2s}
.toggle input:checked ~ .switch{background:rgba(95,194,133,.28);border-color:var(--good)}
.toggle input:checked ~ .switch::after{transform:translateX(19px);background:var(--good)}
.toggle input:focus-visible ~ .switch{outline:2px solid var(--golden);outline-offset:2px}
.save-btn{width:100%;padding:15px;margin-top:8px;border:none;border-radius:14px;background:linear-gradient(100deg,var(--sunset),var(--golden));color:#1a1208;font-size:1rem;font-weight:800;cursor:pointer;transition:opacity .2s}
.save-btn:hover{opacity:.92}
.save-btn:active{transform:translateY(1px)}
.save-btn:disabled{opacity:.6;cursor:wait}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--card-hi);border:1px solid var(--good);color:var(--t1);padding:11px 20px;border-radius:12px;font-size:.88rem;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:10}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.ft-how{color:var(--foam);font-weight:600;margin-bottom:2px}
.ft b{color:var(--golden)}