/* 네트워크 파티 웹 — 구조(상·좌·우·하)는 구조.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); }
/* 약력 2~3줄 — 이름 줄 아래 바로 보임 */
.bio { word-break: keep-all; overflow-wrap: anywhere; grid-column: 1 / -1; flex-basis: 100%; list-style: none; margin: 5px 0 0; padding: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
.bio li { position: relative; padding-left: 10px; margin: 1px 0; }
.bio li::before { content: ""; position: absolute; left: 1px; top: .68em; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
/* 100선 참석자 — 디렉토리북 업체 사진 + 쉼·맛·멋 · 한 줄 소개 */
.intro { grid-column: 1 / -1; flex-basis: 100%; display: flex; gap: 10px; align-items: center; margin-top: 7px; }
.intro img { flex: none; width: 58px; height: 58px; border-radius: 10px; object-fit: cover; display: block; background: rgba(var(--yellow), .35); }
.intro p { word-break: keep-all; overflow-wrap: anywhere; margin: 0; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.intro b { font-weight: 700; color: var(--ink); }
.intro .mid { margin: 0 5px; color: var(--ink-faint); }

.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; align-items: flex-start; 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); }
/* 사업소개 카드 그림 (보고서 장을 칸 단위로) — 누르면 크게 */
.shots { display: grid; gap: 10px; margin: 14px 0 0; }
.shots.grid2 { grid-template-columns: 1fr 1fr; gap: 8px; }
.shot { display: block; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 4px 16px -12px rgba(137,62,18,.45); }
.shot img { display: block; width: 100%; height: auto; }
.about-text { margin: 14px 0 0; }
.about-text summary { display: inline-block; cursor: pointer; padding: 3px 12px; border: 1px solid var(--line); border-radius: 99px; font-size: 12.5px; color: var(--ink-soft); list-style: none; }
.about-text summary::-webkit-details-marker { display: none; }
.about-text summary::after { content: " +"; }
.about-text[open] summary::after { content: " −"; }
.shot-view { position: fixed; inset: 0; z-index: 50; overflow: auto; background: rgba(30,23,18,.88); display: flex; align-items: center; justify-content: center; padding: 16px; touch-action: pinch-zoom pan-x pan-y; cursor: zoom-out; animation: fade .2s ease both; }
.shot-view img { display: block; max-width: 100%; height: auto; border-radius: 8px; background: #fff; }
.shot-view .close { position: fixed; top: 12px; right: 16px; color: #fff; font-size: 30px; line-height: 1; }
body.shot-open { overflow: hidden; }
.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; }
}


/* ---------- 구역 점선 (구조 검토용) — 끄려면 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; }

/* 하단 홍보영상 */
.promo-wrap { position: relative; max-width: 720px; margin: 0 auto 18px; }
.foot .promo { display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; cursor: pointer; border-radius: 14px; object-fit: cover; background: #1e1712; }

/* 시그니처 스팟 — 한 곳씩 한 줄 (사진 왼쪽 · 글 오른쪽) */
.themes.stack { grid-template-columns: 1fr; gap: 14px; }
.themes.stack .theme { display: grid; grid-template-columns: 112px 1fr; column-gap: 12px; align-items: start; }
.themes.stack .theme img { grid-row: 1 / span 3; aspect-ratio: 4/3; }
.themes.stack .theme .k { margin-top: 0; font-size: 18px; }
.themes.stack .theme .k small { font-family: var(--body); font-size: 12px; color: var(--ink-soft); }
.themes.stack .theme .t { font-size: 13px; }
.themes.stack .theme .d { font-size: 12px; margin-top: 2px; }

/* ---------- 모션 (10-26) — 과하지 않게: 띠가 천천히 숨쉬고, 내용은 화면에 들어올 때 살짝 떠오름 ---------- */
/* 1) 마스터 띠 — 14~22초에 걸쳐 아주 느리게 오르내리며 번짐 */
.bands .b1 { animation: breathe 18s ease-in-out infinite alternate; }
.bands .b2 { animation: breathe 22s ease-in-out -6s infinite alternate; }
.bands .b3 { animation: breathe 15s ease-in-out -3s infinite alternate; }
@keyframes breathe {
  from { transform: translate(-50%, 0) scale(1, 1); }
  to   { transform: translate(-50%, 1.6vh) scale(1.05, 1.12); }
}
/* 2) 첫 화면 — 심볼·제목·일시가 차례로 또렷해짐 (로드 직후 1초 안에 끝) */
.z-brand .symbol, .z-brand .en-title, .z-brand .ko-title, .z-event { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.z-brand .en-title { animation-delay: .08s; }
.z-brand .ko-title { animation-delay: .16s; }
.z-event { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
/* 3) 스크롤 등장 — JS가 .rv 를 붙인 것만 (JS 없으면 그대로 보임) */
.rv { opacity: 0; transform: translateY(12px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
/* 4) 누르는 느낌 — 타일·칩·사람 줄 */
.chip, .ttab, .tab, .about-btn { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease; }
.chip:active, .ttab:active, .about-btn:active { transform: scale(.96); }
.tile { transition: transform .2s ease, box-shadow .3s ease; }
@media (hover: hover) { .tile:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(137,62,18,.55); } }
/* 5) 사업소개 — 가운데 장만 또렷, 옆 장은 살짝 물러남 */
.about-card { transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.about-track.ready .about-card:not(.on) { opacity: .5; transform: scale(.965); }
/* 6) 사진은 불러온 뒤 부드럽게 */
.intro img, .theme img, .about-img, .spot .ph img { transition: opacity .5s ease; }
img.lz { opacity: 0; } img.lz.ok { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pane, .bands .b, .z-brand .symbol, .z-brand .en-title, .z-brand .ko-title, .z-event { animation: none !important; }
  .rv { opacity: 1; transform: none; transition: none; }
  .about-track.ready .about-card:not(.on) { opacity: 1; transform: none; }
}

/* 테이블 토크 — 이름 위 분류 (뱃지 대신 작은 머리글: 좌장 뱃지와 겹치지 않게) */
.pr .gb { grid-column: 1 / -1; display: block; margin-bottom: 1px; font-size: 10.5px; line-height: 1.3; letter-spacing: .08em; color: var(--ink-faint); }
.pr .gb::before { content: ""; display: inline-block; width: 10px; height: 1px; margin-right: 6px; vertical-align: middle; background: var(--rc); opacity: .8; }
.lang-en .pr .gb { font-family: var(--en-title); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }

/* 탭 4개(사진 추가, 10-26) — 390px에서 KO/EN과 한 줄에 들어가게 휴대폰에서만 글씨·간격을 줄임 (가로 스크롤안은 「사진」이 가려져 뺌) */
@media (max-width: 480px) {
  .tabs { gap: 2px; }
  .tab { font-size: 13px; padding: 9px 3px; letter-spacing: -.03em; }
  .lang-btn { padding: 6px 8px; }
}

/* ---------- 사업소개 = 보고서 장 슬라이드 (10-26) ---------- */
.about-card.slide { width: calc(100vw - 44px); max-width: 760px; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
.slide-img { display: block; width: 100%; padding: 0; border: 1px solid rgba(137,62,18,.14); border-radius: 12px; overflow: hidden; background: #fff; cursor: zoom-in;
  box-shadow: 0 1px 2px rgba(60,35,15,.06), 0 14px 34px -18px rgba(90,50,20,.45); }
.slide-img img { display: block; width: 100%; height: auto; }
.slide-cap { display: flex; align-items: baseline; gap: 10px; padding: 12px 4px 0; }
.slide-no { font-family: var(--en-title); font-size: 22px; line-height: 1; color: var(--ink); letter-spacing: .02em; }
.slide-tt { font-family: var(--ko-title); font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--ink); }
.slide-tt small { display: block; font-family: var(--body); font-weight: 400; font-size: 11px; color: var(--ink-faint); margin-top: 2px; letter-spacing: .02em; }
.lang-en .slide-tt { font-family: var(--en-title); font-weight: 400; letter-spacing: .02em; }
.about-track.ready .about-card.slide:not(.on) { opacity: .45; transform: scale(.94); }
.shot-view { touch-action: pinch-zoom pan-x pan-y; padding: 16px; }
.shot-view img { max-height: none; }
.shot-view .close { position: fixed; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 40px; cursor: pointer; }
@media (min-width: 900px) { .about-card.slide { width: 760px; } }

/* ---------- 모션 2차 (10-26) — 누르면 「띡」 바뀌지 않게 ---------- */
/* 1) 화면 전환: 머리·배경 띠는 제자리, 본문만 살짝 사라졌다 아래에서 떠오름 */
#app { view-transition-name: main; }
::view-transition-old(root) { display: none; }           /* 머리·띠는 바로 새 상태(살아 있는 화면) — 탭 알약은 CSS로 미끄러짐 */
::view-transition-new(root) { animation: none; }
::view-transition-group(main) { animation: none; }
::view-transition-old(main) { animation: vt-out .2s ease both; }
::view-transition-new(main) { animation: vt-in .46s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
html.vt .pane { animation: none; }
/* 2) 탭 알약이 미끄러져 이동 */
.tabs { position: relative; }
.tab-ind { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 12px; background: var(--ink); opacity: 0; z-index: 0;
  transition: transform .5s cubic-bezier(.22,.9,.24,1), width .5s cubic-bezier(.22,.9,.24,1), opacity .2s; box-shadow: 0 6px 16px -10px rgba(137,62,18,.7); }
.tab { position: relative; z-index: 1; transition: color .35s ease; }
.tabs.has-ind .tab[aria-current="page"] { background: transparent; }
/* 3) 등장 — 조금 더 또렷하게 (거리·흐림·시차) */
.rv { transform: translateY(18px); filter: blur(3px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.rv.in { filter: none; }
/* 4) 방 칩·언어 토글 — 눌린 칩이 살짝 커졌다 자리잡음 */
.chip[aria-selected="true"], .lang-btn[aria-pressed="true"] { animation: pick .38s cubic-bezier(.3,1.5,.5,1); }
@keyframes pick { 0% { transform: scale(.92); } 100% { transform: none; } }
/* 5) 크게 보기·명단 펼침 */
.shot-view { animation: sv-in .32s ease both; }
.shot-view img { animation: sv-img .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sv-in { from { opacity: 0; } }
@keyframes sv-img { from { opacity: 0; transform: scale(.94); } }
.lists[open] > :not(summary) { animation: drop .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
/* 「동작 줄이기」 켠 휴대폰: 움직임은 빼고 서서히 나타나는 것만 남김 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(main) { animation: vt-fade-out .18s ease both; }
  ::view-transition-new(main) { animation: vt-fade-in .3s ease both; }
  @keyframes vt-fade-out { to { opacity: 0; } }
  @keyframes vt-fade-in { from { opacity: 0; } }
  .rv { opacity: 0; transform: none; filter: none; transition: opacity .5s ease; }
  .rv.in { opacity: 1; }
  .tab-ind { transition: opacity .2s; }
  .chip[aria-selected="true"], .lang-btn[aria-pressed="true"], .shot-view img, .lists[open] > :not(summary) { animation: none; }
}