@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@500;600&display=swap');
/* WE LOVE PROCESS — 공통 디자인 (홈 · 자료실 · 찾기 · 스튜디오)
 * 2026-10-08 새 결: 따뜻한 흰 바탕 · 먹색 · 짙은 피치 초록 · 형광 연두는 칠하는 데에만(글자색으로 쓰지 않음 — 밝은 바탕에서 읽히지 않는다).
 * 작은 꼬리표는 Geist Mono 대문자. 카테고리 색(--c0~c7)은 자료 구분에만 쓴다. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F5F5F0; --surface:#fff; --ink:#111210; --soft:#3B3D38; --dim:#5E605A; --faint:#A9ABA4;
  --line:rgba(17,18,16,.10); --hair:rgba(17,18,16,.07); --fill:rgba(17,18,16,.04);
  --accent:#0F3D2E; --accent-soft:#E4EEE8; --volt:#D4F75A; --deep:#0F3D2E; --sand:#ECECE5;
  --team:#0F3D2E; --coach:#8A5A2B; --player:#2E5A96;
  --c0:#1F5F6B; --c1:#7A5A2E; --c2:#3F6B34; --c3:#B0612A; --c4:#5B4B8A; --c5:#A13E3E; --c6:#2F558E; --c7:#6E6C64;
  --sans:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --wide:1160px; --narrow:760px; --r:20px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;
  letter-spacing:-.012em;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.wm b{font-weight:700}.wm i{font-weight:200;font-style:normal}
.wrap{width:min(var(--wide),calc(100% - 56px));margin-inline:auto}
.narrow{width:min(var(--narrow),calc(100% - 56px));margin-inline:auto}
.kick{font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
h1,h2,h3{letter-spacing:-.045em;line-height:1.2;font-weight:800}
.skip{position:fixed;left:14px;top:-100px;z-index:300;background:var(--ink);color:#fff;padding:11px 15px;font-size:13px;font-weight:600;border-radius:6px}
.skip:focus{top:14px}
.muted{color:var(--dim)}
.tnum{font-variant-numeric:tabular-nums}

/* ── 머리 · 발 — /assets/shell.css 가 맡는다(옛 화면과 같이 쓰려고 따로 뺐다) ── */

/* ── 버튼 · 칩 ─────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 22px;border-radius:999px;
  font-size:14px;font-weight:600;border:1px solid transparent;transition:transform .18s,border-color .18s,opacity .18s;white-space:nowrap}
.btn.solid{background:var(--ink);color:#fff}.btn.solid:hover{transform:translateY(-1px)}
.btn.line{border-color:var(--line);color:var(--ink);background:var(--surface)}.btn.line:hover{border-color:var(--ink)}
.btn.volt{background:var(--volt);color:var(--ink);font-weight:700}.btn.volt:hover{transform:translateY(-1px)}
.btn.small{min-height:36px;padding:7px 15px;font-size:13px}
.btn[disabled]{opacity:.45;pointer-events:none}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.more{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--accent);white-space:nowrap}
.more::after{content:"→";transition:transform .18s}.more:hover::after{transform:translateX(3px)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);font-size:13.5px;font-weight:500;color:var(--soft);transition:.15s;white-space:nowrap}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip small{font-size:11.5px;color:var(--faint);font-weight:500}
.chip[aria-pressed=true] small{color:rgba(255,255,255,.62)}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px;margin:-2px}
.chips.scroll::-webkit-scrollbar{display:none}
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.02em;border-radius:999px;padding:2px 9px;
  background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.badge.gray{background:var(--fill);color:var(--dim)}

/* ── 구획 ──────────────────────────── */
.sec{padding:84px 0;border-top:1px solid var(--hair)}
.sec.white{background:var(--surface)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sec-head h2{margin-top:14px;font-size:clamp(25px,3.4vw,36px)}
.sec-head p{margin-top:12px;max-width:52ch;color:var(--soft)}
@media(max-width:560px){.wrap,.narrow{width:calc(100% - 36px)}.sec{padding:60px 0}}

/* 큰 검색창 */
.search{position:relative;display:flex;align-items:center;max-width:620px}
.search svg{position:absolute;left:18px;width:19px;height:19px;color:var(--dim);pointer-events:none}
.search input{width:100%;min-height:54px;padding:12px 18px 12px 48px;border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:16px;box-shadow:0 6px 24px rgba(0,0,0,.05);transition:border-color .15s}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.search input::placeholder{color:var(--faint)}

/* ── 레터 ──────────────────────────── */
.lt{margin-top:40px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.lt-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 28px 22px;border-bottom:1px solid var(--hair)}
.lt-no{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--accent)}
.lt-top h3{margin-top:6px;font-size:clamp(21px,2.6vw,27px)}
.lt-top p{margin-top:6px;font-size:14.5px;color:var(--dim)}
.lt-pieces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.lt-piece{display:flex;flex-direction:column;gap:10px;padding:24px 28px 26px;border-right:1px solid var(--hair);transition:background .15s}
.lt-piece:last-child{border-right:0}
.lt-piece:hover{background:#FAFBFA}
.lt-pillar{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--pc,var(--accent))}
.lt-pillar small{font-weight:500;color:var(--faint);letter-spacing:.04em;margin-left:6px}
.lt-piece b{font-size:17px;line-height:1.42;letter-spacing:-.03em}
.lt-piece p{font-size:13.8px;line-height:1.66;color:var(--dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lt-piece .src{margin-top:auto;font-size:12px;color:var(--faint)}
.lt-piece.team{--pc:var(--team)}.lt-piece.player{--pc:var(--player)}.lt-piece.coach{--pc:var(--coach)}
@media(max-width:860px){.lt-pieces{grid-template-columns:1fr}.lt-piece{border-right:0;border-bottom:1px solid var(--hair)}.lt-piece:last-child{border-bottom:0}
  .lt-top,.lt-piece{padding-inline:20px}}
.lt-next{margin-top:14px;font-size:13px;color:var(--dim)}

/* 지난 호 목록 */
.lt-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
.lt-mini{display:flex;flex-direction:column;gap:8px;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .15s}
.lt-mini:hover{border-color:var(--accent)}
.lt-mini b{font-size:17px;letter-spacing:-.03em}
.lt-mini ul{list-style:none;display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--dim)}
.lt-mini li span{color:var(--faint);margin-right:6px}
@media(max-width:760px){.lt-list{grid-template-columns:1fr}}

/* ── 지식 허브 ─────────────────────── */
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:36px}
.cat{position:relative;display:flex;flex-direction:column;gap:6px;min-height:104px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);transition:border-color .15s,transform .15s;overflow:hidden}
.cat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cc)}
.cat:hover{border-color:var(--cc);transform:translateY(-2px)}
.cat b{font-size:15.5px;letter-spacing:-.03em}
.cat span{margin-top:auto;font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--cc)}
.cat span small{font-size:12px;font-weight:500;color:var(--faint);margin-left:3px}
@media(max-width:860px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.c0{--cc:var(--c0)}.c1{--cc:var(--c1)}.c2{--cc:var(--c2)}.c3{--cc:var(--c3)}.c4{--cc:var(--c4)}.c5{--cc:var(--c5)}.c6{--cc:var(--c6)}.c7{--cc:var(--c7)}

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:48px;margin-top:52px}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:36px}}
.sub-h{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--dim);margin-bottom:12px}
.start{display:flex;flex-direction:column;gap:10px}
.start a{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .15s}
.start a:hover{border-color:var(--accent)}
.start a > span{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:700;display:grid;place-items:center}
.start b{font-size:15px;line-height:1.45;font-weight:600}

/* 글 한 줄 */
.hlist{list-style:none;border-top:1px solid var(--line)}
.hrow{border-bottom:1px solid var(--line)}
.hrow a.h-main{display:grid;grid-template-columns:116px minmax(0,1fr);gap:18px;padding:16px 4px;align-items:baseline;transition:background .12s}
.hrow a.h-main:hover .h-t{color:var(--accent)}
.h-cat{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--cc);white-space:nowrap}
.h-cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cc);flex:0 0 auto}
.h-t{display:block;font-size:15.5px;font-weight:600;line-height:1.5;transition:color .15s}
.h-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:5px;font-size:12.5px;color:var(--dim)}
.h-meta > span + span::before{content:"·";margin-right:10px;color:var(--faint)}
.h-meta .badge{margin-left:2px}
@media(max-width:640px){.hrow a.h-main{grid-template-columns:1fr;gap:6px;padding:15px 2px}}

/* 노트 */
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:34px}
.note-c{display:flex;flex-direction:column;gap:10px;padding:24px 24px 22px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .15s}
.note-c:hover{border-color:var(--accent)}
.note-c .no{font-size:11.5px;letter-spacing:.14em;color:var(--faint)}
.note-c b{font-size:19px;letter-spacing:-.03em}
.note-c p{font-size:14px;color:var(--dim)}
.note-c small{margin-top:auto;font-size:12.5px;color:var(--faint)}
@media(max-width:760px){.notes{grid-template-columns:1fr}}

/* ── 찾기 ──────────────────────────── */
.kind-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kind{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:118px;padding:18px 10px;border-radius:18px;
  border:1px solid var(--line);background:var(--surface);transition:border-color .15s,transform .15s,background .15s;text-align:center}
.kind:hover{transform:translateY(-2px);border-color:var(--kc,var(--ink))}
.kind[aria-pressed=true]{border-color:var(--kc,var(--ink));background:color-mix(in srgb,var(--kc,var(--ink)) 7%,#fff);box-shadow:inset 0 0 0 1px var(--kc,var(--ink))}
.kind .ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--kc,var(--ink)) 11%,#fff);color:var(--kc,var(--ink))}
.kind .ic svg{width:26px;height:26px}
.kind b{font-size:15px;letter-spacing:-.02em}
.kind small{font-size:12px;color:var(--faint);margin-top:-6px}
.kind.k-all{--kc:var(--ink)}.kind.k-team{--kc:var(--team)}.kind.k-coach{--kc:var(--coach)}.kind.k-player{--kc:var(--player)}
@media(max-width:560px){.kind{min-height:96px;border-radius:15px;gap:7px}.kind .ic{width:40px;height:40px;border-radius:12px}.kind .ic svg{width:22px;height:22px}.kind b{font-size:13.5px}}

.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.fcard{display:flex;gap:14px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:border-color .15s,transform .15s,box-shadow .15s;min-width:0}
.fcard:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 12px 30px rgba(0,0,0,.06)}
.fc-face{flex:0 0 auto;width:68px;height:68px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:var(--fill)}
.fc-face img{width:100%;height:100%;object-fit:cover}
.fc-face b,.fd-face b{font-size:26px;font-weight:700;color:#fff}
.fc-face.k-team,.fd-face.k-team{background:var(--team)}.fc-face.k-coach,.fd-face.k-coach{background:var(--coach)}.fc-face.k-player,.fd-face.k-player{background:var(--player)}
.fc-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.fc-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fc-kind{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--kc)}
.fc-kind.k-team{--kc:var(--team)}.fc-kind.k-coach{--kc:var(--coach)}.fc-kind.k-player{--kc:var(--player)}
.fc-flag{font-style:normal;font-size:10.5px;font-weight:700;color:#0E7A4B;background:#E5F4EC;border-radius:999px;padding:1px 8px}
.fc-name{font-size:16px;letter-spacing:-.03em;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-line{font-size:13.3px;color:var(--soft);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px;font-size:11.5px;color:var(--dim)}
.fc-meta>span{margin-right:2px;font-weight:600}
/* 줄이 꺾여도 앞에 점이 매달리지 않게 — 구분점 대신 작은 꼬리표 */
.fc-meta i{font-style:normal;color:var(--dim);background:var(--fill,#F1F1EE);border-radius:5px;padding:1px 6px;line-height:1.5}

.fab{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:90;display:inline-flex;align-items:center;gap:8px;
  min-height:52px;padding:14px 22px 14px 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:700;box-shadow:0 14px 34px rgba(0,0,0,.22);transition:transform .18s}
.fab:hover{transform:translateY(-2px)}
.fab svg{width:20px;height:20px}

/* 찾기 «준비 중» — find-schema.js 의 FIND_OPEN 이 false 일 때 */
.soon{margin-top:8px;padding:44px 28px;border:1px dashed var(--line);border-radius:var(--r);background:var(--surface);text-align:center}
.soon h2{font-size:clamp(22px,3vw,28px);margin-top:10px}
.soon p:not(.kick){max-width:46ch;margin:12px auto 0;color:var(--soft);font-size:15px}
.soon .acts{justify-content:center;margin-top:22px}
.empty{padding:56px 20px;text-align:center;border:1px dashed var(--line);border-radius:16px;color:var(--dim)}
.empty b{display:block;font-size:17px;color:var(--ink);margin-bottom:6px}
.empty .acts{justify-content:center;margin-top:20px}

/* 소개 페이지 */
.fdetail{padding:44px 0 20px}
.fd-head{display:flex;gap:22px;align-items:center}
.fd-face{flex:0 0 auto;width:112px;height:112px;border-radius:24px;overflow:hidden;display:grid;place-items:center;background:var(--fill)}
.fd-face img{width:100%;height:100%;object-fit:cover}
.fd-face b{font-size:42px}
.fd-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--dim)}
.fd-title h1{margin-top:6px;font-size:clamp(26px,4vw,38px)}
.fd-line{margin-top:6px;font-size:16.5px;color:var(--soft)}
.fd-facts{margin-top:30px;border-top:1px solid var(--line)}
.fd-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.fd-row dt{color:var(--dim);font-size:13.5px;padding-top:1px}
.fd-row small{color:var(--faint)}
.fd-sec{margin-top:34px}
.fd-sec h2{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--dim);margin-bottom:12px}
.fd-about{font-size:16px;line-height:1.85;color:var(--soft)}
.fd-career{list-style:none;border-top:1px solid var(--line)}
.fd-career li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.fd-career li span{color:var(--dim);font-size:13.5px}
.fd-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.fd-note{margin-top:24px;padding:14px 16px;border-radius:12px;background:var(--fill);font-size:13.5px;color:var(--dim)}
@media(max-width:560px){.fd-head{flex-direction:column;align-items:flex-start;gap:16px}.fd-face{width:88px;height:88px;border-radius:20px}
  .fd-row,.fd-career li{grid-template-columns:92px minmax(0,1fr);gap:12px}}

/* ── 폼 ────────────────────────────── */
.ff{display:flex;flex-direction:column;gap:22px}
.fld{display:flex;flex-direction:column;gap:8px}
.fld > label,.fld > .lbl{font-size:14px;font-weight:600}
.fld > label small,.fld > .lbl small{font-weight:500;color:var(--faint);margin-left:6px}
.fld .hint{font-size:12.5px;color:var(--dim);margin-top:-2px}
.inp{width:100%;min-height:48px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:16px;transition:border-color .15s}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
textarea.inp{min-height:140px;line-height:1.7;resize:vertical}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.count{align-self:flex-end;font-size:11.5px;color:var(--faint);margin-top:-4px}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick button{min-height:40px;padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:500;color:var(--soft);transition:.15s}
.pick button:hover{border-color:var(--ink)}
.pick button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.check{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:14px;line-height:1.6;cursor:pointer}
.check input{flex:0 0 auto;width:20px;height:20px;margin-top:2px;accent-color:var(--accent)}
.check small{display:block;color:var(--dim);font-size:12.5px;margin-top:2px}
.lines{display:flex;flex-direction:column;gap:8px}
.lines .ln{display:grid;grid-template-columns:132px minmax(0,1fr) 40px;gap:8px}
.lines .ln button{border:1px solid var(--line);border-radius:10px;color:var(--dim);font-size:18px}
.lines .ln button:hover{border-color:var(--ink);color:var(--ink)}
@media(max-width:560px){.lines .ln{grid-template-columns:96px minmax(0,1fr) 40px}}
.addline{align-self:flex-start;font-size:13.5px;font-weight:600;color:var(--accent);padding:6px 2px}
.photo-pick{display:flex;align-items:center;gap:16px}
.photo-pick .pv{width:84px;height:84px;border-radius:18px;background:var(--fill);overflow:hidden;display:grid;place-items:center;color:var(--faint);font-size:12px;flex:0 0 auto}
.photo-pick .pv img{width:100%;height:100%;object-fit:cover}
.err{padding:14px 16px;border-radius:12px;background:#FBEDEC;color:#9B2E2A;font-size:14px}
.ok-box{padding:26px 24px;border-radius:16px;background:var(--accent-soft);border:1px solid rgba(31,95,107,.18)}
.ok-box h2{font-size:22px}
.ok-box p{margin-top:8px;color:var(--soft);font-size:15px}
.ok-box .copy{display:flex;gap:8px;margin-top:16px}
.ok-box .copy input{flex:1;min-width:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.rise{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rise.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rise{opacity:1;transform:none;transition:none}*{transition:none!important}}