/* 낚싯배 길잡이 — 60대 이상 어르신 기준 화면.
   글자 20px 바탕 · 단추는 엄지 크기(56px 이상) · 신호등은 색과 글자를 함께 · 흰 바탕 한 가지 */
:root{
  --sea:#0f4c6e; --sea2:#1670a0; --tint:#eaf4fa; --ink:#14212b; --ink2:#34444f; --mut:#5a6873;
  --line:#d6e2ea; --bg:#ffffff; --paper:#f5f8fa;
  --green:#0d7a45; --greenbg:#e5f6ec; --yellow:#8a5a00; --yellowbg:#fff4d1; --red:#b3261e; --redbg:#fde8e6;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-size:20px;line-height:1.6;word-break:keep-all;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif}
.wrap{max-width:640px;margin:0 auto;padding-block:14px 56px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;flex-direction:column;gap:16px}
p{margin:0}
a{color:var(--sea2)}
.crumb{font-size:17px;color:var(--mut)}
.crumb a{color:var(--mut)}
.head{background:var(--sea);color:#fff;border-radius:18px;padding:22px 20px}
.head .eb{font-size:17px;font-weight:700;opacity:.9}
.head h1{font-size:30px;line-height:1.3;margin:4px 0 0;font-weight:800;text-wrap:balance}
.head .lead{margin-top:8px;font-size:19px;opacity:.95}
.card{background:var(--bg);border:1.5px solid var(--line);border-radius:16px;padding:18px;min-width:0}
.sec{font-size:23px;font-weight:800;margin:0 0 12px}
.note{font-size:17px;color:var(--mut)}

/* 큰 단추 */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;border-radius:14px;
  font:inherit;font-size:21px;font-weight:800;text-decoration:none;cursor:pointer;padding:10px 16px;text-align:center;border:2px solid transparent}
.btn.main{background:var(--sea);color:#fff}
.btn.sub{background:var(--tint);color:var(--sea);border-color:var(--sea2)}
.btn:focus-visible{outline:4px solid #f2b300;outline-offset:2px}
.btns{display:flex;flex-direction:column;gap:10px}

/* 찾기 */
.find{display:flex;border:2px solid var(--sea2);border-radius:14px;overflow:hidden;background:var(--bg)}
.find input{flex:1;min-width:0;border:0;font:inherit;font-size:21px;padding:14px;outline:none;color:var(--ink)}
.find button{border:0;background:var(--sea);color:#fff;font:inherit;font-weight:800;padding:0 20px;cursor:pointer;min-width:84px}
.hits{display:flex;flex-direction:column;gap:8px;margin-top:10px}

/* 배 줄 */
.boats{display:flex;flex-direction:column;gap:10px}
.boat{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid var(--line);border-radius:14px;
  padding:14px 16px;text-decoration:none;color:var(--ink);min-height:64px;background:var(--bg)}
.boat b{font-size:22px}
.boat small{display:block;font-size:16px;color:var(--mut)}
.boat .ar{font-size:26px;color:var(--sea2);font-weight:800}
.boat:focus-visible{outline:4px solid #f2b300}

/* 날짜 띠 */
.days{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (min-width:520px){.days{grid-template-columns:repeat(7,1fr)}}
.day{font:inherit;border:2px solid var(--line);background:var(--bg);border-radius:12px;padding:8px 2px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;min-height:84px;color:var(--ink)}
.day .dw{font-size:16px;color:var(--mut);font-weight:700}
.day .dd{font-size:21px;font-weight:800}
.day .dot{width:18px;height:18px;border-radius:50%;background:var(--line)}
.day[aria-pressed="true"]{border-color:var(--sea);box-shadow:0 0 0 3px rgba(15,76,110,.25)}
.day:focus-visible{outline:4px solid #f2b300}
.dot.green{background:var(--green)} .dot.yellow{background:#e0a100} .dot.red{background:var(--red)}

/* 신호등 */
.light{border-radius:14px;padding:16px;text-align:center;border:2.5px solid var(--line);background:var(--paper)}
.light .w{font-size:26px;font-weight:800}
.light .when{font-size:17px;color:var(--mut);margin-bottom:2px}
.light.green{background:var(--greenbg);border-color:var(--green);color:var(--green)}
.light.yellow{background:var(--yellowbg);border-color:#e0a100;color:var(--yellow)}
.light.red{background:var(--redbg);border-color:var(--red);color:var(--red)}
.light.green .when,.light.yellow .when,.light.red .when{color:inherit;opacity:.85}
.rows{margin-top:12px;display:flex;flex-direction:column}
.row{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:20px}
.row:last-child{border-bottom:0}
.row span{color:var(--ink2)}
.row b{font-variant-numeric:tabular-nums;text-align:right}
.row b small{display:block;font-size:15px;color:var(--mut);font-weight:600}

/* 어종 달력 · 금어기 · 물때표 */
.mbar{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.mbar span{text-align:center;border:1.5px solid var(--line);border-radius:10px;padding:8px 0;font-size:18px;font-weight:700;color:var(--mut)}
.mbar span.on{background:var(--greenbg);border-color:var(--green);color:var(--green)}
.mbar span.now{box-shadow:0 0 0 3px rgba(15,76,110,.35)}
.ban{margin-top:12px;background:var(--redbg);border:2px solid var(--red);color:var(--red);border-radius:12px;padding:12px 14px;font-weight:800}
.tbl{overflow-x:auto}
table.tide{border-collapse:collapse;width:100%;font-size:19px;font-variant-numeric:tabular-nums}
.tide th,.tide td{border-bottom:1px solid var(--line);padding:10px 6px;text-align:left}
.tide th{color:var(--mut);font-size:17px}
.tide tr.today td{background:var(--tint);font-weight:800}
.tide tr.sun td:first-child{color:var(--red)}
/* AEO: 질문 제목 + 바로 답 */
.qa{display:flex;flex-direction:column;gap:14px}
.qa .q h3{margin:0 0 4px;font-size:20px;font-weight:800;color:var(--sea)}
.qa .q p{color:var(--ink2)}
.crumb span{color:var(--ink2)}
.faq details{border:1.5px solid var(--line);border-radius:12px;margin:8px 0}
.faq summary{padding:14px 16px;font-weight:800;cursor:pointer;min-height:56px}
.faq details p{padding:0 16px 14px;color:var(--ink2)}
.foot{font-size:16px;color:var(--mut);display:flex;flex-direction:column;gap:6px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));
  background:var(--ink);color:#fff;border-radius:12px;padding:12px 18px;font-size:18px;font-weight:700}
/* 꽉 찬 배 한 장 */
ul.list{margin:10px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:6px;color:var(--ink2)}
.qa h2.sec{color:var(--sea);margin-bottom:6px}
/* 머리띠 · 아이콘 · 순위 · 칩 (호갱노노·아실·KB부동산을 본뜬 옷) */
.topbar{background:var(--sea);color:#fff;border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.topbar .tb1{display:flex;align-items:center;justify-content:space-between;gap:10px}
.topbar .logo{color:#fff;font-weight:800;font-size:19px;text-decoration:none}
.topbar .tfind{color:var(--sea);background:#fff;border-radius:999px;padding:6px 14px;font-size:17px;font-weight:800;text-decoration:none;white-space:nowrap}
.tick{font-size:16px;display:flex;gap:10px;align-items:center;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.tick::-webkit-scrollbar{display:none}
.tick .live{background:#ffd34d;color:#3a2a00;border-radius:6px;padding:1px 8px;font-size:14px;font-weight:800;flex:none}
.tick a{color:#fff;text-decoration:none;font-weight:700}
.icons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ic{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--bg);color:var(--ink);text-decoration:none;font-size:16px;font-weight:700;text-align:center;min-height:84px;justify-content:center}
.ic i{font-style:normal;font-size:28px;line-height:1}
.ic:focus-visible{outline:4px solid #f2b300}
ol.rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
ol.rank a{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);min-height:60px}
ol.rank li:last-child a{border-bottom:0}
ol.rank .no{width:34px;height:34px;flex:none;border-radius:50%;background:var(--tint);color:var(--sea);display:grid;place-items:center;font-weight:800}
ol.rank li:nth-child(-n+3) .no{background:var(--sea);color:#fff}
ol.rank .nm{flex:1;min-width:0}
ol.rank .nm b{display:block;font-size:21px}
ol.rank .nm small{color:var(--mut);font-size:16px}
ol.rank .ct{font-weight:800;color:var(--green);font-size:20px;white-space:nowrap;font-variant-numeric:tabular-nums}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{font:inherit;font-size:17px;font-weight:800;border:2px solid var(--line);background:var(--bg);color:var(--ink2);border-radius:999px;padding:8px 16px;cursor:pointer;min-height:48px}
.chip.on{background:var(--sea);border-color:var(--sea);color:#fff}
.chip:focus-visible{outline:4px solid #f2b300}
/* 광고 칸: 위아래 여백을 크게 두어 단추와 떨어뜨림 · 「광고」 표시 */
.adwrap{margin:72px 0;min-height:100px;display:flex;flex-direction:column;gap:4px}
.adlabel{font-size:13px;color:var(--mut);text-align:center}
/* 시간별 바람 그래프 */
.wchart{margin:14px 0 0;padding:12px 10px 4px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper)}
.wchart figcaption{font-size:16px;font-weight:800;color:var(--ink2);margin-bottom:6px}
.wchart svg{display:block;width:100%;height:auto;aspect-ratio:320/150}
.wb.g{fill:var(--green)} .wb.y{fill:#e0a100} .wb.r{fill:var(--red)} .wb.n{fill:var(--line)}
.wl{font-size:12px;fill:var(--mut);font-weight:700}
.wv{font-size:11px;fill:var(--ink2);font-weight:800}
.w8{stroke:#e0a100;stroke-width:1.5;stroke-dasharray:5 4}
/* 물때 달력 */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cw{text-align:center;font-size:15px;font-weight:800;color:var(--mut);padding:2px 0}
.cw:first-child{color:var(--red)}
.cd{border-radius:9px;padding:6px 2px;text-align:center;min-height:54px;display:flex;flex-direction:column;justify-content:center;gap:1px}
.cd b{font-size:18px;line-height:1.1} .cd i{font-style:normal;font-size:13px;font-weight:700}
.cd.e{background:none}
.cd.s1{background:#eef5f9;color:var(--ink2)} .cd.s2{background:#cfe4ef;color:var(--ink)}
.cd.s3{background:#7fb4d1;color:#fff} .cd.s4{background:var(--sea);color:#fff}
.cd.sun b{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px}
.cd.today{outline:3px solid #f2b300;outline-offset:1px}
.cleg{margin-top:10px;font-size:15px;color:var(--mut);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cleg .cd{display:inline-block;min-height:0;width:18px;height:18px;padding:0;border-radius:5px}
/* 관심 배 ☆ · 나란히 보기 표 */
.star{margin-top:14px;font:inherit;font-size:19px;font-weight:800;border:2px solid rgba(255,255,255,.8);background:transparent;color:#fff;border-radius:999px;padding:10px 18px;min-height:52px;cursor:pointer}
.star[aria-pressed="true"]{background:#ffd34d;border-color:#ffd34d;color:#3a2a00}
.star:focus-visible{outline:4px solid #f2b300;outline-offset:2px}
table.cmp{border-collapse:collapse;width:100%;font-size:18px}
.cmp th,.cmp td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top;white-space:nowrap}
.cmp thead th a{font-size:19px;font-weight:800}
.cmp tbody th{color:var(--mut);font-size:16px}