/* =====================================================================
   style.css — 사이트 전체 디자인
   1) 색·글꼴은 맨 위 :root 에서 바꾸면 사이트 전체에 적용됩니다.
   ===================================================================== */
:root {
  --bg: #f3efe7;        /* 따뜻한 오프화이트 */
  --paper: #faf8f3;
  --ink: #14181c;       /* 거의 검정 */
  --muted: #5b6168;
  --line: #d9d3c7;
  --lake: #274c77;      /* 핀란드 호수 블루 */
  --lake-soft: #dfe7f0;
  --ember: #d9603b;     /* 따뜻한 포인트(버튼·강조) */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 56px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(64px, 9vw, 130px) 0; }
.label { font: 600 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--lake); }
.muted { color: var(--muted); }
.big { font-size: clamp(2.4rem, 6.5vw, 5.6rem); }
.mid { font-size: clamp(1.8rem, 3.6vw, 3rem); }
.lede { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.5; max-width: 40ch; }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }

/* ---- 샘플 안내 띠 ---- */
.sample-bar { background: var(--ink); color: #e9e5db; font-size: .82rem; text-align: center; padding: 8px var(--pad); }

/* ---- 헤더 / 네비게이션 ---- */
.header { position: sticky; top: 0; z-index: 50; background: rgba(251,243,231,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; }
.logo { font: 700 1.05rem var(--sans); letter-spacing: .2em; }
.nav { display: flex; gap: 28px; align-items: center; }
.nav a { font-size: .98rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a.on { border-color: var(--ember); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; border: 1.5px solid var(--ink); font: 600 .98rem var(--sans); cursor: pointer; background: transparent; color: var(--ink); transition: .25s; }
.btn:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.btn.solid { background: var(--ember); border-color: var(--ember); color: #fff; }
.btn.solid:hover { background: var(--ink); border-color: var(--ink); }
.btn.light { border-color: #fff; color: #fff; }
.btn.light:hover { background: #fff; color: var(--ink); }
.btn.small { padding: 9px 18px; font-size: .9rem; }
.burger { display: none; background: none; border: 0; width: 46px; height: 46px; cursor: pointer; padding: 0; }
.burger i { display: block; height: 2px; background: var(--ink); margin: 6px 10px; transition: .25s; }
.burger[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 1040px) {
  .burger { display: block; }
  .nav { position: fixed; top: 74px; left: 0; right: 0; height: calc(100vh - 74px); background: var(--bg); flex-direction: column; align-items: flex-start; gap: 0; padding: 20px var(--pad) 44px; transform: translateX(100%); transition: transform .35s; overflow: auto; box-sizing: border-box; }
  .nav.open { transform: none; }
  .nav a { font: 400 2rem var(--serif); padding: 14px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 24px; font: 600 1rem var(--sans); width: auto; border: 1.5px solid var(--ink); }
  .header .join-desktop { display: none; }
}

/* ---- 이미지 자리(placeholder): 색 면 + 얇은 선 패턴 ---- */
.ph { position: relative; overflow: hidden; background: var(--c1); aspect-ratio: 4/3; }
.ph::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.09) 22px 23px); }
.ph::after { content: attr(data-l); position: absolute; left: 14px; bottom: 12px; font: 600 .68rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.t1 { --c1: #274c77; } .t2 { --c1: #3b6b5e; } .t3 { --c1: #b7583a; }
.t4 { --c1: #6b5b7b; } .t5 { --c1: #c69a3b; } .t6 { --c1: #33404d; }
.ar-tall { aspect-ratio: 3/4; } .ar-wide { aspect-ratio: 16/10; } .ar-sq { aspect-ratio: 1; } .ar-medium { aspect-ratio: 4/3; }
.avatar { width: 64px; height: 64px; border-radius: 50%; aspect-ratio: 1; flex: none; }
.avatar::after { display: none; } .avatar::before { display: none; }

/* ---- 스크롤 등장 (아주 절제된 움직임) ---- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .marquee-track { animation: none !important; } html { scroll-behavior: auto; } }

/* ---- HERO ---- */
.hero { padding: clamp(50px, 8vw, 110px) 0 clamp(40px, 6vw, 80px); }
.hero h1 { font-size: clamp(3.4rem, 12.5vw, 11.5rem); line-height: .9; letter-spacing: -0.045em; margin: 28px 0 40px; }
.hero h1 em { font-style: italic; color: var(--lake); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* ---- Marquee (흐르는 글자 띠) ---- */
.marquee { overflow: hidden; border-block: 1px solid var(--ink); background: var(--ink); color: var(--bg); padding: 18px 0; }
.marquee-track { display: flex; width: max-content; animation: slide 32s linear infinite; }
.marquee span { font: italic 400 clamp(1.4rem, 3vw, 2.4rem) var(--serif); padding: 0 28px; white-space: nowrap; }
.marquee span::after { content: "✦"; margin-left: 56px; color: var(--ember); font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---- 4개 축: v4에서 .feature-grid/.feature-card 로 대체 (하단 참고) ---- */

/* ---- 카드 / 그리드 ---- */
.grid { display: grid; gap: 28px; }
.g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.card { display: block; }
.card .ph { transition: transform .5s; }
.card:hover .ph { transform: scale(1.02); }
.card h3 { font-size: 1.7rem; margin: 16px 0 8px; }
.card .meta { font-size: .88rem; color: var(--muted); letter-spacing: .04em; }
.card p { color: var(--muted); }
.box { background: var(--paper); border: 1px solid var(--line); padding: 30px; border-radius: 20px; }
.tag { display: inline-block; font: 600 .74rem var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--ink); border-radius: 999px; }
.tag.fill { background: var(--lake); border-color: var(--lake); color: #fff; }
.tag.warm { background: var(--ember); border-color: var(--ember); color: #fff; }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }

/* ---- 어두운 섹션 ---- */
.dark { background: var(--ink); color: var(--bg); }
.dark .label { color: #a9d4e0; } .dark .muted, .dark .card p { color: #c7bcc0; }
.dark .box { background: #4a3750; border-color: #5c4664; }

/* ---- 페이지 상단 제목 ---- */
.page-head { padding: clamp(56px, 8vw, 110px) 0 clamp(30px, 4vw, 50px); }
.page-head h1 { font-size: clamp(3rem, 9vw, 8rem); line-height: .95; letter-spacing: -0.04em; margin: 20px 0 24px; }

/* ---- FORUM (연도별 아카이브) ---- */
.year-row { display: grid; grid-template-columns: 160px 1fr; gap: 30px; padding: 44px 0; border-top: 1px solid var(--ink); }
.year { font: italic 400 clamp(3rem, 6vw, 5rem) var(--serif); color: var(--lake); line-height: 1; }
.forum-item { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; }
.forum-item h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); margin: 14px 0 18px; text-transform: none; }
@media (max-width: 860px) { .year-row, .forum-item { grid-template-columns: 1fr; } }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.person { display: flex; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.person b { display: block; font: 600 1.05rem var(--sans); } .person small { color: var(--muted); font-size: .9rem; }

/* ---- CIRCLE: 번호 목록은 v4에서 .timeline/.tl-step 로 대체 ---- */
.session { display: grid; grid-template-columns: 150px 1fr auto; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); align-items: center; }
.session:hover h3 { color: var(--lake); }
.session h3 { font-size: 1.8rem; }
@media (max-width: 760px) { .session { grid-template-columns: 1fr; gap: 8px; } }

/* ---- STORIES (Pinterest형 masonry) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.chip { font: 500 .95rem var(--sans); padding: 10px 18px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; cursor: pointer; }
.chip.on, .chip:hover { background: var(--ink); color: var(--bg); }
.masonry { columns: 3 300px; column-gap: 28px; }
.masonry .card { break-inside: avoid; margin-bottom: 40px; }
.masonry .card h3 { font-size: 1.9rem; }
.story-feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; margin-bottom: 70px; }
.story-feature h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); margin: 14px 0 18px; }
@media (max-width: 860px) { .story-feature { grid-template-columns: 1fr; } }

/* 글 읽기 화면 */
.article { max-width: 720px; margin: 0 auto; padding: 0 var(--pad); }
.article-head { text-align: center; padding: clamp(50px, 8vw, 100px) 0 40px; max-width: 980px; margin: 0 auto; padding-inline: var(--pad); }
.article-head h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); margin: 22px 0 26px; }
.article-body p { font-size: 1.22rem; line-height: 1.8; margin-bottom: 1.4em; }
.article-body p:first-child::first-letter { font: 400 5.2rem/.8 var(--serif); float: left; padding: 8px 12px 0 0; color: var(--lake); }
.pull { font: italic 400 clamp(1.7rem, 3.4vw, 2.4rem)/1.25 var(--serif); border-left: 4px solid var(--ember); padding-left: 24px; margin: 50px 0; }
.related { border-top: 1px solid var(--ink); margin-top: 60px; padding-top: 30px; display: grid; gap: 12px; }
.related a { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
.related a:hover { color: var(--ember); }
.back { display: inline-block; margin-bottom: 10px; font-size: .95rem; border-bottom: 1px solid currentColor; }

/* ---- FOUNDERS ---- */
.founder-card .ph { aspect-ratio: 4/5; }
.founder-card h3 { font-size: 1.6rem; margin: 14px 0 2px; }
.profile { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(30px, 6vw, 90px); }
.profile .ph { aspect-ratio: 4/5; position: sticky; top: 100px; }
@media (max-width: 860px) { .profile { grid-template-columns: 1fr; } .profile .ph { position: static; } }
dl.facts { display: grid; grid-template-columns: 140px 1fr; gap: 12px 20px; margin: 30px 0; }
dl.facts dt { color: var(--muted); font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; padding-top: 4px; }
dl.facts dd { margin: 0; }

/* ---- ASK THE NETWORK (서비스형 UI) ---- */
.net-tabs { display: flex; gap: 6px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--line); padding: 6px; border-radius: 999px; width: fit-content; max-width: 100%; margin: 28px 0 44px; }
.net-tabs button { border: 0; background: transparent; padding: 12px 22px; border-radius: 999px; font: 600 .98rem var(--sans); cursor: pointer; color: var(--ink); }
.net-tabs button.on { background: var(--ink); color: #fff; }
.req { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 28px; margin-bottom: 18px; }
.req h3 { font-size: 1.7rem; margin: 12px 0 8px; }
.req .row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.req .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.req .more { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .98rem; }
.req.show .more { display: block; }
.pill { display: inline-block; font: 700 .72rem var(--sans); letter-spacing: .1em; padding: 6px 12px; border-radius: 999px; text-transform: uppercase; }
.pill.open { background: #dcf0e1; color: #2e6a47; } .pill.pending { background: #fbeacb; color: #8a5a12; } .pill.connected { background: var(--lake-soft); color: var(--lake); }
.notice { background: var(--lake-soft); color: var(--lake); padding: 16px 22px; border-radius: 12px; font-size: .98rem; margin-bottom: 26px; }
form.ask { display: grid; gap: 18px; background: var(--paper); border: 1px solid var(--ink); padding: 30px; border-radius: 18px; margin-bottom: 36px; }
form.ask label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
form.ask input, form.ask select, form.ask textarea { font: 400 1.05rem var(--sans); padding: 13px 14px; border: 1px solid var(--muted); border-radius: 10px; background: #fff; color: var(--ink); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 640px) { .two { grid-template-columns: 1fr; } }
.demo-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 14px 24px; border-radius: 999px; z-index: 99; font-size: .98rem; }

/* ---- 푸터 ---- */
.footer { background: var(--ink); color: #cfcabf; padding: 80px 0 40px; }
.footer .big { color: var(--bg); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-top: 50px; padding-top: 40px; border-top: 1px solid #333b43; }
.footer a { display: block; padding: 4px 0; } .footer a:hover { color: #fff; }
.footer small { display: block; margin-top: 50px; color: #a8999e; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.stat b { display: block; font: 400 clamp(2.8rem, 5vw, 4.2rem) var(--serif); color: var(--lake); line-height: 1; }

/* ---- 로그인 링크 / 관리자 ---- */
#acct { font-size: .9rem; color: var(--muted); }
.adm-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 36px; }
.adm-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.adm-row small { color: var(--muted); }
button.adm-row { background: none; font: inherit; color: inherit; }
button.adm-row:hover { background: var(--paper); }
.adm-row select, .adm-row input[type="text"], .adm-row input:not([type]) { font: 400 .95rem var(--sans); padding: 8px 10px; border: 1px solid var(--muted); border-radius: 6px; background: #fff; color: var(--ink); }
.adm-table { border-collapse: collapse; width: 100%; font-size: .92rem; white-space: nowrap; }
.adm-table th, .adm-table td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.adm-table th { background: var(--paper); font-weight: 700; }
.adm-table tr:nth-child(even) td { background: rgba(0,0,0,.02); }
.adm-form { display: grid; gap: 14px; background: var(--paper); border: 1px solid var(--ink); padding: 26px; border-radius: 16px; margin-bottom: 30px; }
.adm-form label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; }
.adm-form input, .adm-form select, .adm-form textarea { font: 400 1rem var(--sans); padding: 11px 12px; border: 1px solid var(--muted); border-radius: 8px; background: #fff; color: var(--ink); }
.adm-form input[type=checkbox] { width: 22px; height: 22px; }
.adm-form select[multiple] { min-height: 130px; }
.adm-form small { font-weight: 400; color: var(--muted); }

/* ===== v3 Warm & welcoming — 활력 있고 포용력 있는 톤 ===== */
:root {
  --bg: #fbf3e7; --paper: #fffbf3; --ink: #2a2420; --muted: #6e6459; --line: #ecdfc8;
  --lake: #1f7a99; --lake-soft: #dcedf3; --ember: #d9482e;   /* 산뜻한 코랄 */
  --leaf: #4c9a6a; --sun: #e8ac3e; --berry: #b34c86;         /* 다채로운 포용 팔레트 */
  --pine: #3a2a3d;
  --serif: "Newsreader", "Noto Serif KR", Georgia, serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
}
body { font-size: 18.5px; line-height: 1.8; letter-spacing: -.005em; word-break: keep-all; overflow-wrap: break-word; font-weight: 400; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.12; letter-spacing: -.015em; }
.hero h1 { line-height: 1; letter-spacing: -.03em; font-size: clamp(3rem, 9.5vw, 8.5rem); }
.hero h1 em { color: var(--lake); font-weight: 400; }
.lede { line-height: 1.7; max-width: 34em; color: #2d363e; }
.muted { color: var(--muted); }
.label { font-weight: 600; letter-spacing: .12em; color: var(--pine); display: inline-flex; align-items: center; gap: 12px; }
.label::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.section { padding: clamp(80px, 11vw, 160px) 0; }
.header { background: rgba(251,243,231,.94); border-bottom: none; }
.logo { font-family: var(--serif); font-weight: 500; letter-spacing: .14em; }
.nav a { font-weight: 500; }
.btn { font-weight: 600; }
.sample-bar { background: var(--pine); }
.marquee { background: var(--pine); border-color: var(--pine); }
.marquee span { font-weight: 400; }
.marquee span::after { content: "●"; color: var(--sun); font-size: .5em; vertical-align: middle; }
.dark { background: var(--pine) !important; }
.ph::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Ccircle%20cx%3D%22290%22%20cy%3D%2295%22%20r%3D%2226%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.28%22/%3E%3Crect%20y%3D%22190%22%20width%3D%22400%22%20height%3D%22110%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.13%22/%3E%3Cpath%20d%3D%22M0%20190%20L60%20150%20L100%20185%20L170%20140%20L240%20188%20L320%20152%20L400%20190Z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.22%22/%3E%3Cg%20fill%3D%22%23000%22%20fill-opacity%3D%22.38%22%3E%3Cpath%20d%3D%22M30%20300%20L48%20210%20L66%20300Z%22/%3E%3Cpath%20d%3D%22M70%20300%20L92%20190%20L114%20300Z%22/%3E%3Cpath%20d%3D%22M300%20300%20L322%20200%20L344%20300Z%22/%3E%3Cpath%20d%3D%22M340%20300%20L356%20225%20L372%20300Z%22/%3E%3C/g%3E%3C/svg%3E") center bottom/cover no-repeat; }
.ph.t2::before, .ph.t4::before, .ph.t6::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMax%20slice%22%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%2280%22%20r%3D%2234%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.25%22/%3E%3Crect%20y%3D%22170%22%20width%3D%22400%22%20height%3D%22130%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.16%22/%3E%3Cpath%20d%3D%22M0%20172%20Q90%20140%20170%20172%20Q250%20150%20400%20172%20L400%20176%20L0%20176Z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22/%3E%3Cpath%20d%3D%22M40%20215%20Q120%20190%20220%20215Z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.28%22/%3E%3Cpath%20d%3D%22M230%20250%20Q320%20220%20400%20250Z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.34%22/%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.3%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M60%20235h120M260%20268h110M20%20262h70%22/%3E%3C/g%3E%3C/svg%3E"); }
.ph::after { font-weight: 500; letter-spacing: .1em; }
.ph { border-radius: clamp(16px, 2.2vw, 32px); }
.t1 { --c1: var(--lake); } .t2 { --c1: var(--leaf); } .t3 { --c1: var(--ember); }
.t4 { --c1: var(--berry); } .t5 { --c1: var(--sun); } .t6 { --c1: #4a4038; }
/* 헤더: 한 줄 유지 */
.header .wrap { gap: 16px; }
.logo { white-space: nowrap; font-size: .95rem; }
.nav { gap: clamp(14px, 1.8vw, 26px); white-space: nowrap; }
.nav a { font-size: .9rem; line-height: 1.2; white-space: nowrap; }
.header .btn.small { padding: 8px 16px; font-size: .85rem; white-space: nowrap; }
@media (min-width: 1041px) { .join-mobile { display: none !important; } }
@media (max-width: 1040px) { .join-desktop { display: none !important; } .nav a { font-size: 1.1rem; padding: 12px 0; } }
.year { font-size: clamp(1.8rem, 3vw, 2.4rem); white-space: nowrap; }
.year-row { grid-template-columns: 110px 1fr; }
.year { font-size: clamp(2.6rem, 5vw, 4rem); white-space: nowrap; }
.year-row { grid-template-columns: 180px 1fr; }
/* 푸터: 세리프 헤드라인 + 섬세한 본문 */
.footer { background: var(--pine); color: #ded2d5; }
.footer .big { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; font-size: clamp(2.6rem, 6vw, 5rem); color: var(--bg); }
.footer .big em, .footer .big i { color: var(--sun); }
.footer-grid { border-top-color: rgba(255,255,255,.18); }
.footer-grid b, .footer-grid strong { font-family: var(--serif); font-weight: 700; letter-spacing: .14em; font-size: 1.25rem; }
.footer a { font-size: .95rem; color: #ded2d5; } .footer a:hover { color: #fff; }
.head-row .big { white-space: nowrap; }
.lede { text-wrap: balance; max-width: 30em; }
/* 폼 칸 맞춤 */
form.ask, form.ask label, .two > * { min-width: 0; }
form.ask input:not([type=checkbox]), form.ask select, form.ask textarea { width: 100%; min-width: 0; }
form.ask input[type=checkbox] { width: 20px; height: 20px; padding: 0; flex: none; accent-color: var(--ember); }
form.ask label:has(input[type=checkbox]) { font-weight: 400; }
/* 페이지 큰 제목 통일: 모든 페이지 동일한 크기·자간 */
.page-head h1 { font-size: clamp(2.8rem, 7vw, 6rem); line-height: 1.04; letter-spacing: -.02em; word-spacing: .04em; }
.hero h1 { letter-spacing: -.02em; line-height: 1.02; }

/* =====================================================================
   v4 — Friendly & Round : 세리프 매거진 톤을 벗고, 둥근 단일 산세리프 +
   컬러풀한 카드 기반의 밝고 친근한 커뮤니티 서비스 톤으로 전면 재설계.
   ===================================================================== */
:root {
  --serif: var(--sans);   /* 세리프 완전 폐기, 헤드라인도 Pretendard 하나로 */
  --shadow-sm: 0 2px 12px rgba(42, 36, 32, .07);
  --shadow-md: 0 12px 32px rgba(42, 36, 32, .12);
  --shadow-lg: 0 20px 50px rgba(42, 36, 32, .16);
}

/* ---- 타이포: 굵은 라운드 산세리프 하나로 통일, 이탤릭·드롭캡 등 매거진 장치 제거 ---- */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.015em; }
.hero h1 { font-weight: 800; font-size: clamp(2.6rem, 6.5vw, 5.4rem); letter-spacing: -.02em; }
.hero h1 em { font-style: normal; font-weight: 800; }
.page-head h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); }
.big { font-size: clamp(1.9rem, 4.5vw, 3.4rem); font-weight: 800; }
.label { font-weight: 700; }
.label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.year, .pull, .marquee span { font-style: normal; }
.year { font-weight: 800; }
.pull { font-weight: 700; }
.marquee span { font-weight: 700; }
.footer .big em, .footer .big i { font-style: normal; font-weight: 800; }
.article-body p:first-child::first-letter { all: unset; }

/* ---- 형태: 이미지 자리 완전 라운드 + 플랫, 카드류 그림자 기반 엘리베이션 ---- */
.ph { border-radius: clamp(20px, 3vw, 40px); box-shadow: var(--shadow-sm); }
.ph::before { display: none; }
.box, .req, form.ask, .adm-form, .net-tabs { border: none; box-shadow: var(--shadow-sm); }
.box { border-radius: 24px; }
.req { border-radius: 22px; }
form.ask, .adm-form { border-radius: 26px; box-shadow: var(--shadow-md); }
.card:hover .ph, .founder-card:hover .ph { box-shadow: var(--shadow-md); }
.btn { box-shadow: var(--shadow-sm); }
.btn.solid { box-shadow: var(--shadow-md); }
.btn:hover { box-shadow: var(--shadow-lg); }
.year-row { border-top-color: var(--line); }

/* ---- 로고: 슬래시 자리를 컬러 라운드 점으로 ---- */
/* 로고: v5에서 .logo-mark/.logo-word/.logo-slash 로 재설계 (하단 참고) */

/* ---- 칩 / 탭 강조색을 브랜드 블루로 ---- */
.chip.on, .chip:hover { background: var(--lake); border-color: var(--lake); color: #fff; }
.net-tabs button.on { background: var(--lake); color: #fff; }

/* ---- "네 가지 참여 방법" : 목록 → 컬러 카드 그리드 ---- */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature-card { display: flex; flex-direction: column; gap: 14px; min-height: 220px; padding: 32px 28px; border-radius: 28px; color: #fff; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; }
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.feature-card .n { font-weight: 800; font-size: .82rem; letter-spacing: .12em; opacity: .85; }
.feature-card h3 { font-size: 1.6rem; }
.feature-card p { margin: 0; opacity: .92; }
.feature-card .arrow { margin-top: auto; font-size: 1.5rem; }
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---- 단계 안내 : 번호 목록 → 둥근 뱃지 타임라인 카드 ---- */
.timeline { display: grid; gap: 16px; }
.tl-step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: flex-start; background: var(--paper); border-radius: 22px; padding: 22px 26px; box-shadow: var(--shadow-sm); }
.tl-n { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; background: var(--sun); color: var(--pine); flex: none; }
.tl-step:nth-child(4n+2) .tl-n { background: var(--leaf); color: #fff; }
.tl-step:nth-child(4n+3) .tl-n { background: var(--lake); color: #fff; }
.tl-step:nth-child(4n+4) .tl-n { background: var(--berry); color: #fff; }
.tl-step h4 { font-size: 1.3rem; margin-bottom: 4px; }
.dark .tl-step { background: #4a3750; }

/* ---- 풋터: 위쪽 모서리를 둥글게 잘라 선반처럼 ---- */
.footer { border-radius: 44px 44px 0 0; margin-top: 24px; }

/* =====================================================================
   v5 — Editorial Premium (vowood.com 참고) : 실사 사진 + 가는 세리프
   헤드라인 + 절제된 단일 포인트 컬러로 전면 재설계. v4의 "둥근·다채색
   커뮤니티" 톤은 폐기하고, 사진의 무게감으로 고급스러움을 내는
   에디토리얼 스타일로 전환.
   ===================================================================== */
:root {
  --accent: #7a2b34;       /* 버건디 — 유일한 포인트 컬러 */
  --accent-soft: #c98a91;  /* 어두운 배경 위에서 쓰는 옅은 버건디 톤 */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ember: var(--accent);  /* 기존 --ember 참조부(버튼·태그·포커스링·체크박스 등)를 전부 단일 포인트로 */
  --pine: var(--ink);      /* 다크 섹션을 플럼톤 대신 중성 잉크톤으로 */
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
}

/* ---- 타이포: 큰 헤드라인만 가는 세리프(+이탤릭), 나머지는 전부 Pretendard ---- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; line-height: 1.08; }
.hero h1 { font-weight: 500; font-size: clamp(2.8rem, 6.5vw, 5.6rem); letter-spacing: -.01em; line-height: 1.05; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--accent); }
.page-head h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 700; white-space: normal; text-transform: uppercase; letter-spacing: .01em; }
.page-head .lede { max-width: 40em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.big { font-family: var(--serif); font-size: clamp(2rem, 4.5vw, 3.6rem); font-weight: 500; }
.label { font-weight: 600; color: var(--muted); }
.year, .pull, .marquee span { font-style: italic; }
.year { font-weight: 500; color: var(--accent); }
.pull { font-weight: 400; border-left-color: var(--accent); }
.footer .big { font-family: var(--serif); }
.footer .big em, .footer .big i { font-style: italic; font-weight: 500; color: var(--accent-soft); }
.article-body p:first-child::first-letter { font: 400 5rem/.75 var(--serif); float: left; padding: 6px 10px 0 0; color: var(--accent); }
/* 한글 호환 원칙: 인터랙션/UI 요소는 항상 산세리프 — 추후 한글 페이지에서도 그대로 재사용 가능하도록 */
.btn, .nav a, .tag, .chip, .label, .net-tabs button, form.ask label, .adm-form label { font-family: var(--sans); }

/* ---- 형태: 큰 라운드·그림자 롤백 → 사진 자체의 무게감을 살리는 절제된 각 ---- */
.ph { border-radius: 3px; box-shadow: none; background-size: cover; background-position: center; }
.box, .req, .net-tabs { border: 1px solid var(--line); box-shadow: none; border-radius: 4px; }
form.ask, .adm-form { border: 1px solid var(--ink); box-shadow: none; border-radius: 6px; }
.card:hover .ph, .founder-card:hover .ph { box-shadow: none; }
.btn { border-radius: 4px; box-shadow: none; }
.btn.solid { box-shadow: none; }
.btn:hover { box-shadow: none; transform: none; }
.footer { border-radius: 0; margin-top: 0; padding-top: 56px; }
.footer-grid { margin-top: 0; }

/* ---- 사진 시스템: .ph 색 블록 → 실사 사진(회의·브레인스토밍·아이디어) ----
   무료 스톡(Unsplash) 사진을 외부 URL로 핫링크 — 다운로드 없이 참조만 함.
   기존 --c1 단색은 이미지가 늦게 뜰 때/실패했을 때의 대체 배경으로 그대로 둠. */
.t1 { background-image: url("https://images.unsplash.com/photo-1622675363311-3e1904dc1885?auto=format&fit=crop&w=1400&q=68"); }
.t2 { background-image: url("https://images.unsplash.com/photo-1557804506-669a67965ba0?auto=format&fit=crop&w=1400&q=68"); }
.t3 { background-image: url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1400&q=68"); }
.t4 { background-image: url("https://images.unsplash.com/photo-1573496546038-82f9c39f6365?auto=format&fit=crop&w=1400&q=68"); }
.t5 { background-image: url("https://images.unsplash.com/photo-1576085898323-218337e3e43c?auto=format&fit=crop&w=1400&q=68"); }
.t6 { background-image: url("https://images.unsplash.com/photo-1559163499-413811fb2344?auto=format&fit=crop&w=1400&q=68"); }
.ph::before { display: block; content: ""; position: absolute; inset: auto 0 0 0; height: 48%; background: linear-gradient(to top, rgba(20,16,14,.6), transparent); pointer-events: none; }
.ph::after { color: rgba(255,255,255,.9); }
.avatar::before { display: none; }

/* ---- 히어로: 실사 사진을 꽉 채우고 상단은 프로스티드 글라스 패널로 헤드라인을 얹음 ---- */
.hero { padding: 0; }
.hero-photo { position: relative; aspect-ratio: auto; min-height: clamp(520px, 86vh, 880px); border-radius: 0; background-image: url("https://images.unsplash.com/photo-1734184489468-59b6fd3d1a89?auto=format&fit=crop&w=1800&q=68"); }
.hero-photo::before, .hero-photo::after { display: none; }
.hero-frost { position: absolute; inset: 0 0 auto 0; padding: clamp(40px, 6vw, 72px) 0 clamp(70px, 9vw, 120px); background: linear-gradient(to bottom, rgba(251,243,231,.92) 0%, rgba(251,243,231,.74) 60%, rgba(251,243,231,0) 100%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-frost h1 { margin: 22px 0 0; }
.hero-foot { position: absolute; inset: auto 0 0 0; padding: clamp(30px, 5vw, 60px) 0 clamp(36px, 5vw, 56px); background: linear-gradient(to top, rgba(20,16,14,.68) 0%, rgba(20,16,14,.2) 75%, transparent 100%); }
.hero-foot .lede { color: #fff; max-width: 42ch; }
.hero-foot .hero-cta { margin-top: 22px; }
@media (max-width: 600px) { .hero-photo { min-height: 0; } .hero-frost, .hero-foot { position: static; inset: auto; } .hero-foot { background: var(--bg); } .hero-foot .lede { color: inherit; } .hero-foot .btn.light { border-color: var(--ink); color: var(--ink); } }

/* ---- 가운데 흐르는 띠: 위치 유지, 색·글씨체만 새 팔레트에 맞게 재조화 ---- */
.marquee { background: var(--ink); border-color: var(--ink); padding: 16px 0; }
.marquee span { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 2.6vw, 1.9rem); color: var(--bg); }
.marquee span::after { content: "·"; color: var(--accent-soft); font-style: normal; margin-left: 40px; }

/* ---- 색: 남아있던 --lake 참조를 단일 포인트/중성 톤으로 개별 정리 ---- */
.session:hover h3 { color: var(--accent); }
.stat b { font-family: var(--serif); font-weight: 500; color: var(--accent-soft); }
.notice { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.pill.connected { background: #f0dde0; color: var(--accent); }
.dark .label { color: #d8cdbf; } .dark .muted, .dark .card p { color: #b9ac9d; }
.dark .box { background: #2c2620; border-color: #46403a; }

/* ---- "네 가지 참여 방법": 컬러 플랫 카드 → 사진 배경 + 세리프 타이틀 ---- */
.feature-grid { gap: 2px; }
.feature-card { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: 28px 26px; border-radius: 3px; box-shadow: none; background-size: cover; background-position: center; transition: none; }
.feature-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,14,.8) 0%, rgba(20,16,14,.25) 55%, rgba(20,16,14,.05) 100%); transition: background .3s; }
.feature-card:hover { transform: none; box-shadow: none; }
.feature-card:hover::before { background: linear-gradient(to top, rgba(20,16,14,.88) 0%, rgba(20,16,14,.35) 55%, rgba(20,16,14,.08) 100%); }
.feature-card > * { position: relative; z-index: 1; }
.feature-card-text { display: block; }
.feature-card .n { font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .14em; opacity: .85; }
.feature-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.8rem; margin: 10px 0 6px; }
.feature-card p { margin: 0; opacity: .92; font-size: .96rem; }
.feature-card .arrow { margin-top: 16px; color: var(--accent-soft); font-size: 1.3rem; }
.feature-card.c1 { background-image: url("https://images.unsplash.com/photo-1587825140708-dfaf72ae4b04?auto=format&fit=crop&w=900&q=68"); background-position: center 40%; }
.feature-card.c2 { background-image: url("https://images.unsplash.com/photo-1747214300344-2256d23d29ee?auto=format&fit=crop&w=900&q=68"); background-position: 72% 42%; }
.feature-card.c3 { background-image: url("https://images.unsplash.com/photo-1650735311842-699bd178babd?auto=format&fit=crop&w=900&q=68"); background-position: 56% center; }
.feature-card.c4 { background-image: url("https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=900&q=68"); background-position: center 48%; }

/* ---- 단계 안내: 색이 순환하는 원형 뱃지 → 가는 세리프 숫자 + 단일 포인트 테두리 ---- */
.tl-step { background: transparent; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--line); padding: 22px 4px; }
.tl-n, .tl-step:nth-child(4n+2) .tl-n, .tl-step:nth-child(4n+3) .tl-n, .tl-step:nth-child(4n+4) .tl-n { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); font-family: var(--serif); font-weight: 500; font-size: 1.2rem; width: 48px; height: 48px; }
.dark .tl-step { background: transparent; border-bottom-color: rgba(255,255,255,.16); }
.dark .tl-n, .dark .tl-step:nth-child(4n+2) .tl-n, .dark .tl-step:nth-child(4n+3) .tl-n, .dark .tl-step:nth-child(4n+4) .tl-n { border-color: var(--accent-soft); color: var(--accent-soft); }
.tl-step h4 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; }

/* ---- HAPPENING NOW: 제목·부제를 한 줄 space-between 대신 두 줄로 쌓기 ---- */
.head-row.stack { flex-direction: column; align-items: flex-start; gap: 10px; }
.head-row.stack .big { font-size: clamp(2.17rem, 4.5vw, 3.77rem); }
.happening-now { padding-top: calc(clamp(80px, 11vw, 160px) / 3); }

/* ---- v4에서 var(--lake)로 지정됐던 칩/탭 강조색을 단일 포인트로 재정리 ---- */
.chip.on, .chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.net-tabs button.on { background: var(--accent); color: #fff; }

/* ---- 헤더 글씨 3pt(≈4px) 확대(데스크톱 내비만 — 모바일 전체화면 메뉴는 기존 2rem 유지) + 로고를 모나그램 마크 + 워드마크 조합으로 재설계 ---- */
@media (min-width: 1041px) {
  .nav a { font-size: .98rem; }
  .header .btn.small { font-size: .93rem; }
}
@media (min-width: 1041px) and (max-width: 1260px) {
  .header .wrap { gap: 10px; }
  .nav { gap: clamp(8px, 1vw, 16px); }
  .nav a { font-size: 1.02rem; }
  .logo { font-size: 1.1rem; gap: 8px; }
  .logo .logo-mark { font-size: 1.05rem; }
  .header .btn.small { padding: 8px 12px; font-size: .92rem; }
}
.logo { display: inline-flex; align-items: center; gap: 6px; font-size: 1.3rem; }
.logo .logo-mark { color: var(--ink); font-family: var(--sans); font-style: normal; font-weight: 800; font-size: 1.3rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.logo .logo-word { font-family: var(--serif); font-weight: 600; letter-spacing: .1em; }
.logo .logo-slash { color: var(--accent); font-style: italic; font-weight: 400; margin: 0 .12em; }