/**
 * TRAK — 루즈벨트 재단 회의실 예약
 * 디자인 정본 = trak-design/design-guide/index.html (Charter v2)
 * ⚠️ 색은 토큰만. 하드코딩 hex 금지.
 */

/* ══════════════════════════════════════════════════════════
   토큰
   ══════════════════════════════════════════════════════════ */
:root{
  /* 기관 프레임 — 미국 본부(TRA) 실사용 */
  --forest:#2E4B1E; --forest-2:#243B17; --forest-tint:#EDF1E4;
  --seal-navy:#172E6A;              /* 정식 엠블럼 전용. UI 색 금지 */
  /* 액션 — 한국지회 캠페인 */
  --action:#2F6FC4;                 /* 텍스트 배경 가능 (흰글씨 5.01 AA) */
  --action-soft:#569EF0;            /* 🔴 면·장식 전용. 텍스트 올리면 2.78 = AA 실패 */
  --action-tint:#E8F1FD;
  /* 온기 — 테디베어포키즈 */
  --butter:#FBF794; --gold:#FFCC32; --sage:#DBE5A6; --tan:#D9C2AD; --brown:#7C664B;
  /* 중립 — 포레스트 계열 잉크 (순수 검정 금지) */
  --paper:#F8FAF5; --card:#FFFFFF; --card-2:#F1F4EC;
  --ink:#1C2A16; --ink-2:#55614E; --ink-3:#8D9686;
  --line:rgba(28,42,22,.10); --line-2:rgba(28,42,22,.18);
  --ok:#2E9E6B; --warn:#E08A2E; --danger:#D2544B;

  --sh-1:0 2px 10px rgba(28,42,22,.06);
  --sh-2:0 12px 30px rgba(28,42,22,.12);
  --r-card:18px; --r-ctl:12px; --r-slot:10px;

  --ui:'Spoqa Han Sans Neo',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  --display:'GmarketSans',var(--ui);

  --safe-top:max(env(safe-area-inset-top),0px);
  --safe-bot:max(env(safe-area-inset-bottom),0px);
  --header-h:56px; --gnb-h:64px;
}

/* ══════════════════════════════════════════════════════════
   기본
   ══════════════════════════════════════════════════════════ */
html,body{background:var(--paper)}   /* PWA 콜드부팅 첫 페인트 = 흰 화면 방지 */
body{
  font-family:var(--ui); color:var(--ink); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; margin:0;
  -webkit-tap-highlight-color:transparent;
}
*{box-sizing:border-box}
h1,h2,h3,.tk-display{font-family:var(--display);font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:0}
.tk-num{font-variant-numeric:tabular-nums}
.tk-muted{color:var(--ink-2)} .tk-dim{color:var(--ink-3)}
.tk-sm{font-size:13px} .tk-xs{font-size:12px}
button{font-family:var(--ui)}

/* 🔥 §26 — 씬 mount 래퍼가 flex 체인을 끊지 않게 */
#scene-area [class$="-mount"]{display:contents}

/* 🔥 §11 — .show{display:block!important} 유틸이 PAGE 컨테이너 flex 를 깨는 것 복원 */
.sub-page-container.show{display:flex !important}
.sub-page-content{min-height:0;background:transparent}

/* eyebrow — 공식 락업의 자간 넓은 로만 대문자 + 룰 */
.tk-eyebrow{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--forest);
  font-weight:700;border-bottom:1px solid var(--line-2);padding-bottom:6px;
  display:inline-block;margin-bottom:10px;
}

/* 🔥 프레임워크 광역 button 스킨 차단
   nskit-base.css 는 `button, .btn` 에 <b>리셋이 아니라 스킨</b>을 입힌다:
     border-radius · padding · font-size/weight · line-height · display:inline-flex
     align-items · justify-content · gap · transition   (+ :hover 에 box-shadow·transform)
   ⚠️ CSS 는 규칙이 아니라 <b>속성 단위로 병합</b>된다. 우리 선택자의 특정도가 더 높아도
      그 속성을 <b>선언하지 않으면 경쟁이 일어나지 않아</b> 광역 값이 그대로 적용된다.
      (실측: .tk-row 가 border-radius 8px · font-weight 600 · justify-content center 를 상속받고 있었다)
   → 규칙: button 기반 컴포넌트는 위 속성을 <b>자기 값으로 명시 선언</b>한다. */

/* 🔥 프레임워크 전역 hover 효과 무력화
   nskit-base.css 가 `button:hover, .btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.1) }`
   를 <b>모든 button</b> 에 건다. 우리 컴포넌트(GNB 탭·슬롯·리스트 행·아이콘 버튼)는 전부 button 이라
   그림자와 들림이 그대로 먹고, 모바일에서는 탭 뒤 hover 가 고착돼 "선택하면 그림자가 남는" 것처럼 보인다.
   특히 GNB 탭은 높이가 바(64px)와 거의 같아 그림자가 바 전체를 감싼 박스처럼 보여 디자인이 깨진다.
   → 공유 프레임워크 파일은 건드리지 않고 여기서 무력화한다. 강조가 필요한 곳은 우리 방식으로 따로 준다. */
.tk-gnb .tab:hover, .tk-slot:hover, .tk-row:hover, .tk-btn:hover,
.tk-iconbtn:hover, .navbtn:hover, .seg button:hover, .tk-cal button:hover{
  transform:none; box-shadow:none;
}

/* ══════════════════════════════════════════════════════════
   셸 (헤더 / 씬 / GNB)
   ══════════════════════════════════════════════════════════ */
.page-m-main{width:100%;height:100vh;height:100dvh;position:relative;background:var(--paper);overflow:hidden}

.tk-header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:calc(var(--header-h) + var(--safe-top));padding-top:var(--safe-top);
  background:var(--forest);color:#fff;
  display:flex;align-items:center;gap:10px;padding-left:14px;padding-right:6px;
}
.tk-header .tk-ttl{font-family:var(--display);font-size:16px;letter-spacing:-.01em;line-height:1.2}
.tk-header .tk-sub{font-size:11px;opacity:.72;margin-top:1px}
.tk-header .tk-act{margin-left:auto;display:flex;gap:2px}
.tk-iconbtn{
  width:40px;height:40px;border:0;background:transparent;color:#fff;
  display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;
}
.tk-iconbtn:active{background:rgba(255,255,255,.14)}

/* 헤더 위치 선택 — 탭하면 PANEL 'bottom' 시트가 열린다(NSKit 규약: 바텀시트=PANEL) */
.tk-roompick{display:flex;align-items:center;gap:5px;max-width:52vw;
  background:rgba(255,255,255,.14);border:0;border-radius:999px;padding:7px 10px 7px 13px;
  color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.tk-roompick .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-roompick .cv{transition:transform .18s}
.tk-roompick.open .cv{transform:rotate(180deg)}

/* 바텀시트 = 프레임워크 기본 동작(nskit-panel.js bottom 분기)을 그대로 쓴다.
   ⚠️ PANEL.show 의 size 는 반드시 <b>숫자(px)</b>. 'auto' 를 넘기면 프레임워크가
      `-panelSize + 'px'` → "NaNpx" 를 만들어 시작 위치가 화면 밖으로 안 잡히고
      슬라이드업이 사라진다(그 자리에서 팍 나타남). byeol 도 전부 숫자로 넘긴다.
   여기서는 시각 요소(상단 라운드)만 얹는다 — 애니메이션은 덮지 않는다. */
#side-panel-area .side-panel-container.bottom{
  border-radius:18px 18px 0 0; overflow:hidden;
}

/* 위치 선택 시트 */
.panel-buildingpick{padding:6px 0 10px}
.panel-buildingpick .ph{display:flex;align-items:center;gap:10px;padding:6px 18px 12px}
.panel-buildingpick .ph .t{flex:1;font-family:var(--display);font-size:17px}
.panel-buildingpick .it{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  border:0;background:transparent;padding:14px 18px;cursor:pointer;color:var(--ink);
  font-weight:400;line-height:1.45;justify-content:flex-start;border-radius:0}
.panel-buildingpick .it + .it{border-top:1px solid var(--line)}
.panel-buildingpick .it.on{background:var(--forest-tint)}
.panel-buildingpick .it .ic{color:var(--forest);flex:0 0 auto;margin-top:2px}
.panel-buildingpick .it .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.panel-buildingpick .it .nm{font-family:var(--display);font-size:15px;display:block}
.panel-buildingpick .it .sub{font-size:12px;color:var(--ink-2);display:block}
.panel-buildingpick .it .meta{font-size:11.5px;color:var(--ink-3);display:block}
.panel-buildingpick .it .ck{color:var(--forest);flex:0 0 auto;align-self:center}

#scene-area{
  position:absolute;top:calc(var(--header-h) + var(--safe-top));left:0;right:0;
  height:calc(100% - var(--header-h) - var(--safe-top) - var(--gnb-h) - var(--safe-bot));
  overflow:hidden;
}
#scene-area > *{position:absolute;inset:0}
#scene-area > * > *{position:absolute;inset:0;display:flex;flex-direction:column}

.tk-gnb{
  position:fixed;bottom:0;left:0;right:0;z-index:900;
  height:calc(var(--gnb-h) + var(--safe-bot));padding-bottom:var(--safe-bot);
  background:var(--card);border-top:1px solid var(--line);display:flex;
}
.tk-gnb .tk-tabs{list-style:none;margin:0;padding:0;display:flex;flex:1}
.tk-gnb .tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--ink-3);font-size:11px;font-weight:700;cursor:pointer;
  -webkit-user-select:none;user-select:none;   /* li 는 텍스트라 탭 시 선택 하이라이트가 뜬다 */
}
.tk-gnb .tab.on{color:var(--forest)}
.tk-gnb .tab.on svg{stroke-width:2.1}   /* 활성 = 색 + 선 굵기. 그림자·박스 없음 */
.tk-gnb .tab svg{width:22px;height:22px}

/* 씬 공통 — 헤더 고정 + 본문 스크롤 */
.tk-scene-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px 40px}

/* ══════════════════════════════════════════════════════════
   컴포넌트
   ══════════════════════════════════════════════════════════ */
.tk-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1)}
.tk-card.pad{padding:16px}

.tk-btn{
  font-weight:700;font-size:14px;border-radius:var(--r-ctl);
  padding:12px 18px;border:1px solid transparent;cursor:pointer;
}
.tk-btn.cta{background:var(--action);color:#fff}
.tk-btn.cta:disabled{background:var(--ink-3);opacity:.55;cursor:not-allowed}
.tk-btn.ghost{background:var(--card-2);color:var(--ink)}
.tk-btn.line{background:var(--card);border-color:var(--line-2);color:var(--ink)}
.tk-btn.block{width:100%}
.tk-btn:active:not(:disabled){transform:scale(.985)}

.tk-chip{display:inline-block;background:var(--forest-tint);color:var(--forest);border-radius:999px;
  padding:5px 13px;font-size:12.5px;font-weight:700}
.tk-badge{display:inline-block;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700}
.tk-badge.wait{background:var(--butter);color:var(--forest)}
.tk-badge.ok{background:var(--sage);color:var(--forest)}
.tk-badge.no{background:rgba(210,84,75,.14);color:var(--danger)}
.tk-badge.cancel{background:var(--card-2);color:var(--ink-3)}

/* ── 월 캘린더 ─────────────────────────────────────────── */
.tk-cal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:14px;box-shadow:var(--sh-1)}
.tk-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.tk-cal-head .m{font-family:var(--display);font-size:19px}
.tk-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.tk-cal-dow span{text-align:center;font-size:11px;font-weight:700;color:var(--ink-3)}
.tk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.tk-day{
  position:relative;aspect-ratio:1;border-radius:10px;border:1px solid var(--line);background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;color:var(--ink);
}
.tk-day .lv{font-size:9px;font-weight:400;color:var(--ink-3)}
.tk-day.free{background:rgba(219,229,166,.45);border-color:rgba(150,168,80,.30)}
.tk-day.mid{background:rgba(251,247,148,.55);border-color:rgba(200,190,80,.35)}
.tk-day.full{background:rgba(217,194,173,.45);border-color:rgba(124,102,75,.25);color:var(--brown)}
.tk-day.off{background:var(--card-2);color:var(--ink-3);cursor:not-allowed}
.tk-day.past{opacity:.4;cursor:not-allowed}
.tk-day.empty{border:0;background:transparent;cursor:default}
.tk-day.sel{outline:2px solid var(--forest);outline-offset:-2px}
.tk-day .dot{position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--action)}

/* ── 회의실 페이저 (3슬롯 재활용 = 무한 로테이션) ────────
   트랙에 슬라이드는 항상 3개(prev/cur/next)만 존재한다. 전환이 끝나면 가운데로 되감고
   내용을 다시 채운다 → 회의실이 몇 개든 DOM 은 3개로 고정, 양방향 무한. */
.tk-track-vp{overflow:hidden;touch-action:pan-y;overscroll-behavior-x:none;-webkit-user-select:none;user-select:none}
.tk-track{display:flex;will-change:transform}
.tk-track.anim{transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.tk-slide{flex:0 0 100%;min-width:100%}
.tk-roomname{display:flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--display);font-size:15px;color:var(--forest);margin:0 0 10px;text-align:center}
.tk-roomname .cap{font-family:var(--ui);font-weight:400;font-size:12px;color:var(--ink-3)}
.tk-pager{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px}
.tk-pager button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--line-2);
  cursor:pointer;transition:width .2s,background .2s}
.tk-pager button.on{width:20px;border-radius:999px;background:var(--forest)}

/* ── 슬롯 그리드 ───────────────────────────────────────── */
.tk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.tk-slot{
  border-radius:var(--r-slot);padding:11px 10px;font-size:13px;font-weight:700;
  border:1px solid var(--line);background:var(--card);position:relative;
  font-variant-numeric:tabular-nums;cursor:pointer;text-align:left;color:var(--ink);
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
}
.tk-slot .t{font-size:11.5px;font-weight:400;color:var(--ink-3)}
.tk-slot.mine{background:var(--action);border-color:var(--action);color:#fff;cursor:default}
.tk-slot.mine .t{color:rgba(255,255,255,.82)}
.tk-slot.mine::after{content:"";position:absolute;top:8px;right:9px;width:6px;height:6px;border-radius:50%;background:var(--butter)}
.tk-slot.taken{background:rgba(217,194,173,.32);border-color:rgba(124,102,75,.22);color:var(--brown);cursor:default}
.tk-slot.taken .t{color:rgba(124,102,75,.75)}
.tk-slot.pick{border:2px solid var(--gold);padding:10px 9px}
.tk-slot.blocked{
  background:repeating-linear-gradient(45deg,var(--card-2),var(--card-2) 6px,rgba(28,42,22,.06) 6px,rgba(28,42,22,.06) 12px);
  color:var(--ink-3);cursor:not-allowed;
}
.tk-slot.past{opacity:.45;cursor:not-allowed}
.tk-slot:active:not(.taken):not(.blocked):not(.past):not(.mine){transform:scale(.97)}

/* ── 회의실 카드 (설정 · 회의실 목록 공유) ─────────────── */
.tk-roomcard{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  padding:14px 15px;margin-bottom:10px;cursor:pointer;color:var(--ink);
  border-radius:var(--r-card);font-weight:400;line-height:1.5;justify-content:flex-start}
.tk-roomcard .ico{color:var(--forest);flex:0 0 auto;margin-top:2px}
.tk-roomcard .body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.tk-roomcard .nm{font-family:var(--display);font-size:16px;display:flex;align-items:center;gap:6px}
.tk-roomcard .nm .cur{font-style:normal;font-family:var(--ui);font-size:10.5px;font-weight:700;
  color:var(--forest);background:var(--forest-tint);border-radius:999px;padding:2px 8px}
.tk-roomcard .sub{font-size:12.5px;color:var(--ink-2)}
.tk-roomcard .meta{font-size:11.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.tk-roomcard .meta .dot2{opacity:.5}
.tk-roomcard .go{color:var(--ink-3);flex:0 0 auto;align-self:center}
.tk-roomcard.on{border-color:rgba(46,75,30,.30)}

/* ── 예약 카드 ─────────────────────────────────────────── */
.tk-resv{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:10px}
.tk-resv .body{flex:1;min-width:0}
.tk-resv .d{font-family:var(--display);font-size:16px}
.tk-resv .tm{font-variant-numeric:tabular-nums;font-size:15px;margin:2px 0;font-weight:700}
.tk-resv .meta{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 도장 ──────────────────────────────────────────────── */
.tk-stamp-ring{font-size:9px;letter-spacing:1.4px;font-weight:700}
.tk-stamp-ring2{font-size:9px;letter-spacing:1.6px;font-weight:700}
.tk-stamp-mid{font-family:var(--display);font-size:25px}
.tk-stamp-sub{font-size:10.5px;letter-spacing:.6px}
.tk-tilt{transform:rotate(-7deg)}
@keyframes tkStamp{from{transform:rotate(-12deg) scale(1.25);opacity:0}to{transform:rotate(-7deg) scale(1);opacity:1}}
.tk-stamp-in{animation:tkStamp .32s cubic-bezier(.2,1.4,.4,1) both}

/* ── 빈 상태 ───────────────────────────────────────────── */
.tk-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:44px 20px;text-align:center}
.tk-empty .msg{font-family:var(--display);font-size:16px;color:var(--ink-2)}
.tk-empty .sub{font-size:13px;color:var(--ink-3)}

/* ── 상태 배너 ─────────────────────────────────────────── */
.tk-banner{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-ctl);
  background:var(--butter);color:var(--forest);font-size:13px;font-weight:700;margin-bottom:14px}
.tk-banner.info{background:var(--forest-tint)}

/* ── 리스트 (설정) ─────────────────────────────────────── */
.tk-list{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-1)}
.tk-row{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:15px 16px;
  border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:var(--card);cursor:pointer;font-size:15px;font-weight:400;line-height:1.55;
  width:100%;text-align:left;color:var(--ink)}
.tk-row:last-child{border-bottom:0}
/* .tk-row 는 button 기준으로 만들었다 — <a> 로 쓸 때 브라우저 기본 밑줄·링크색이 되살아난다.
   (전역 리셋이 아니라 이 컴포넌트 반경에서만 무력화 — NSKit CSS 규약) */
a.tk-row{text-decoration:none;color:var(--ink)}
a.tk-row:visited{color:var(--ink)}
.tk-row .r{margin-left:auto;color:var(--ink-3);font-size:13px;display:flex;align-items:center;gap:6px}

/* ── 폼 ────────────────────────────────────────────────── */
.tk-field{margin-bottom:14px}
.tk-field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.tk-input{width:100%;font-family:var(--ui);font-size:15px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--card)}
.tk-input:focus{outline:2px solid var(--action);outline-offset:-1px;border-color:transparent}

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