/* 네트워크 파티 웹 — 구조(상·좌·우·하)는 구조.md, 디자인(모션)은 아직 안 함. 띠 모티프 톤 유지 */
:root {
  --bg: #F6F3EE;
  --ink: #893E12;
  --ink-soft: #A2643E;
  --ink-faint: rgba(137, 62, 18, .55);
  --line: rgba(137, 62, 18, .16);
  --card: rgba(255, 252, 247, .78);
  --orange: 241, 150, 40;
  --yellow: 249, 205, 110;
  --ko-title: "Gowun Batang", "Noto Serif KR", serif;
  --en-title: "Marcellus", "Gowun Batang", serif;
  --body: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  /* 방 색 — 시트 방 이름을 마스터 톤에 맞게 채도 낮춘 1차 값. 디자인 단계에서 조정 */
  --room-red: #B9574B;
  --room-orange: #D4883E;
  --room-yellow: #CFAF45;
  --room-green: #7E9E6C;
  --room-blue: #6D8FB8;
  --room-indigo: #5D6A9C;
  --room-violet: #8C73A5;
  --room-gray: #8F8A85;
  --room-pink: #D08E98;
  --room-brown: #8B684F;
  --room-white: #CDBFAA;
  --room-gold: #C49D45;
  --room-silver: #A9A7A3;
  --room-black: #3A3330;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-weight: 420; line-height: 1.55; min-height: 100vh;
  word-break: keep-all; overflow-wrap: anywhere; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
[data-ko], [data-en] { }

/* ---------- 띠 모티프 (마스터: 주황→노랑 가로 타원이 층층이) — 지금은 상단에만 옅게 ---------- */
.bands { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bands .b {
  position: absolute; left: 50%; width: 150vw; max-width: 1600px; height: 22vh; min-height: 130px;
  transform: translateX(-50%); border-radius: 50%; filter: blur(6px);
  background: radial-gradient(ellipse at 50% 50%, rgba(var(--orange), .85) 0%, rgba(var(--yellow), .55) 36%, rgba(var(--yellow), .16) 60%, transparent 72%);
}
.bands .b1 { top: -6vh; opacity: .42; }
.bands .b2 { top: 8vh;  opacity: .30; }
.bands .b3 { top: 22vh; opacity: .14; }
.bands .grain {
  position: absolute; inset: 0; opacity: .2; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .95  0 0 0 0 .85  0 0 0 0 .7  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- 상 ---------- */
.top { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.z-brand { text-align: center; padding: 26px 0 6px; }
.z-brand .symbol { display: block; margin: 0 auto 8px; width: 46px; height: auto; }
.en-title { font-family: var(--en-title); font-size: clamp(22px, 6.4vw, 30px); line-height: 1.08; margin: 0; letter-spacing: .01em; }
.ko-title { font-family: var(--ko-title); font-size: 14px; margin: 6px 0 0; letter-spacing: .02em; color: var(--ink-soft); }
.z-event { text-align: center; font-size: 14px; color: var(--ink-soft); padding: 8px 0 14px; }
.z-event .ev-name { display: block; margin-bottom: 2px; }
.z-event .ev-name + .ev-dot { display: none; }
.z-event .ev-name { font-family: var(--ko-title); font-weight: 700; color: var(--ink); font-size: 16px; }
html[lang="en"] .z-event .ev-name { font-family: var(--en-title); font-weight: 400; }
.z-event .ev-dot { margin: 0 6px; color: var(--ink-faint); }

.bar {
  position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 8px;
  margin: 0 -16px; padding: 8px 16px; background: rgba(246,243,238,.88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
body.scrolled .bar { border-bottom-color: var(--line); }
.tabs { display: flex; flex: 1; gap: 4px; min-width: 0; }
.tab {
  flex: 1; text-align: center; padding: 9px 4px; border-radius: 12px; font-size: 14.5px; font-weight: 600;
  color: var(--ink-soft); border: 1px solid transparent; white-space: nowrap;
}
.tab[aria-current="page"] { background: var(--ink); color: #FBF6EE; }
.lang { display: flex; flex: none; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; background: rgba(255,252,247,.7); }
.lang-btn { padding: 6px 10px; border: 0; background: transparent; font-family: var(--en-title); font-size: 12.5px; letter-spacing: .04em; cursor: pointer; }
.lang-btn[aria-pressed="true"] { background: var(--ink); color: #FBF6EE; }

/* ---------- 공통 ---------- */
#app { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.pane { animation: fade .35s ease both; padding-top: 14px; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 7px 12px 7px 9px; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(255,252,247,.75); font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--ink); white-space: nowrap; --rc: var(--ink);
}
.chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rc); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.chip .n { font-weight: 400; color: var(--ink-faint); font-size: 12px; }
.chip[aria-selected="true"] { background: var(--rc); border-color: var(--rc); color: #fff; }
.chip[aria-selected="true"] .dot { background: #fff; }
.chip[aria-selected="true"] .n { color: rgba(255,255,255,.8); }
.chip.light[aria-selected="true"] { color: #3A2A1C; }
.chip.light[aria-selected="true"] .n { color: rgba(58,42,28,.7); }

/* ---------- 좌-1: #talk 방 격자 / #talk-n 칩 줄 ---------- */
.z-chips { margin: 0; padding: 10px 12px 12px; }
.mode-list .z-chips { position: sticky; top: 54px; z-index: 5; background: rgba(246,243,238,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.z-title { font-family: var(--ko-title); font-weight: 700; font-size: 17px; margin: 0 0 10px; }
.z-title small { display: block; font-family: var(--body); font-weight: 400; font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  --rc: var(--ink); position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 92px; padding: 12px 12px 11px 16px;
  border-radius: 16px; background: var(--card); border: 1px solid var(--line); overflow: hidden;
  box-shadow: 0 6px 20px -16px rgba(137,62,18,.4); transition: transform .15s ease;
}
.tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--rc); }
.tile::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42px; background: linear-gradient(180deg, var(--rc), transparent); opacity: .18; }
.tile:active { transform: scale(.97); }
.tile-name { position: relative; font-family: var(--en-title); font-size: 17px; letter-spacing: .02em; }
.tile-sub { position: relative; font-size: 12px; color: var(--ink-faint); }
.tile-chair { position: relative; margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--ink-soft); }
.tile-chair::before { content: "★ "; color: var(--rc); }
.placeholder { margin: 0; padding: 22px 16px; text-align: center; font-size: 13px; color: var(--ink-faint); }
.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chip.mini { padding: 4px 10px 4px 7px; font-size: 12.5px; }
.chip.mini .dot { width: 8px; height: 8px; }

/* ---------- 우-1 방 카드 ---------- */
.z-rooms { padding: 12px; margin-top: 12px; }
.room-list.plain { padding: 0; }
.rdot { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.rdot .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rc); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.room { --rc: var(--ink); border-radius: 18px; background: var(--card); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 6px 24px -16px rgba(137,62,18,.35); }
.room-h { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 12px 16px 10px 18px; border-bottom: 1px solid var(--line); }
.room-h::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--rc); }
.room-h::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--rc), transparent 70%); opacity: .55; }
.room-h h3 { margin: 0; font-family: var(--en-title); font-weight: 400; font-size: 20px; letter-spacing: .02em; }
.room-h .sub { font-size: 12.5px; color: var(--ink-faint); margin-left: auto; white-space: nowrap; }
.room-list { list-style: none; margin: 0; padding: 4px 16px 8px; }
.pr { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.pr:last-child { border-bottom: 0; }
.pr .nm { font-size: 16.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.pr .nm .star { color: var(--rc); margin-right: 3px; font-size: 14px; }
.pr .rest { min-width: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.pr .ti { color: var(--ink-faint); }
.pr .ti::before { content: " · "; color: var(--ink-faint); }
.pr .tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--rc); color: #fff; font-size: 11px; font-weight: 600; vertical-align: 2px; }
.pr.light .tag { color: #3A2A1C; }
.pr.chair { background: linear-gradient(90deg, rgba(255,252,247,.0), rgba(255,252,247,.0)); }
.pr.chair .nm { font-size: 17.5px; }

/* ---------- 우-2 함께하는 사람들 ---------- */
.people { padding: 12px; }
.subchips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px 12px; padding: 4px 12px 8px; position: sticky; top: 54px; z-index: 5; background: rgba(246,243,238,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.subchips.static { position: static; background: transparent; backdrop-filter: none; margin: 10px 0 0; padding: 0; }
.subchips::-webkit-scrollbar { display: none; }
.group { margin-top: 22px; }
.group-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; padding-bottom: 7px; font-size: 15px; font-weight: 700; border-bottom: 1px solid var(--line); font-family: var(--ko-title); }
.group-h small { font-family: var(--en-title); font-weight: 400; font-size: 11.5px; color: var(--ink-faint); letter-spacing: .03em; }
.group-h .n { margin-left: auto; font-family: var(--body); font-weight: 400; font-size: 12px; color: var(--ink-faint); }
.person { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.person:last-child { border-bottom: 0; }
.person .nm { font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.person .role { font-size: 11.5px; padding: 1px 8px; border-radius: 99px; color: #fff; background: linear-gradient(90deg, #C6662A, #E39A3B); align-self: center; }
.person .org { flex-basis: 100%; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.person .cat { font-size: 12px; color: var(--ink-faint); }
/* 앰배서더 약력 — 이름 줄 아래 접이식 */
.bio { grid-column: 1 / -1; flex-basis: 100%; margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
.bio summary { display: inline-block; cursor: pointer; padding: 2px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 12px; color: var(--ink-soft); list-style: none; }
.bio summary::-webkit-details-marker { display: none; }
.bio summary::after { content: " +"; }
.bio[open] summary::after { content: " −"; }
.bio ul { margin: 8px 0 2px; padding-left: 16px; line-height: 1.55; }
.bio li { margin: 2px 0; }

.tools { position: static; z-index: 4; margin: 10px -16px 0; padding: 6px 16px 10px; background: rgba(246,243,238,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ttabs { display: flex; gap: 6px; }
.ttab { flex: 1; padding: 8px 0 7px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,252,247,.6); font-size: 14.5px; cursor: pointer; }
.ttab small { display: block; font-family: var(--en-title); font-size: 10px; color: var(--ink-faint); line-height: 1.1; }
.ttab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #FBF6EE; }
.ttab[aria-pressed="true"] small { color: rgba(251,246,238,.75); }
.search { display: block; width: 100%; margin-top: 8px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,252,247,.8); font: inherit; font-size: 16px; color: var(--ink); }
.search::placeholder { color: var(--ink-faint); }
.search:focus { outline: 2px solid rgba(var(--orange), .5); outline-offset: 1px; }
.spot { display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.spot:last-child { border-bottom: 0; }
.spot .ph { flex: none; width: 82px; height: 82px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, rgba(var(--yellow), .5), rgba(var(--orange), .35)); }
.spot .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spot .tx { min-width: 0; }
.spot .ko { font-size: 16px; font-weight: 700; line-height: 1.35; }
.spot .en { font-family: var(--en-title); font-size: 12px; color: var(--ink-faint); line-height: 1.3; margin-top: 1px; }
.spot .ln { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin-top: 4px; }
.empty { padding: 40px 0; text-align: center; color: var(--ink-faint); }

/* ---------- 하-1 사업소개 (옆으로 넘김) ---------- */
.about { padding: 12px 12px 16px; }
.lists { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 10px; }
.lists summary { cursor: pointer; font-family: var(--ko-title); font-weight: 700; font-size: 16px; padding: 8px 0; list-style: none; display: flex; align-items: baseline; gap: 8px; }
.lists summary::-webkit-details-marker { display: none; }
.lists summary::before { content: "▸"; color: var(--ink-faint); font-size: 13px; }
.lists[open] summary::before { content: "▾"; }
.lists summary small { font-family: var(--body); font-weight: 400; font-size: 12px; color: var(--ink-faint); }
.about-hint { text-align: center; font-size: 12.5px; color: var(--ink-faint); margin: 0 0 8px; }
.about-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -12px; padding: 4px 12px 6px; -webkit-overflow-scrolling: touch; }
.about-track::-webkit-scrollbar { display: none; }
.about-card {
  flex: none; width: calc(100vw - 56px); max-width: 520px; scroll-snap-align: center; border-radius: 20px;
  background: var(--card); border: 1px solid var(--line); padding: 18px 18px 20px; box-shadow: 0 6px 24px -16px rgba(137,62,18,.35);
}
.about-no { font-family: var(--en-title); font-size: 12px; letter-spacing: .08em; color: var(--ink-faint); }
.about-title { font-family: var(--ko-title); font-weight: 700; font-size: 22px; margin: 2px 0 0; }
.about-title small { display: block; font-family: var(--en-title); font-weight: 400; font-size: 12.5px; color: var(--ink-faint); letter-spacing: .04em; margin-top: 2px; }
.about-head { font-family: var(--ko-title); font-weight: 700; font-size: 16px; line-height: 1.5; margin: 14px 0 0; }
.about-sub { font-size: 13.5px; color: var(--ink-soft); margin: 6px 0 0; }
.about-img { display: block; width: 100%; height: auto; border-radius: 14px; margin: 14px 0 0; background: #fff; }
.about-img.diagram { max-width: 300px; margin-left: auto; margin-right: auto; background: transparent; }
.about-kw { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.about-kw span { font-size: 12.5px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,252,247,.7); }
.about-kw span small { font-family: var(--en-title); color: var(--ink-faint); margin-left: 4px; }
.about-bul { margin: 14px 0 0; padding: 0; list-style: none; }
.about-bul li { position: relative; padding: 5px 0 5px 16px; font-size: 14px; line-height: 1.55; }
.about-bul li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #E39A3B, #C6662A); }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; }
.theme img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; display: block; }
.theme .k { font-family: var(--ko-title); font-weight: 700; font-size: 20px; margin-top: 6px; line-height: 1.1; }
.theme .k small { font-family: var(--en-title); font-size: 10px; color: var(--ink-faint); margin-left: 4px; }
.theme .t { font-size: 12.5px; font-weight: 600; margin-top: 3px; }
.theme .d { font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; }
.rows { margin: 14px 0 0; display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: start; }
.row .lb { font-size: 12.5px; font-weight: 700; padding: 8px 6px; border-radius: 10px; background: var(--ink); color: #FBF6EE; text-align: center; line-height: 1.3; }
.row .tt { font-size: 14px; font-weight: 700; }
.row ul { margin: 2px 0 0; padding-left: 14px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.dirs { margin: 14px 0 0; }
.dirs .dt { font-family: var(--en-title); font-size: 12px; letter-spacing: .06em; color: var(--ink-faint); }
.dirs ol { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.quote { margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid #E39A3B; font-family: var(--ko-title); font-weight: 700; font-size: 14.5px; }
.about-src { margin: 14px 0 0; font-size: 11px; color: var(--ink-faint); }
.about-nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0 0; }
.about-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,252,247,.8); cursor: pointer; font-size: 22px; line-height: 1; }
.about-dots { display: flex; gap: 6px; }
.about-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.about-dots span.on { background: var(--ink); }

/* ---------- 하-2 ---------- */
.foot { position: relative; z-index: 1; text-align: center; padding: 40px 16px 36px; font-size: 13px; color: var(--ink-soft); }
.foot p { margin: 4px 0 0; }
.foot .symbol { display: block; margin: 0 auto 10px; width: 40px; height: auto; }
.foot .foot-en { font-family: var(--en-title); font-size: 11px; letter-spacing: .06em; color: var(--ink-faint); margin-top: 10px; }

/* ---------- 넓은 화면 ---------- */
@media (min-width: 720px) {
  .z-brand { padding-top: 40px; }
  .person-grid, .spots { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .person-grid .person:last-child, .spots .spot:last-child { border-bottom: 1px dashed var(--line); }
  .about-card { width: 520px; }
}
@media (min-width: 900px) {
  .talk.mode-list { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; }
  .mode-list .z-chips { position: sticky; top: 64px; background: transparent; backdrop-filter: none; }
  .mode-list .chips { flex-direction: column; overflow: visible; gap: 6px; }
  .mode-list .chip { justify-content: flex-start; }
  .mode-list .z-rooms { margin-top: 0; max-width: 680px; }
  .tiles { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .tile { min-height: 108px; }
}
@media (prefers-reduced-motion: reduce) { .pane { animation: none; } }

/* ---------- 구역 점선 (구조 검토용) — 끄려면 body에 class="no-guide" 를 주거나 이 블록을 지운다 ---------- */
.zone-guide { position: relative; outline: 1.5px dashed rgba(90, 70, 50, .45); outline-offset: -2px; }
.zone-guide::after { content: attr(data-guide); position: absolute; top: 3px; right: 6px; z-index: 7; font-family: var(--body); font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 4px; color: #777; background: rgba(255,255,255,.7); border: 1px dashed rgba(90,70,50,.4); pointer-events: none; }
.zone-guide + .zone-guide, #tab-talk .zone-guide { margin-top: 10px; }
.foot.zone-guide { margin: 14px 16px 0; }
body.no-guide .zone-guide { outline: none; }
body.no-guide .zone-guide::after { display: none; }