/* 화면별 스타일. 값은 모두 ds.css 토큰 사용 */

/* ---- 머리글 ---- */
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand:hover span{opacity:.75}
.brand img{width:36px;height:36px;flex:none}
.brand small{font-size:var(--t-caption-2);font-weight:600;letter-spacing:.32em;color:var(--label-3);align-self:flex-end;margin-bottom:5px}
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-3)}
.sub{color:var(--label-2);font-size:var(--t-subhead);margin-top:var(--s-1)}
.acct{display:flex;align-items:center;gap:var(--s-3);font-size:var(--t-footnote);white-space:nowrap}
.acct .nick{color:var(--label-2)}
.acct .logout{color:var(--tint-text);text-decoration:none}
.acct .kakao{background:#FEE500;color:rgba(0,0,0,.85);font-weight:600;text-decoration:none;border-radius:var(--r-md);padding:7px 12px}   /* 카카오 로그인 버튼 색 (카카오 디자인 가이드) */
.topbar{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.gq{flex:1 1 240px;max-width:420px}
@media (max-width:720px){
  .wrap{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .gq{max-width:none}
  header h1{font-size:26px}
}
/* 머리글의 권역 설명·물때 계산 버튼은 날짜 화면에서만 */
body:not([data-view="vDate"]) #sub{display:none}

/* ---- 권역 ---- */
/* PC: 줄바꿈해서 한 화면에 모두, 휴대폰: 옆으로 밀어 보기 (줄바꿈하면 3~4줄이라 본문이 밀림) */
.regions{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:720px){.regions{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}}
.regions::-webkit-scrollbar{display:none}
.regions button{flex:0 0 auto;border:0;background:var(--surface);color:var(--label);border-radius:var(--r-pill);padding:6px 12px;font-size:var(--t-subhead);font-weight:600;cursor:pointer;display:flex;align-items:baseline;gap:6px;box-shadow:var(--shadow-1)}
.regions button small{font-weight:500;color:var(--label-3);font-size:var(--t-caption)}
.regions button[aria-pressed="true"]{background:var(--label);color:var(--surface)}
.regions button[aria-pressed="true"] small{color:var(--surface);opacity:.7}
.regions button em{font-style:normal;font-size:var(--t-caption);font-weight:700;color:var(--green-text);background:var(--green-soft);border-radius:var(--r-pill);padding:0 7px}
.regions button[aria-pressed="true"] em{background:var(--green);color:#fff}
.rtag{font-size:var(--t-caption);color:var(--label-3)}

/* ---- 날짜 화면 ---- */
.panelhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2)}
.panelhead .label{margin:0}
#portPick{gap:var(--s-3)}
#portSel{max-width:100%;font-size:var(--t-subhead);padding:6px 10px}
.grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s-4);align-items:start}
@media (max-width:900px){.grid{grid-template-columns:1fr}}
.upcoming{display:flex;gap:var(--s-2);overflow-x:auto;padding-bottom:4px}
.up{flex:0 0 auto;border:0;background:var(--fill-2);color:var(--label);border-radius:var(--r-md);padding:8px 12px;cursor:pointer;text-align:left;text-decoration:none}
.up b{display:block;font-size:var(--t-subhead);font-weight:600}
.up small{color:var(--label-2);font-size:var(--t-caption)}
.up.we{background:var(--green-soft)}
.up[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--tint)}

/* 달력 */
.calhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-3)}
.calhead h2{font-size:var(--t-title-3);font-weight:700}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.dow{font-size:var(--t-caption);text-align:center;color:var(--label-3);padding-bottom:2px;font-weight:500}
.dow.sun{color:var(--sun)} .dow.sat{color:var(--sat)}
.day{position:relative;border:0;border-radius:10px;background:var(--fill-2);padding:6px 6px 14px;min-height:66px;text-align:left;color:var(--label);cursor:pointer;display:flex;flex-direction:column;gap:1px;overflow:hidden;transition:transform .12s var(--ease)}
.day:active{transform:scale(.96)}
.day .d{font-weight:600;font-size:var(--t-subhead)}
.day .lu{font-size:10px;color:var(--label-3)}
.day .mt{font-size:var(--t-caption);font-weight:600;color:var(--label-2)}
.day .bar{position:absolute;left:6px;right:6px;bottom:6px;height:3px;border-radius:2px;background:var(--fill)}
.day .bar i{display:block;height:100%;border-radius:2px;background:var(--tint)}
.day.sun .d,.day.hol .d{color:var(--sun)} .day.sat .d{color:var(--sat)}
.day.pick{background:var(--green-soft)}
.day.pick .mt{color:var(--green-text)}
.day.ban{background:repeating-linear-gradient(135deg,var(--fill-2) 0 6px,var(--red-soft) 6px 8px)}
.day.past{opacity:.35}
.day.sel{box-shadow:inset 0 0 0 2px var(--tint)}
.day.blank{visibility:hidden}
.day .cnt{position:absolute;top:5px;right:5px;font-size:10px;font-weight:700;color:var(--green-text);background:var(--green-soft);border-radius:5px;padding:0 4px}
.day .cnt.zero{color:var(--red-text);background:var(--red-soft)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-3);font-size:var(--t-caption);color:var(--label-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw.bar{height:4px;width:18px;border-radius:2px;background:linear-gradient(90deg,var(--tint) 60%,var(--fill) 60%)}
.lg-num{color:var(--green-text);font-weight:700}
.sw{width:14px;height:14px;border-radius:4px;background:var(--fill-2);display:inline-block}
.sw.pick{background:var(--green-soft)}
.sw.ban{background:repeating-linear-gradient(135deg,var(--fill-2) 0 3px,var(--red-soft) 3px 5px)}
.sw.sel{box-shadow:inset 0 0 0 2px var(--tint)}
@media (max-width:520px){.day{min-height:56px;padding:4px 4px 12px}.day .lu{display:none}.day .mt{font-size:10.5px}.day .cnt,.legend .lg-cnt{display:none}}

/* 선택한 날짜 */
.selbox{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px var(--s-3)}
.selbox .big{font-size:var(--t-title);font-weight:700;letter-spacing:-.02em}
.tide{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px var(--s-4);margin-top:var(--s-3);padding:10px var(--s-3);border-radius:var(--r-md);background:var(--fill-2);font-size:var(--t-subhead)}
.tide-label{font-size:var(--t-caption);font-weight:600;color:var(--tint-text)}
.tide-item{white-space:nowrap}
.tide-item b{font-weight:600} .tide-item.hi b{color:var(--tint-text)} .tide-item.lo b{color:var(--label-2)}
.tide-item .tt{font-weight:600}
.tide-item small{color:var(--label-3)}
.tide-none{color:var(--label-2)}
.fresh{font-size:var(--t-caption);color:var(--label-2);flex:1 1 200px}
.fresh b{color:var(--label);font-weight:600}
#selPorts{margin-top:var(--s-2);gap:6px}
.tools{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-4)}
.list{margin-top:var(--s-2)}

/* 배 카드 (목록 안 한 줄) */
.boat{padding:var(--s-3) 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--s-3);align-items:start}
.boat h3{font-size:var(--t-callout);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.boat .acts{display:flex;flex-direction:column;align-items:stretch;gap:6px;grid-column:2;grid-row:1 / span 2}
.boat > :not(.acts){grid-column:1}
.bname{color:var(--label);text-decoration:none} .bname:hover{color:var(--tint-text)}
.vinfo{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:var(--t-caption);color:var(--label-2)}
.vinfo .num{color:var(--label)}
.seat{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:var(--t-footnote);margin-top:2px}
.seat .s{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.seat .s::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s.open{color:var(--green-text)} .s.full{color:var(--red-text)} .s.off{color:var(--label-3)} .s.phone{color:var(--orange-text)} .s.nodata{color:var(--label-3);font-weight:400}
.seat .price,.seat .fish{color:var(--label-2)}
@media (max-width:520px){.boat{grid-template-columns:minmax(0,1fr)}.boat .acts{grid-column:1;grid-row:auto;flex-direction:row}}

/* ---- 항구·배 화면 ---- */
.pcard,.brow{display:flex;flex-direction:column;gap:5px;padding-block:var(--s-3);color:var(--label);text-decoration:none;transition:background .15s var(--ease)}
.dview > .cards > .pcard:hover,.dview > .cards > .brow:hover{background:var(--fill-2)}
.pc-top,.br-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.pc-name{font-size:var(--t-headline);font-weight:600}
.br-main b{font-size:var(--t-callout);font-weight:600}
.pc-loc{font-size:var(--t-footnote);color:var(--label-2)}
.pc-num,.br-sub{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--t-footnote);color:var(--label-2)}
.pc-num .num{color:var(--label);font-weight:600;margin-right:2px}
.pc-badges{display:flex;flex-wrap:wrap;gap:6px}
.pname{display:flex;align-items:center;gap:6px;font-size:var(--t-large)}
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;margin-bottom:var(--s-2)}
.share{margin-left:auto}
.maplink{font-size:var(--t-footnote);color:var(--tint-text);font-weight:500;text-decoration:none}
.datebar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-4);padding-top:var(--s-4);border-top:.5px solid var(--separator)}
.datebar .big{font-size:var(--t-title-3);font-weight:700}
.corow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px var(--s-3);padding-block:10px}
.corow b{font-weight:600}
.corow .meta a{color:var(--tint-text)}
.mydays{display:flex;flex-wrap:wrap;gap:6px}
.mycard{display:flex;flex-direction:column;gap:var(--s-2)}
.src{text-align:center;color:var(--label-3)}

/* 14일 잔여석 표 */
.seatgrid{border-collapse:separate;border-spacing:3px;font-size:var(--t-caption);min-width:100%}
.seatgrid th,.seatgrid td{text-align:center;padding:4px 2px;min-width:36px}
.seatgrid thead th{font-weight:500;color:var(--label-2);border-radius:8px;line-height:1.25}
.seatgrid thead th span{display:block;font-size:var(--t-subhead);font-weight:600;color:var(--label)}
.seatgrid thead th small{display:block;font-size:10px}
.seatgrid thead th.sun span{color:var(--sun)} .seatgrid thead th.sat span{color:var(--sat)}
.seatgrid thead th.want{background:var(--green-soft)} .seatgrid thead th.cur{box-shadow:inset 0 0 0 2px var(--tint)}
.seatgrid .bn{text-align:left;white-space:nowrap;position:sticky;left:0;background:var(--surface);padding-right:var(--s-2);font-weight:600;font-size:var(--t-footnote);z-index:1}
.seatgrid .bn a{color:var(--label);text-decoration:none}
.seatgrid td{border-radius:7px;font-weight:600;background:var(--fill-2);color:var(--label-3)}
.seatgrid td a{color:inherit;text-decoration:none;display:block}
.seatgrid td.open{background:var(--green-soft);color:var(--green-text)}
.seatgrid td.full{background:var(--red-soft);color:var(--red-text);font-size:10.5px}
.seatgrid td.phone{background:var(--orange-soft);color:var(--orange-text)}
.seatgrid td.nd{background:repeating-linear-gradient(135deg,transparent 0 4px,var(--fill-2) 4px 6px)}

/* ---- 지도 (map.js) ---- */
.mapbar{display:flex;flex-direction:column;gap:var(--s-3)}
.mapdate{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.mapdate .big{font-size:var(--t-title-3);font-weight:700}
.mapdate .big.sun{color:var(--sun)} .mapdate .big.sat{color:var(--sat)}
.mapgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-4);align-items:start}
.mapbox{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1);background:var(--surface)}
#map{height:calc(100vh - 330px);min-height:460px}
.maplegend{position:absolute;left:var(--s-3);bottom:var(--s-3);display:flex;flex-wrap:wrap;gap:6px var(--s-3);max-width:calc(100% - 120px);
  padding:6px 10px;border-radius:var(--r-md);background:var(--bar);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-size:var(--t-caption);color:var(--label-2);box-shadow:var(--shadow-1)}
.maplegend span{display:inline-flex;align-items:center;gap:5px}
.maplegend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.sheet{position:absolute;left:var(--s-3);top:var(--s-3);width:340px;max-height:calc(100% - 24px);overflow:auto;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.sh-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-2)}
.sh-head h3{font-size:var(--t-title-3)}
.sh-close{border:0;background:var(--fill);color:var(--label-2);border-radius:50%;width:28px;height:28px;font-size:18px;line-height:1;cursor:pointer;flex:none}
.sh-boat{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);padding-block:var(--s-2)}
.sh-boat .s{font-size:var(--t-footnote)}
.sheet .list{margin-top:0}
.sheet .tide{margin-top:0}
.maprank{padding:var(--s-4);max-height:calc(100vh - 330px);min-height:200px;overflow:auto}
.maprank .cards{margin-top:var(--s-2)}
.rankrow{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2);width:100%;border:0;background:none;padding:10px 4px;cursor:pointer;text-align:left;color:var(--label);border-radius:var(--r-sm)}
.rankrow:hover,.rankrow.cur{background:var(--fill-2)}
.rk-name{display:flex;flex-direction:column}
.rk-name small{font-size:var(--t-caption);color:var(--label-2)}
.rk-open{font-weight:700;color:var(--green-text);white-space:nowrap}
.rk-open small{font-weight:400;color:var(--label-2)}
.maplibregl-ctrl-group{border-radius:var(--r-md)!important;box-shadow:var(--shadow-1)!important}
@media (max-width:900px){
  .mapgrid{grid-template-columns:1fr}
  #map{height:62vh;min-height:360px}
  .maprank{max-height:none}
}
@media (max-width:720px){
  /* 휴대폰: 지도 안쪽 아래에 붙는 시트 (화면에 고정하면 지도와 아래 목록을 가림) */
  .sheet{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:68%;border-radius:var(--r-xl);padding:var(--s-3) var(--s-4)}
  .sheet .tide{padding:8px 10px}
  .maplegend{max-width:calc(100% - 70px)}
}

/* ---- 푸터 (개발자 정보) ---- */
.site-foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px var(--s-3);margin-top:var(--s-6);padding-top:var(--s-5);border-top:.5px solid var(--separator);font-size:var(--t-footnote);color:var(--label-2)}
.site-foot img{width:20px;height:20px}
.site-foot b{color:var(--label);font-weight:600}
.site-foot a{color:var(--tint-text);text-decoration:none}
.site-foot a:hover{text-decoration:underline}

/* 지도 월간 달력: 자리 있는 항구가 많을수록 진한 초록 (--heat) */
.mcal{display:flex;flex-direction:column;gap:var(--s-2)}
.mcal-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.mcal-head .big{font-size:var(--t-title-3);font-weight:700;min-width:84px;text-align:center}
.mcal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:600px}
.mcal-grid .dow{font-size:var(--t-caption);text-align:center;color:var(--label-3);font-weight:500}
.mcal-grid .dow.sun{color:var(--sun)} .mcal-grid .dow.sat{color:var(--sat)}
.mday{border:0;border-radius:10px;background:var(--fill-2);color:var(--label);padding:5px 6px 4px;min-height:50px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:1px;position:relative}
.mday b{font-size:var(--t-subhead);font-weight:600}
.mday small{font-size:10.5px;color:var(--label-2)}
.mday i{font-style:normal;font-size:var(--t-caption);font-weight:700;color:var(--green-text)}
.mday.has{background:color-mix(in srgb,var(--green) var(--heat),var(--fill-2))}
.mday.has i{color:var(--label)}
.mday.want small{color:var(--green-text);font-weight:600}
.mday.has.want small{color:var(--label)}
.mday.sun b{color:var(--sun)} .mday.sat b{color:var(--sat)}
.mday.ban{background:repeating-linear-gradient(135deg,var(--fill-2) 0 6px,var(--red-soft) 6px 8px)}
.mday.cur{box-shadow:inset 0 0 0 2px var(--tint)}
.mday:disabled{opacity:.35;cursor:default}
.mday:not(:disabled):hover{box-shadow:inset 0 0 0 2px var(--tint-soft)}
.mday.cur:hover{box-shadow:inset 0 0 0 2px var(--tint)}
@media (max-width:520px){.mday{min-height:50px;padding:4px}.mday small{font-size:9.5px}.mday i{font-size:10.5px}}

/* ---- 협찬 배너 (index.html 배너 스크립트, 내용은 /data/ads.json) ---- */
.ad{position:relative;display:flex;align-items:center;justify-content:center;gap:4px var(--s-3);flex-wrap:wrap;text-align:center;
  border-radius:var(--r-md);background:var(--fill-2);border:1px dashed var(--separator);color:var(--label-3);font-size:var(--t-footnote);overflow:hidden}
.ad b{font-weight:600;color:var(--label-2)}
.ad small{font-size:var(--t-caption)}
.ad-call a{color:var(--tint-text);font-weight:600;text-decoration:none}
.ad-tag{position:absolute;top:4px;right:6px;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--label-3)}
.ad.filled{border:0;background:none;padding:0}
.ad.filled a{display:block;width:100%;height:100%}
.ad.filled img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--r-md)}
.ad.filled .ad-tag{background:rgba(0,0,0,.35);color:#fff;border-radius:4px;padding:0 4px}
.ad-side{display:none}
/* 본문(1180) 양옆에 160 배너가 들어갈 만큼 넓을 때만 */
@media (min-width:1560px){
  .ad-side{display:flex;flex-direction:column;position:fixed;top:120px;width:160px;height:600px;z-index:5}
  .ad-left{left:calc(50% - 590px - 176px)}
  .ad-right{right:calc(50% - 590px - 176px)}
}