/*  ★ 어두운 테마(새벽·노을)에서 글자가 안 보이던 것 (2026-09-20 지시 "화면을 검은색으로 한 경우 출력화면의 배경색이
    흰색으로 되어 있어 글자가 회색이라 잘 안 보여"). 이 층의 카드·달력 칸은 `var(--card,#fff)` 인데 **--card 를 정의한
    사이트가 없어** 늘 흰색이었고, 글자는 테마의 --ink(어두운 테마에서 연한 색)라 흰 바탕에 연한 글자가 됐다.
    카드 색을 테마 토큰으로 잇는다 — 밝은 테마는 --abyss(#FFFFFF, 전과 같다), 어두운 테마는 --hull-2(창보다 한 단 밝은 바닥).
    박아 둔 색(토·일 날짜, 낚시종류 알약 글자)도 어두운 테마용을 둔다. fishnow 는 _vacancy_fn.php 가 제 토큰으로 덮는다. */
#vcModal{--card:var(--abyss,#fff);--card-2:var(--hull-2,#EEF4F5)}
/*  어두운 테마는 「새벽」(dawn) 하나다 — 노을(dusk)·해도·백파는 밝은 바탕이라 손대지 않는다(실측: dusk 에 어두운 값을 주면
    달력 날짜 대비가 1.9 로 떨어진다). 잔여 숫자·달력 척수의 초록(--now)은 어두운 바탕에서 2.7 밖에 안 나와 --water 로. */
:root[data-theme="dawn"] #vcModal{--card:var(--hull-2,#1A2C3A);--card-2:var(--hull,#12212D)}
:root[data-theme="dawn"] #vcModal .vccal button.sat .d{color:#7FB2FF}
:root[data-theme="dawn"] #vcModal .vccal button.sun .d{color:#FF8A78}
:root[data-theme="dawn"] #vcModal .vclist .seat b,:root[data-theme="dawn"] #vcModal .vccal button:not(.on) .n{color:var(--water,#5FB3C6)}
#vcModal{position:fixed;inset:0;z-index:92;display:none}
#vcModal.on{display:block}
#vcModal .vcdim{position:absolute;inset:0;background:rgba(6,20,28,.55)}
/*  ★ 창은 **위쪽에 고정**한다 (2026-09-17 재지시: "날짜를 클릭하는 경우에 팝업창은 항상 처음 위치
    기준인 좌측 상단을 고정해서 움직이지 말고, 상하 스크롤바 중심으로만"). 가운데 정렬(translate
    -50%)은 내용 높이가 바뀔 때마다 창이 위아래로 튄다. 높이도 고정(88vh)하고 안쪽 목록만 구른다. */
#vcModal .vcwin{position:absolute;left:50%;top:6vh;transform:translateX(-50%);
  width:min(820px,calc(100vw - 24px));height:min(88vh,940px);display:flex;flex-direction:column;
  background:var(--pt-paper,var(--hull,#FBFDFD));color:var(--ink,#12303A);
  border:1px solid var(--pt-line,var(--line,#D2E0E3));border-radius:var(--pt-r,16px);
  box-shadow:0 24px 60px rgba(6,20,28,.45);padding:16px 18px 18px}
#vcModal .vcx{position:absolute;right:10px;top:10px;width:32px;height:32px;border:0;
  border-radius:var(--pt-r-sm,9px);cursor:pointer;font-size:15px;line-height:1;background:transparent;color:inherit}
#vcModal .vcx:hover{background:var(--card-2,#EEF4F5)}
#vcHead h2{margin:0 28px 10px 0;font-size:17px;font-weight:800;letter-spacing:-.01em}
#vcHead h2 .var{font-size:13px;font-weight:600;color:var(--pt-dim,var(--ink-soft,#3E5C68))}
#vcHead h2 .var b{color:var(--ink,#12303A)}
.vclist .nofish{font-size:12px;color:var(--pt-dim,var(--ink-soft,#3E5C68))}
.vclist .price{font-size:12px;color:var(--pt-ink,var(--ink,#0F2A36));font-variant-numeric:tabular-nums}
#vcHead .sub{margin:0 0 10px;font-size:12px;color:var(--pt-dim,var(--ink-soft,#3E5C68))}
.vccal{margin-bottom:8px}
/* ★ 세로 스크롤바 자리를 **항상** 비워 둔다(scrollbar-gutter) — 목록이 짧아 스크롤바가 없을 때와 길어 생길 때
   선박 줄의 우측 간격이 같아야 한다(2026-09-17 지시 "항상 우측 간격이 일정하도록"). */
#vcBox{overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:0;scrollbar-gutter:stable;padding-right:6px}
/* 달력 — **한 줄**, 오늘부터 14일, 「9.17」 꼴 (2026-09-17 재지시). 좁으면 그 줄만 옆으로 구른다.
   머리(#vcHead)에 있어 목록이 굴러도 달력은 제자리다. */
.vccal{display:flex;gap:4px;margin:0 0 10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.vccal button{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 7px 4px;
  border:1px solid var(--pt-line,var(--line,#D2E0E3));border-radius:var(--pt-r-sm,9px);
  background:var(--card,#fff);color:inherit;cursor:pointer;font-family:var(--ui,inherit);min-width:50px}
.vccal button:hover{background:var(--card-2,#EEF4F5)}
.vccal button .d{font-size:13px;font-weight:800;font-family:var(--mono,inherit);white-space:nowrap}
.vccal button .w{font-size:10px;color:var(--pt-dim,var(--ink-soft,#3E5C68))}
.vccal button .n{font-size:11px;font-weight:800;color:var(--pt-accent,var(--now,#20758B))}
.vccal button .n.z{color:var(--pt-dim,var(--ink-soft,#3E5C68));font-weight:400}
.vccal button.on{background:var(--pt-accent,var(--now,#3BE08A));color:var(--pt-on-accent,var(--on-now,#0A1A14));border-color:transparent}
.vccal button.on .w,.vccal button.on .n{color:inherit}
.vccal button.sat .d{color:#2464B4}.vccal button.sun .d{color:#C43D2C}
.vccal button.on.sat .d,.vccal button.on.sun .d{color:inherit}
/* 배 목록 */
.vclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/*  줄 하나 = **두 줄** (2026-09-17 재지시): ① 선박 · 좋아요/관심선박 · 선사  ② 편별 빈자리/정원 · 낚시종목.
    예약 단추는 앞서처럼 맨 오른쪽 가운데. */
.vclist li{display:grid;grid-template-columns:1fr auto;grid-auto-flow:row;gap:3px 12px;align-items:center;
  padding:8px 12px;border:1px solid var(--pt-line,var(--line,#D2E0E3));border-radius:var(--pt-r-sm,9px);background:var(--card,#fff)}
.vclist li > *{grid-column:1}
.vclist .l1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:800;min-width:0}
.vclist .l1 a{color:inherit;text-decoration:none}
.vclist .l1 a:hover{text-decoration:underline}
.vclist .l1 .co{font-size:12px;font-weight:400;color:var(--pt-dim,var(--ink-soft,#3E5C68))}
.vclist .l2{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;font-size:12.5px}
.vclist .age{font-size:11.5px;color:var(--pt-dim,var(--ink-soft,#3E5C68))}
.vclist .age.old{color:#A84B32;font-weight:700}
.vclist .seat{font-family:var(--mono,inherit);font-size:12.5px;display:flex;flex-wrap:wrap;gap:3px 9px}
.vclist .seat b{color:var(--pt-accent,var(--now,#20758B));font-size:14px}
/*  둘째 줄의 낚시종류를 **강조**한다(2026-09-17 재지시) — 그날 무엇을 잡으러 가는지가 고르는 잣대다. */
.vclist .seat .trip em{font-style:normal;font-family:var(--ui,inherit);font-weight:800;font-size:12.5px;
  padding:1px 8px;border-radius:99px;background:rgba(240,160,56,.18);color:var(--sonar-ink,#8A4B00)}
.vclist .fish{display:flex;flex-wrap:wrap;gap:4px}
.vclist .fish span{font-weight:400;font-size:12px;color:var(--pt-dim,var(--ink-soft,#3E5C68))}
.vclist .fish span+span::before{content:'·';margin:0 4px}
.vclist .go{grid-column:2;grid-row:1/3;align-self:center;display:inline-flex;align-items:center;gap:4px;padding:8px 13px;
  border-radius:var(--pt-r-sm,9px);background:var(--pt-accent,var(--now,#3BE08A));color:var(--pt-on-accent,var(--on-now,#0A1A14));
  font-weight:800;font-size:13px;text-decoration:none;white-space:nowrap}
.vclist .go:hover{filter:brightness(.96)}
/*  좋아요·관심선박 사이 한 칸 더(2026-09-20 지시) — 10 → 16px. display 를 여기서 직접 준다: 폰(onfishing mobile/app.php)은
    `.sh .nkacts` 규칙만 있어 이 층의 .nkacts 가 flex 가 아니었고, flex 가 아니면 gap 이 아무 일도 안 한다(실측 0px). */
#vcModal .vclist .nkacts{display:inline-flex;align-items:center;margin-left:2px;gap:16px}
/*  ★ 좋아요·관심선박은 **상자 없이 아이콘과 숫자만** (2026-09-20 지시 "박스는 제거하고 아이콘과 숫자만 표기해").
    회원 조각(layout/_member.php)이 꽂는 단추의 겉옷(테두리·바탕·알약·이름표)을 이 층 안에서만 벗긴다 —
    누르는 동작·숫자·켜짐(.on) 색은 그대로다. */
#vcModal .vclist .nkacts button{border:0;background:transparent;padding:0;border-radius:0;gap:3px;box-shadow:none}
#vcModal .vclist .nkacts button:hover{background:transparent;border-color:transparent}
#vcModal .vclist .nkacts button .lb{display:none}
/*  ★ 기준 날짜 (2026-09-20 지시) — 정보 줄의 「YYYY-MM-DD 기준」이 단추다. 누르면 아래 팝업 달력이 뜨고, 날을 고르면 그날부터
    14일 창으로 다시 찾는다(서버 start=). 오늘 앞은 못 고르고 90일 뒤까지. */
/*  ★ **단추로 보이게** (2026-09-30 지시: "기준 날짜 바꾸기를 할 수 있는 날짜의 링크가 잘 인식되지 않아. 버턴 느낌을 주도록").
    점선 밑줄 글자라 누를 곳으로 안 읽혔다 → 테두리·옅은 바탕·달력 그림·▾ 를 단 알약 단추.
    (같은 날 재지시 "버턴을 조금 줄여줘" — 높이 30→24px, 글자 조금 작게.) */
#vcHead .sub .basedate{display:inline-flex;align-items:center;gap:4px;margin:1px 0;padding:2px 8px;min-height:24px;font-size:.92em;
  border:1px solid var(--pt-accent,var(--now,#20758B));border-radius:999px;
  background:color-mix(in srgb,var(--pt-accent,var(--now,#20758B)) 10%,transparent);
  color:var(--pt-accent,var(--now,#20758B));font:inherit;font-weight:700;cursor:pointer;line-height:1.2;
  box-shadow:0 1px 2px rgba(6,20,28,.12);vertical-align:middle}
#vcHead .sub .basedate svg{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
#vcHead .sub .basedate .cv{font-size:13px;line-height:1;opacity:.85}   /* ▾ 조금 크게(2026-09-30 재지시) */
#vcHead .sub .basedate:hover{background:color-mix(in srgb,var(--pt-accent,var(--now,#20758B)) 20%,transparent)}
#vcHead .sub .basedate:active{transform:translateY(1px);box-shadow:none}
#vcHead .sub .basedate:focus-visible{outline:2px solid var(--pt-accent,var(--now,#20758B));outline-offset:2px}
#vcHead .sub .basedate[aria-expanded="true"] .cv{display:inline-block;transform:rotate(180deg)}
#vcCal{position:absolute;z-index:3;left:16px;right:16px;max-width:320px;margin:4px auto 0;padding:10px 12px 12px;
  background:var(--card,#fff);color:inherit;border:1px solid var(--pt-line,var(--line,#D2E0E3));border-radius:var(--pt-r-sm,9px);
  box-shadow:0 12px 30px rgba(6,20,28,.28)}
#vcCal[hidden]{display:none}
#vcCal .h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-weight:800;font-size:13.5px}
#vcCal .h button{border:1px solid var(--pt-line,var(--line,#D2E0E3));background:transparent;color:inherit;border-radius:6px;
  width:28px;height:28px;cursor:pointer;font-size:14px;line-height:1}
#vcCal .h button:disabled{opacity:.35;cursor:default}
#vcCal .g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
#vcCal .g .w{font-size:10.5px;color:var(--pt-dim,var(--ink-soft,#3E5C68));padding:2px 0}
#vcCal .g .w.sat{color:#2464B4}#vcCal .g .w.sun{color:#C43D2C}
#vcCal .g button{border:0;background:transparent;color:inherit;font-family:var(--mono,inherit);font-size:13px;padding:6px 0;
  border-radius:6px;cursor:pointer}
#vcCal .g button:hover{background:var(--card-2,#EEF4F5)}
#vcCal .g button:disabled{opacity:.28;cursor:default;background:transparent}
#vcCal .g button.on{background:var(--pt-accent,var(--now,#3BE08A));color:var(--pt-on-accent,var(--on-now,#0A1A14));font-weight:800}
#vcCal .g button.today{text-decoration:underline;text-underline-offset:3px}
#vcCal .g button.sat{color:#2464B4}#vcCal .g button.sun{color:#C43D2C}
#vcCal .g button.on.sat,#vcCal .g button.on.sun{color:inherit}
:root[data-theme="dawn"] #vcCal .g .w.sat,:root[data-theme="dawn"] #vcCal .g button.sat{color:#7FB2FF}
:root[data-theme="dawn"] #vcCal .g .w.sun,:root[data-theme="dawn"] #vcCal .g button.sun{color:#FF8A78}
#vcCal .note{margin:6px 0 0;font-size:11px;color:var(--pt-dim,var(--ink-soft,#3E5C68))}
.vcnote{font-size:12.5px;color:var(--pt-dim,var(--ink-soft,#3E5C68));margin:10px 0 0}
.vcempty{padding:18px 8px;text-align:center;color:var(--pt-dim,var(--ink-soft,#3E5C68));font-size:13.5px}
.vcwait{padding:34px 8px;text-align:center;color:var(--pt-dim,var(--ink-soft,#3E5C68));font-size:13.5px;line-height:1.7}
.vcwait .spin{display:block;width:34px;height:34px;margin:0 auto 12px;border-radius:50%;
  border:3px solid var(--pt-line,var(--line,#D2E0E3));border-top-color:var(--pt-accent,var(--now,#3BE08A));
  animation:vcspin .9s linear infinite}
/*  정보 줄의 작은 원 — 배경에서 받는 중(비동기). 받아 둔 목록은 그 아래 이미 그려져 있다. */
#vcHead .sub .live{display:inline-flex;align-items:center;gap:5px;color:var(--pt-accent,var(--now,#20758B));font-weight:700}
#vcHead .sub .done{font-weight:700;color:var(--pt-accent,var(--now,#20758B))}
#vcHead .sub .live .spin-s{display:inline-block;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--pt-line,var(--line,#D2E0E3));border-top-color:var(--pt-accent,var(--now,#3BE08A));
  animation:vcspin .9s linear infinite;vertical-align:-1px}
@keyframes vcspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vcwait .spin,#vcHead .sub .live .spin-s{animation:none;border-top-color:var(--pt-line,#D2E0E3)}}
@media (max-width:520px){
  #vcModal .vcwin{padding:14px 12px 14px}
  .vclist li{grid-template-columns:1fr auto}
  .vclist .go{padding:6px 10px;font-size:12px}
}