/* ============================================================
   FLOOR — P0 1차 시안
   Design tokens & base
   모바일 웹 우선(Mobile First) → 768px → 1024px 확장
   ============================================================ */

:root{
  /* ---------- Brand ----------
     FLOOR 메인 컬러는 보라(hue 258, 채도 72%). 브랜드·CTA·선택·인증에만 쓴다.
     화면의 70~80% 는 white / off-white 로 두고, 텍스트는 검정·회색이다.
     면을 보라로 칠하고 싶어지면 대신 여백과 타이포로 해결할 것.
     채도를 다시 올리지 말 것 — 85%(#7038EF)로 갔다가 '너무 쨍하다'는 피드백을 받고 내렸다. */
  --purple:#7C50E2;          /* Primary  — CTA, 선택 상태 */
  --purple-deep:#5E2DCF;     /* Deep     — press, 대비가 더 필요한 자리 */
  --purple-soft:#F3EFFD;     /* Soft     — 아주 옅은 배경 (면적 작게) */
  --purple-line:#DED4F7;     /* soft 위의 경계 */

  /* ---------- Neutral ----------
     이전 팔레트는 회색에 초록이 섞여 있었다. 보라 포인트와 맞물리게 중립~미세한 쿨톤으로 바꿨다. */
  --bg:#F7F7FA;
  --surface:#FFFFFF;
  --ink:#18181D;            /* Primary text */
  --ink-sub:#71737F;        /* Secondary text */
  --ink-mute:#A2A4B0;       /* Caption, 비활성 */
  --line:#E8E8EF;           /* Border */
  --line-soft:#F1F1F6;      /* divider — 리스트 사이 */

  /* ---------- Accent ---------- */
  --coral:#D9544A;          /* 알림 배지 전용. 다른 곳에 쓰지 말 것 */
  --coral-soft:#FCEEEC;

  /* 구 토큰 별칭 — 남은 참조가 새 팔레트로 떨어지게 한다.
     800 이 Primary, 900/950 이 press·딥, 100/50 이 옅은 면이다. */
  --purple-950:#2C1463; --purple-900:#4E24B0; --purple-800:#7C50E2; --purple-700:#8963E3;
  --purple-600:#9A7AE6; --purple-500:#AE95E9; --purple-100:#F3EFFD; --purple-50:#FAF8FE;
  --lilac-400:#BFAAEE; --lilac-300:#D0C1F3; --lilac-200:#DED4F7;
  --ink-900:#18181D; --ink-800:#2E2F38; --ink-700:#474956; --ink-600:#5C5E6C;
  --ink-500:#71737F; --ink-400:#A2A4B0; --ink-300:#C8C9D2;
  --bg-tint:#F1F1F6;
  --red:#D9544A; --red-soft:#FCEEEC; --amber:#B8860B; --blue:#3E6C9E;

  /* ---------- Typography ----------
     한글 Pretendard. 라틴은 Pretendard 의 Inter 계열 글자가 받는다.
     브랜드 워드마크는 폰트가 아니라 SVG 라 여기 영향을 받지 않는다. */
  --font-sans:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,
    'Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
  --font-serif:var(--font-sans);

  /* ---------- Shape ----------
     radius 를 키우면 바로 템플릿처럼 보인다. 카드 12~16, 배너 18~20, 칩 8~10 이 상한. */
  --r-xs:8px;
  --r-sm:11px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:24px;
  --r-full:999px;

  /* ---------- Scrim ----------
     사진 위에 까는 어두운 막과 그림자의 단일 원본.
     이전에는 자리마다 다른 값(12,18,14 / 14,20,16 / 14,26,18 / 15,28,21)을 썼고
     전부 초록이 섞인 검정이었다 — 구 초록 팔레트의 잔재다.
     보라 포인트와 맞물리게 아주 살짝 차가운 먹으로 통일한다.
     알파는 자리마다 다르므로 rgba(var(--scrim),알파) 로 쓴다. */
  --scrim:17,14,26;

  /* ---------- Elevation ----------
     기본은 그림자 없음(1px border). 떠 있어야 하는 것(시트·토스트·탭바)만 예외. */
  --sh-1:none;
  --sh-2:none;
  --sh-3:0 12px 32px -12px rgba(var(--scrim),.18);
  --sh-up:0 -1px 0 var(--line);

  /* ---------- Layout ---------- 8px grid */
  --header-h:52px;
  --tabbar-h:58px;
  --gutter:20px;
  --maxw:1120px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink-900);
  font-size:15px;
  line-height:1.6;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:4px}
::selection{background:var(--purple-soft);color:var(--purple-deep)}

/* Scrollbar (desktop) */
@media (pointer:fine){
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:#D5D5E0;border-radius:8px;border:3px solid var(--bg)}
  ::-webkit-scrollbar-track{background:transparent}
}

/* ====================== Utilities ====================== */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
/* PC 전용 요소: 1024px 미만에서만 숨김 (요소 고유 display 값을 보존) */
@media (max-width:1023.98px){.hide-mo{display:none!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}
.spacer{flex:1}
.muted{color:var(--ink-500)}
.tiny{font-size:12px}
.small{font-size:13px}

/* ====================== App shell ====================== */
#app{min-height:100vh;display:flex;flex-direction:column}
.page{
  flex:1;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  animation:pageIn .28s var(--ease);
}
/* 화면 전체가 흰 바탕인 페이지(MY 등) — 회색 배경 위에 흰 카드가 뜬 것처럼 보이지 않게 한다 */
.page-plain{background:var(--surface)}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ====================== Header ====================== */
/* 불투명 흰 바 + 1px 경계. blur 유리판은 AI 앱 인상을 강하게 준다 */
.hdr{
  position:sticky;top:0;z-index:60;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.hdr-in{height:var(--header-h);display:flex;align-items:center;gap:10px;min-width:0}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
/* 심볼(잎) — 브랜드 보라. 워드마크와 나란히 놓일 때 크기는 logoRowHTML 이 정한다 */
.logo-leaf{flex-shrink:0;display:block;color:var(--purple)}
/* 아이콘 — 판은 currentColor, 잎은 --logo-ic-fg */
.logo-ic{flex-shrink:0;display:block;color:var(--purple-deep)}
/* 워드마크 색 변형 — 기본(dark) / 브랜드 보라 / 사진·딥퍼플 위의 네거티브 */
.logo-wm{flex-shrink:0;display:block;color:#141320}
.logo-wm.is-brand{color:var(--purple)}
.logo-wm.is-negative,.logo-leaf.is-negative{color:#fff}
/* Secondary lockup — 심볼+워드마크 한 줄, 그 아래 슬로건 */
.logo-lockup{display:inline-flex;flex-direction:column;align-items:center;gap:12px}
.logo-lockup-row{display:inline-flex;align-items:center;gap:14px}
.logo-tag{
  font-size:10.5px;font-weight:450;letter-spacing:.22em;text-indent:.22em;
  color:var(--ink-mute);white-space:nowrap;
}
/* 로고 부제는 헤더에 정말 여유가 있을 때만. 좁은 폭에서 이게 검색바를 밀어낸다 */
.logo-sub{
  display:none;
  font-size:11px;color:var(--ink-mute);letter-spacing:-.02em;font-weight:450;
  padding-left:11px;border-left:1px solid var(--line);
}
@media (min-width:1280px){.logo-sub{display:block}}
.hdr-actions{display:flex;align-items:center;gap:2px;margin-left:auto;flex-shrink:0}
/* 헤더의 글쓰기 — PC 전용(모바일은 하단 탭바). 아이콘 버튼들과 붙지 않게 간격을 준다 */
.hdr-write{display:inline-flex;align-items:center;gap:5px;margin-right:8px;flex-shrink:0}
.hdr-write svg{margin-top:-1px}
/* 아이콘은 전부 같은 stroke weight(1.6) 로 그린다 — ICON.* 참고 */
.icon-btn{
  width:36px;height:36px;border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--ink);
  transition:background .16s var(--ease);position:relative;
}
.icon-btn:hover{background:var(--bg)}
.icon-btn:active{background:var(--line-soft)}
/* 화면에서 유일하게 허용되는 coral — 알림 배지 */
.dot-badge{
  position:absolute;top:5px;right:5px;min-width:14px;height:14px;padding:0 4px;
  background:var(--coral);color:#fff;border-radius:var(--r-full);
  font-size:9px;font-weight:600;display:grid;place-items:center;
  border:2px solid var(--surface);line-height:1;
}
/* Desktop nav */
.gnb{display:none;gap:2px;margin-left:24px;align-self:stretch;align-items:center;
  min-width:0;flex-shrink:1;overflow:hidden}
.gnb a{
  position:relative;display:flex;align-items:center;padding:0 12px;white-space:nowrap;flex-shrink:0;
  font-size:14px;font-weight:500;color:var(--ink-sub);
  transition:color .16s var(--ease);
}
.gnb a:hover{color:var(--ink)}
.gnb a.on{color:var(--ink);font-weight:600}
.gnb a.on::after{
  content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:1.5px;background:var(--purple);
}
.hdr-search{display:none;flex:1 1 0;min-width:0;max-width:300px;margin-left:auto;position:relative}
.hdr-search input{
  width:100%;height:36px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);padding:0 14px 0 36px;font-size:13.5px;
  transition:border-color .16s;
}
.hdr-search input::placeholder{color:var(--ink-mute)}
.hdr-search input:focus{outline:none;border-color:var(--ink-sub)}
.hdr-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-mute)}

/* Page sub-header (detail pages) */
.subhdr{
  position:sticky;top:0;z-index:60;background:var(--surface);
  border-bottom:1px solid var(--line);
}
.subhdr-in{height:var(--header-h);display:flex;align-items:center;gap:8px}
.subhdr-title{font-size:15.5px;font-weight:600;letter-spacing:-.025em}

/* ====================== Bottom tab bar (mobile) ====================== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--surface);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(5,1fr);
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--ink-mute);font-size:10px;font-weight:500;letter-spacing:-.02em;
  transition:color .16s var(--ease);position:relative;
}
.tab.on{color:var(--ink);font-weight:600}
.tab.on .tab-ic{color:var(--purple)}
.tab-write{color:var(--ink-mute)}
/* 중앙 글쓰기 — 초록은 유지하되 크기와 그림자를 줄인다 */
.tab-write .tab-ic{
  width:30px;height:30px;border-radius:12px;color:#fff;
  background:var(--purple);
  display:grid;place-items:center;
}
.tab-write.on .tab-ic{color:#fff;background:var(--purple-deep)}

/* ====================== Buttons ====================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:44px;padding:0 18px;border-radius:var(--r-sm);
  font-size:14.5px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.btn:active{transform:translateY(.5px)}
.btn-primary{background:var(--purple);color:#fff}
.btn-primary:hover{background:var(--purple-deep)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink-mute)}
.btn-quiet{background:var(--bg);color:var(--ink)}
.btn-quiet:hover{background:var(--line-soft)}
.btn-sm{height:34px;padding:0 12px;font-size:13px;border-radius:var(--r-xs)}
.btn-lg{height:50px;font-size:15.5px;padding:0 22px}
.btn-block{width:100%}
.btn[disabled]{opacity:.42;pointer-events:none}
.btn-kakao{background:#FEE500;color:#191600}
.btn-naver{background:#03C75A;color:#fff}

/* ====================== Cards / sections ====================== */
/* 카드는 "따로 떠 있어야 하는 것"에만 쓴다. 대부분의 영역은 여백과 divider 로 나눈다 */
.card{background:var(--surface);border-radius:var(--r-md);border:1px solid var(--line)}
.card-pad{padding:16px}
/* 홈 '지금 뜨는 이야기' — 목록 카드라 안쪽 여백을 한 단계 줄인다 */
.hot-card{padding:9px 12px}
.sec{margin-top:28px}
.sec-hd{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.sec-title{
  font-size:17.5px;font-weight:700;letter-spacing:-.04em;color:var(--ink);
  display:flex;align-items:center;gap:6px;
}
/* 섹션 제목 옆 장식 아이콘은 쓰지 않는다. 단 '지금 뜨는 이야기'의 불꽃만 예외로 둔다 */
.sec-title svg{display:none}
.sec-title.sm{font-size:15.5px;letter-spacing:-.035em}
.sec-title.sm svg{display:block;color:var(--coral);width:16px;height:16px}
.sec-desc{
  font-size:12.5px;color:var(--ink-mute);letter-spacing:-.025em;
  margin:-4px 0 10px 1px;font-weight:400;
}
.sec-more{
  margin-left:auto;font-size:12.5px;color:var(--ink-sub);font-weight:450;
  display:inline-flex;align-items:center;gap:1px;
}
.sec-more:hover{color:var(--ink)}
.sec-more svg{width:14px;height:14px}

/* ====================== Hero — 메인 상단 롤링배너 ======================
   **높이를 픽셀로 잡지 않는다.** 폭만 늘어나고 높이가 고정이면 화면이 넓어질수록
   비율이 납작해지고, 운영자가 권장 규격(1600×420)대로 만든 이미지의 아래가 잘린다.
   실제로 PC 에서는 세로의 43% 만 보여 이미지 하단의 CTA 가 통째로 사라졌다.
   그래서 관리자에 적어둔 권장 규격과 **같은 비율**을 그대로 틀로 쓴다.
   PC 1600×420 · 모바일 1200×500 (BANNER_SLOTS 의 ratio / ratioMo 와 같은 값).
   이 비율을 바꿀 때는 data.js 의 권장 규격 문구도 같이 바꿀 것. */
.hero-slim{position:relative;margin-top:12px;border-radius:var(--r-lg);overflow:hidden;background:#15141C}
.hero-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.hero-track::-webkit-scrollbar{display:none}
.hero-slide{
  position:relative;flex:0 0 100%;scroll-snap-align:start;
  aspect-ratio:1200/500;display:flex;align-items:center;
}
/* 배너 그림 — **올린 이미지를 잘라내지 않습니다.**
   ------------------------------------------------------------
   권장 규격과 비율이 달라도 그림이 통째로 보여야 합니다. 이미지 안에 카피와 CTA 가
   그려져 있어서, 가장자리를 깎으면 정작 눌러야 할 버튼이 사라집니다.
   · .bnr-fit  그림이 실제로 차지하는 자리. 그 이미지의 **원본 비율**(--ar)을 그대로 갖고
     틀 안에서 가운데 정렬됩니다. 비율이 권장 규격과 같으면 틀에 꽉 차서 예전과 똑같습니다.
   · .bnr-back 남는 자리를 같은 사진을 크게 흐려 메웁니다 — 빈 띠가 생기지 않습니다.
   CTA 클릭영역(.bnr-cta)도 틀이 아니라 **.bnr-fit 안**에 들어갑니다. 틀 기준으로 얹으면
   비율이 다른 이미지로 바꿨을 때 영역만 제자리에 남아 엉뚱한 곳이 눌립니다. */
.bnr-img{position:absolute;inset:0;display:block;z-index:0;overflow:hidden}
.bnr-back{position:absolute;inset:0;display:block}
.bnr-back img, .bnr-back picture{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:blur(20px) saturate(1.15);transform:scale(1.15)}
.bnr-fit{
  position:absolute;inset:0;margin:auto;display:block;
  width:100%;max-width:100%;max-height:100%;aspect-ratio:var(--ar,16/9)}
.bnr-fit .bnr-pic, .bnr-fit .bnr-pic img{width:100%;height:100%;object-fit:cover;display:block}
.bnr-img img{width:100%;height:100%;object-fit:cover;display:block}
/* 틀과 이미지의 비율이 같으므로 잘릴 것이 없다. 권장 규격을 벗어난 이미지가 올라왔을 때만
   cover 가 동작하는데, 그때는 가운데를 기준으로 고르게 깎는 편이 예측 가능하다. */
.hero-slide .bnr-img img{object-position:50% 50%}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(var(--scrim),.80) 0%, rgba(var(--scrim),.62) 46%, rgba(var(--scrim),.26) 78%, rgba(var(--scrim),.14) 100%);
}
/* **글자 레이어는 클릭을 받지 않습니다.** 이 블록은 폭 100% 라 배너를 가로로 덮는데,
   .bnr-img(z-index:0) 안에 든 CTA 클릭영역보다 위에 있어 그대로 두면 **CTA 가 안 눌립니다**
   — 제목을 넣은 배너에서만 PC 의 CTA 가 죽던 자리입니다. 안에는 글자만 있습니다. */
.hero-copy{position:relative;z-index:2;padding:0 18px;width:100%;pointer-events:none}
.hero-slim h2{
  font-size:17px;line-height:1.3;font-weight:700;letter-spacing:-.045em;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.28);
}
.hero-slim p{
  margin-top:4px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.82);
  font-weight:400;letter-spacing:-.02em;
}
.hero-dots{
  position:absolute;right:12px;bottom:10px;z-index:3;display:flex;gap:5px;
}
.hero-dot{
  width:6px;height:6px;border-radius:var(--r-full);background:rgba(255,255,255,.4);
  transition:background .2s var(--ease),width .2s var(--ease);
}
.hero-dot.on{background:#fff;width:15px}

/* 좌/우 이동 — PC 에서 마우스로 넘길 자리. 모바일은 스와이프로 넘기므로 숨긴다.
   배너 위에 겹치는 요소라 반투명 원형으로 눌러두고, 섹션에 커서가 올라올 때만 또렷해진다. */
.hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:34px;height:34px;border-radius:var(--r-full);
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.28);color:#fff;opacity:.55;transition:opacity .16s var(--ease),background .16s var(--ease);
}
.hero-nav.prev{left:10px}
.hero-nav.next{right:10px}
.hero-slim:hover .hero-nav{opacity:1;background:rgba(0,0,0,.42)}
.hero-nav:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:2px}
@media (min-width:1024px){.hero-nav{display:flex}}

/* ====================== 대분류 타일 ======================
   업무 이야기만 있는 곳이 아니라는 걸 첫 화면에서 보이게 한다.
   면은 각 대분류 색을 9% 만 섞어 아주 옅게 — 화면 전체는 화이트+그린 그대로. */
.cat-rail{
  display:flex;gap:6px;margin-top:12px;overflow-x:auto;padding:1px 0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cat-rail::-webkit-scrollbar{display:none}
.cat-tile{
  flex:0 0 auto;width:56px;display:flex;flex-direction:column;align-items:center;gap:5px;
}
.cat-tile-ic{
  width:44px;height:44px;border-radius:15px;display:grid;place-items:center;
  color:var(--ink,#6B6D7A);background:var(--bg);border:1px solid var(--line);
  transition:transform .16s var(--ease);
}
@supports (background:color-mix(in srgb,#000 9%,#fff)){
  .cat-tile-ic{background:color-mix(in srgb,var(--ink,#6B6D7A) 17%,#fff);border-color:transparent}
}
/* 이 타일의 아이콘만 한 단계 두껍게 — 파스텔 면 위에서 선이 가늘면 흐려 보인다 */
.cat-tile-ic svg{stroke-width:2.2}
.cat-tile:hover .cat-tile-ic{transform:translateY(-2px)}
.cat-tile-t{
  font-size:11px;font-weight:500;color:var(--ink-800);letter-spacing:-.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
/* 스크롤이 필요 없는 폭에서는 타일이 남는 자리를 나눠 가져 가로를 꽉 채운다.
   모바일처럼 고정 폭으로 두면 왼쪽에 뭉치고 오른쪽이 통째로 비어 보인다.

   grid + auto-fit 으로도 되지만, 딱 한 칸이 모자라는 폭(예: 640px)에서 마지막 하나만
   둘째 줄에 덩그러니 떨어지면서 같은 '왼쪽 쏠림'이 다시 생긴다.
   flex:1 0 76px 은 항상 한 줄이고, 대분류가 늘어 폭이 모자라면 그때는 가로 스크롤로 넘어간다. */
@media (min-width:600px){
  .cat-rail{gap:10px}
  .cat-tile{flex:1 0 70px;width:auto;min-width:0}
}

/* ====================== 한 줄 통계 ======================
   숫자 세 덩어리로 한 화면을 쓰던 자리를 한 줄로 줄였다 */
.stat-line{
  display:flex;align-items:center;gap:10px;margin-top:12px;
  padding:9px 13px;border-radius:var(--r-sm);
  background:var(--purple-soft);border:1px solid var(--purple-line);
  transition:background .16s var(--ease);
}
.stat-line:hover{background:#EAE2FA}
.stat-line svg{color:var(--purple);flex-shrink:0;margin-left:auto}
.stat-line-t{font-size:13px;font-weight:450;color:var(--purple-deep);letter-spacing:-.03em}
.stat-line-t b{font-weight:700}
.stat-line-sub{
  font-size:11.5px;color:var(--purple);opacity:.72;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.stat-line-sub i{font-style:normal;opacity:.45;margin:0 3px}
/* 좁은 폭에서는 두 줄로 */
@media (max-width:599.98px){
  .stat-line{flex-wrap:wrap;row-gap:3px}
  .stat-line-t{flex:1 1 100%;order:1}
  .stat-line-sub{order:2}
  .stat-line svg{order:3}
}

/* ====================== Category chips ====================== */
/* 예전엔 음수 마진으로 칩을 화면 끝까지 흘렸는데, 그게 부모보다 넓은 박스를 만들어
   가로 넘침의 원인이 됐다. 컨테이너 안에서 스크롤시킨다. */
.chips-wrap{position:relative}
.chips{
  display:flex;gap:6px;overflow-x:auto;padding:2px 0;
  scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;scroll-snap-align:start;
  height:34px;padding:0 15px;border-radius:var(--r-full);
  background:var(--surface);border:1px solid var(--line);
  font-size:13px;font-weight:450;color:var(--ink-sub);letter-spacing:-.03em;
  display:inline-flex;align-items:center;gap:5px;
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease);
}
.chip:hover{border-color:var(--purple-line);background:var(--purple-50);color:var(--ink)}
/* 선택 상태는 면을 채운 보라 하나뿐 — 목록에서 지금 보고 있는 대분류가 한눈에 잡힌다 */
.chip.on{background:var(--purple);border-color:var(--purple);color:#fff;font-weight:600}
.chip.on:hover{background:var(--purple-deep);border-color:var(--purple-deep);color:#fff}

/* ====================== Post list ======================
   컴팩트 리스트. 카드 한 장은 제목 → 한 줄 본문 → 메타+반응 3단으로 끝난다.
   여백과 글자 크기를 줄여 한 화면에 들어가는 글 수를 늘리는 게 이 블록의 목적이다. */
.feed{display:flex;flex-direction:column;gap:10px}
.post{
  position:relative;background:var(--surface);
  padding:13px 14px;cursor:pointer;
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--r-md);
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
/* 눌린 느낌은 회색 테두리가 아니라 옅은 보라로 — 선택·활성은 전부 보라 한 계열로 통일한다 */
.post:hover{border-color:var(--purple-line);background:var(--purple-50)}
.post:hover .post-title{color:var(--purple)}
.post-main{min-width:0;flex:1}
.avatar{
  width:24px;height:24px;border-radius:var(--r-full);flex-shrink:0;
  display:grid;place-items:center;font-size:10.5px;font-weight:600;color:#fff;
  letter-spacing:-.03em;
}
.avatar.mono{background:var(--bg)!important;color:var(--ink-mute);
  box-shadow:inset 0 0 0 1px var(--line)}
.avatar.sm{width:22px;height:22px;font-size:9.5px}
.avatar.lg{width:52px;height:52px;font-size:18px}
.post-title{
  font-size:15.5px;font-weight:600;line-height:1.42;letter-spacing:-.035em;
  color:var(--ink);transition:color .16s var(--ease);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-title .badge-notice{margin-right:5px;vertical-align:1.5px}
.post-excerpt{
  margin-top:4px;font-size:13px;line-height:1.5;color:var(--ink-sub);font-weight:400;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
/* 이미지가 붙은 글은 오른쪽에 작은 썸네일 한 칸. 예전엔 본문 아래 88px 띠라 카드가 그만큼 길어졌다 */
.post-thumb{
  flex-shrink:0;align-self:flex-start;margin-top:2px;width:68px;height:68px;border-radius:10px;overflow:hidden;
  background:var(--bg);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-mute);
}
.post-thumb.has-img picture,.post-thumb.has-img img{width:100%;height:100%;display:block}
.post-thumb.has-img img{object-fit:cover}
/* 메타 줄과 반응 줄 — 국내 커뮤니티 관례대로 두 줄. 높이가 카드마다 같아진다 */
.post-meta{display:flex;align-items:center;gap:5px;margin-top:9px;min-width:0;overflow:hidden;white-space:nowrap}
.post-meta .badge,.post-meta .dot-sep{flex-shrink:0}
.post-meta .meta-ch{flex:0 1 auto;min-width:2.5em}
.post-foot{display:flex;align-items:center;gap:13px;margin-top:6px}
.post-author{font-size:11.5px;font-weight:500;color:var(--ink-sub);letter-spacing:-.02em;
  flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:10em}
.post-time{font-size:11.5px;font-weight:400;color:var(--ink-mute);flex-shrink:0}
/* 글 상세의 작성자 줄 — 목록 카드용 .post-author 는 max-width 10em 이라 '작성자'·인증 배지가 잘린다.
   상세에서는 이름 + 작성자 + 인증 배지가 한 줄에 나란히 서야 해서 따로 둔다. */
.detail-author{display:flex;align-items:center;flex-wrap:wrap;gap:5px;
  font-size:12.5px;font-weight:680;color:var(--ink-700);letter-spacing:-.02em}
.post-sub{font-size:11.5px;color:var(--ink-mute);letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:10em}
/* 채널명은 누르면 그 채널로 — TALK 와 채널이 따로 노는 게시판처럼 보이지 않게 하는 연결고리 */
.meta-ch{
  font-size:11.5px;color:var(--purple);font-weight:500;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:11em;
}
.meta-ch:hover{text-decoration:underline}
.dot-sep{color:var(--ink-300);font-size:11px}
/* 대분류 라벨 — 배경 없이 글자만 (게시글 상세에서 사용) */
.post-cat{
  flex-shrink:0;margin-top:3px;
  font-size:11px;font-weight:450;color:var(--ink-mute);letter-spacing:-.02em;
}
.stat-chip{
  display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:450;
  color:var(--ink-mute);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  transition:color .16s var(--ease);
}
.stat-chip svg{width:13px;height:13px}
.stat-chip.liked{color:var(--coral)}
.stat-chip.saved{color:var(--purple)}
.stat-chip:hover{color:var(--ink-sub)}
.stat-chip.liked:hover{color:var(--coral)}

/* badges — 면을 칠하지 않고 얇은 테두리로 */
.badge{
  display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 6px;
  border-radius:var(--r-xs);font-size:10.5px;font-weight:500;letter-spacing:-.02em;
}
.badge svg{width:11px;height:11px}
/* 배지 — 모양은 BADGES 의 img/color 가 정하므로 배지마다 CSS 를 만들지 않는다.
   .badge-dyn 은 색만 인라인으로 받고, 크기·정렬은 여기서 한 번만 정한다.
   운영자가 관리자에서 새 배지를 등록해도 이 규칙 안에서 같은 모양으로 그려진다. */
.badge-dyn{border:1px solid transparent}
.badge-dyn.has-img{background:transparent!important;border-color:transparent!important;
  color:var(--ink-700)!important;padding-left:2px;gap:4px}
.badge-img{width:14px;height:14px;border-radius:4px;object-fit:cover;flex-shrink:0}
/* 배지가 많은 회원의 프로필에서 나머지를 접는 칩 */
.badge-more{background:var(--bg-tint);color:var(--ink-sub);border:1px solid var(--line);
  font-variant-numeric:tabular-nums;cursor:default}
/* 배지가 아니라 단순 상태 칩 — '내 채널', 익명 토글처럼 배지 마스터와 무관한 자리 */
.badge-solid{background:var(--purple);color:#fff}
.badge-soft{background:var(--purple-soft);color:var(--purple);border:1px solid var(--purple-line)}
.badge-vote{background:var(--bg);color:var(--ink-sub);border:1px solid var(--line)}
.badge-brand{
  background:transparent;border:1px solid var(--line);color:var(--ink-sub);
  height:20px;padding:0 7px;border-radius:var(--r-xs);font-size:11px;font-weight:450;
  display:inline-flex;align-items:center;gap:3px;
}
.badge-brand svg{opacity:.55;width:11px;height:11px}
.badge-notice{background:var(--coral-soft);color:var(--coral)}
/* soft 버튼 (btn-soft) — 초록 면을 아주 옅게만 */
.btn-soft{background:var(--purple-soft);color:var(--purple);border:1px solid var(--purple-line)}
.btn-soft:hover{background:#EAE2FA}

/* ====================== Verify promo ====================== */
/* 초록 면 + 그라데이션 + 광원 효과를 걷어낸다. 인증은 CTA 하나로 충분히 전달된다 */
.promo{
  background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:20px;
}
.promo::after{display:none}
.promo-hd{display:flex;align-items:center;gap:11px}
.promo-ic{
  width:34px;height:34px;border-radius:10px;
  background:var(--purple-soft);color:var(--purple);
  display:grid;place-items:center;flex-shrink:0;border:1px solid var(--purple-line);
}
.promo-t{font-size:15px;font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.promo-d{font-size:12.5px;color:var(--ink-sub);margin-top:2px;letter-spacing:-.02em;font-weight:400}
.promo-list{margin:16px 0;display:flex;flex-direction:column;gap:9px}
.promo-list li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-sub);letter-spacing:-.025em}
.promo-list svg{color:var(--purple);flex-shrink:0;width:15px;height:15px}

/* ====================== Ranking ====================== */
.rank-list{display:flex;flex-direction:column}
.rank-item{
  display:flex;align-items:center;gap:10px;padding:5px 1px;cursor:pointer;
  border-bottom:1px solid var(--line-soft);
}
.rank-item:last-child{border-bottom:0}
.rank-item:hover .rank-t{color:var(--purple)}
/* 순위는 숫자만. 초록 배지를 씌우면 색만 요란해진다 */
.rank-no{
  width:19px;height:19px;flex-shrink:0;border-radius:6px;
  display:grid;place-items:center;
  font-size:11.5px;font-weight:600;color:var(--ink-mute);font-variant-numeric:tabular-nums;
}
.rank-item:nth-child(-n+3) .rank-no{background:var(--purple-soft);color:var(--purple)}
.rank-t{
  flex:1;min-width:0;font-size:13px;font-weight:450;letter-spacing:-.03em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .16s;
}

/* ====================== Quote banner ======================
   사진 + 한 줄 카피 + 워드마크. 손글씨체를 쓰면 바로 감성 템플릿이 되므로 본문 서체로 간다 */
.quote-card{
  border-radius:var(--r-lg);overflow:hidden;position:relative;
  /* 권장 규격 680×880 과 같은 비율. 예전에는 4/3(가로)이라 세로로 만든 이미지의
     위아래가 잘렸다 — 관리자 안내와 실제 노출이 어긋나면 안 된다. */
  background:#15141C;aspect-ratio:680/880;
  display:flex;align-items:flex-end;
}
.quote-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(var(--scrim),.06) 0%, rgba(var(--scrim),.20) 45%, rgba(var(--scrim),.56) 75%, rgba(var(--scrim),.78) 100%);
}
.quote-in{position:relative;z-index:2;width:100%;padding:0 20px 20px}
.quote-tx{
  font-size:20px;line-height:1.45;color:#fff;font-weight:500;letter-spacing:-.04em;
}
.quote-by{
  margin-top:14px;font-size:9.5px;letter-spacing:.3em;font-weight:500;
  color:rgba(255,255,255,.7);
}

/* ====================== CTA band ====================== */
.cta-band{
  margin-top:36px;border-radius:var(--r-lg);overflow:hidden;position:relative;
  background:#15141C;
  min-height:230px;display:flex;align-items:flex-end;
}
.cta-band .bnr-img img{object-position:36% 46%}
.cta-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(var(--scrim),.08) 0%, rgba(var(--scrim),.24) 45%,
    rgba(var(--scrim),.62) 78%, rgba(var(--scrim),.82) 100%);
}
.cta-in{position:relative;z-index:2;padding:24px 20px 22px;width:100%}
.cta-band h3{
  font-size:20px;font-weight:700;letter-spacing:-.045em;line-height:1.4;color:#fff;
}
.cta-band p{
  margin-top:8px;font-size:13px;color:rgba(255,255,255,.76);letter-spacing:-.02em;font-weight:400;
}
.cta-band .btn{margin-top:18px}

/* 섹션 하단의 '더 보기' — 버튼 모양을 주면 CTA 와 경쟁한다 */
.more-link{
  display:flex;align-items:center;justify-content:center;gap:3px;
  margin-top:10px;padding:11px 0;border-top:1px solid var(--line-soft);
  font-size:13px;font-weight:450;color:var(--ink-sub);letter-spacing:-.025em;
}
.more-link:hover{color:var(--ink)}

/* ====================== Footer ====================== */
.ftr{
  margin-top:40px;padding:26px 0 32px;border-top:1px solid var(--line);
  color:var(--ink-mute);font-size:11.5px;line-height:1.8;
}
.ftr-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:14px}
.ftr-links a{font-size:12px;font-weight:450;color:var(--ink-sub)}
.ftr-links a:hover{color:var(--ink)}

/* ====================== Post detail ====================== */
.detail-hd{padding:18px 0 14px;border-bottom:1px solid var(--line-soft)}
.detail-title{font-family:var(--font-serif);font-size:21px;font-weight:750;line-height:1.4;letter-spacing:-.04em;margin:10px 0 12px}
.detail-body{
  padding:20px 0;font-size:15.5px;line-height:1.78;color:var(--ink-800);
  white-space:pre-wrap;word-break:break-word;letter-spacing:-.017em;
}
.detail-img{
  margin:14px 0;border-radius:var(--r-sm);height:200px;
  background:var(--bg);display:grid;place-items:center;color:var(--ink-mute);
}
.detail-actions{
  display:flex;gap:8px;padding:14px 0 18px;border-bottom:1px solid var(--line-soft);
}
.act-btn{
  flex:1;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:13.5px;font-weight:650;color:var(--ink-500);letter-spacing:-.02em;
  transition:all .18s var(--ease);
}
.act-btn:hover{border-color:#D7D7E2;background:var(--bg-tint)}
.act-btn.on{background:var(--purple-50);border-color:var(--purple-100);color:var(--purple-800)}
.act-btn.on.like{background:var(--red-soft);border-color:#F8D9D6;color:var(--red)}

/* Vote */
.vote{
  margin:16px 0;border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px;background:var(--bg-tint);
}
.vote-hd{display:flex;align-items:center;gap:7px;margin-bottom:13px}
.vote-q{font-size:14.5px;font-weight:700;letter-spacing:-.03em}
.vote-opts{display:flex;flex-direction:column;gap:8px}
.vote-opt{
  position:relative;width:100%;min-height:46px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;overflow:hidden;
  display:flex;align-items:center;padding:0 14px;text-align:left;
  font-size:14px;font-weight:600;letter-spacing:-.025em;color:var(--ink-700);
  transition:border-color .18s var(--ease),background .18s;
}
.vote-opt:hover:not(.voted){border-color:var(--purple-500);background:var(--purple-50)}
.vote-fill{
  position:absolute;left:0;top:0;bottom:0;background:var(--purple-100);
  width:0;transition:width .6s var(--ease);
}
.vote-opt.picked .vote-fill{background:var(--purple-soft)}
.vote-opt.picked{border-color:var(--purple-600);color:#fff}
.vote-opt.picked .vote-pct{color:#fff}
.vote-label{position:relative;flex:1;min-width:0}
.vote-pct{position:relative;font-size:13px;font-weight:750;color:var(--purple-700);font-variant-numeric:tabular-nums;margin-left:10px}
.vote-foot{margin-top:11px;font-size:11.5px;line-height:1.6;color:var(--ink-400)}
.vote-foot svg{vertical-align:-2px;margin-right:3px}

/* Comments */
.cmt-sec{padding-top:18px}
.cmt-hd{font-size:15px;font-weight:720;letter-spacing:-.03em;margin-bottom:6px}
.cmt{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.cmt.reply{padding-left:34px;position:relative}
.cmt.reply::before{
  content:'';position:absolute;left:14px;top:20px;width:9px;height:9px;
  border-left:1.5px solid var(--line);border-bottom:1.5px solid var(--line);
  border-bottom-left-radius:3px;
}
.cmt-top{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.cmt-name{font-size:12.5px;font-weight:680;color:var(--ink-700);letter-spacing:-.02em}
.cmt-time{font-size:11.5px;color:var(--ink-400)}
.cmt-body{font-size:14px;line-height:1.66;color:var(--ink-700);letter-spacing:-.018em;white-space:pre-wrap}
.cmt-acts{display:flex;gap:14px;margin-top:8px}
.cmt-acts button{font-size:12px;font-weight:600;color:var(--ink-400);display:inline-flex;align-items:center;gap:4px}
.cmt-acts button:hover{color:var(--purple-700)}
.cmt-acts button.liked{color:var(--red)}
.is-author{background:var(--purple-800);color:var(--lilac-300);height:17px;padding:0 5px;border-radius:5px;font-size:9.5px;font-weight:700;display:inline-flex;align-items:center}

/* Comment composer (sticky bottom) */
.composer{
  position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  z-index:65;background:var(--surface);
  border-top:1px solid var(--line);padding:10px var(--gutter);
}
.composer-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:flex-end;gap:8px}
.composer textarea{
  flex:1;min-height:42px;max-height:120px;resize:none;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--bg);padding:10px 14px;
  font-size:14px;line-height:1.5;transition:border-color .18s,background .18s;
}
.composer textarea:focus{outline:none;background:#fff;border-color:var(--purple-500)}
.composer-send{
  width:42px;height:42px;border-radius:var(--r-sm);background:var(--purple-800);color:#fff;
  display:grid;place-items:center;flex-shrink:0;transition:background .18s,transform .12s;
}
.composer-send:disabled{background:#CBCBD6;cursor:not-allowed}
.composer-send:not(:disabled):active{transform:scale(.94)}
.composer-mode{
  display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:12px;
  color:var(--ink-500);font-weight:600;
}
.page-with-composer{padding-bottom:calc(var(--tabbar-h) + 84px + env(safe-area-inset-bottom))}

/* ====================== Form / write ====================== */
.field{margin-bottom:18px}
.field-label{
  display:flex;align-items:center;gap:5px;font-size:13px;font-weight:680;
  color:var(--ink-700);margin-bottom:8px;letter-spacing:-.025em;
}
.req{color:var(--red);font-size:12px}
.opt{font-size:11.5px;color:var(--ink-400);font-weight:500}
.input,.textarea,.select{
  width:100%;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;
  padding:12px 14px;font-size:15px;transition:border-color .16s var(--ease);
}
.input:focus,.textarea:focus,.select:focus{
  outline:none;border-color:var(--ink-sub);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-300)}
.textarea{min-height:180px;resize:vertical;line-height:1.7}
.select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235E665F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:40px;
}
.help{margin-top:6px;font-size:11.5px;color:var(--ink-400);line-height:1.55}
.counter{margin-left:auto;font-size:11.5px;color:var(--ink-400);font-variant-numeric:tabular-nums}

/* segmented control */
.seg{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;padding:3px;
  background:var(--bg);border-radius:var(--r-sm);border:1px solid var(--line-soft);
}
.seg button{
  height:40px;border-radius:10px;font-size:13.5px;font-weight:650;color:var(--ink-500);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;letter-spacing:-.025em;
  transition:all .2s var(--ease);
}
.seg button.on{background:#fff;color:var(--purple-800);box-shadow:var(--sh-1)}

/* upload */
.upload{
  border:1.5px dashed var(--line);border-radius:var(--r-sm);padding:22px;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  color:var(--ink-400);font-size:13px;background:var(--bg-tint);
  transition:border-color .18s,background .18s;cursor:pointer;
}
.upload:hover{border-color:var(--purple-500);background:var(--purple-50);color:var(--purple-700)}

/* 첨부한 파일 목록 — .upload 바로 아래. 올리기 전에 무엇을 고르는지 보여야
   엉뚱한 파일을 올리고 반려당하는 일이 줄어든다. */
.file-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.file-list li{
  display:flex;align-items:center;gap:8px;
  padding:9px 10px 9px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-tint);font-size:13px;color:var(--ink-700);
}
.file-list li svg{flex-shrink:0;color:var(--ink-400)}
.file-list li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-list li b{font-size:12px;font-weight:600;color:var(--ink-400);flex-shrink:0}
.file-list li .icon-btn{width:28px;height:28px;flex-shrink:0;color:var(--ink-400)}
.file-list li .icon-btn:hover{color:var(--red);background:var(--red-soft)}

/* vote builder */
.vb-opt{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.vb-opt .input{flex:1}
.vb-del{
  width:38px;height:44px;border-radius:10px;display:grid;place-items:center;
  color:var(--ink-400);flex-shrink:0;
}
.vb-del:hover{background:var(--red-soft);color:var(--red)}

/* notice box */
.notice{
  display:flex;gap:9px;padding:13px 14px;border-radius:var(--r-sm);
  background:var(--purple-50);border:1px solid var(--purple-100);
  font-size:12.5px;line-height:1.6;color:var(--purple-800);letter-spacing:-.02em;
}
.notice svg{flex-shrink:0;margin-top:1px;color:var(--purple-600)}
.notice.warn{background:#FFF9EC;border-color:#FAE8C0;color:#8A6410}
.notice.warn svg{color:var(--amber)}

/* ====================== Channels ======================
   카드 갤러리 대신 editorial list. 행 사이는 divider 1px 로만 나눈다 */
.ch-card{
  background:var(--surface);
  padding:12px 13px;display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .16s var(--ease);
}
.ch-card:hover{border-color:var(--ink-mute)}
.ch-card:hover .ch-name{color:var(--purple)}
/* 썸네일 — 사진이 있으면 사진, 없으면 채널 고유색(ink)을 옅게 깐 선 아이콘 */
.ch-thumb{
  width:46px;height:46px;border-radius:12px;flex-shrink:0;overflow:hidden;
  display:grid;place-items:center;
  background:var(--bg);
  color:var(--ink,#5C5E6C);
  border:1px solid var(--line);
}
@supports (background:color-mix(in srgb,#000 9%,#fff)){
  .ch-thumb{background:color-mix(in srgb, var(--ink,#5C5E6C) 9%, #fff)}
}
.ch-thumb.has-img{background:var(--bg)}
.ch-thumb picture,.ch-thumb img{width:100%;height:100%;display:block}
.ch-thumb img{object-fit:cover}
.ch-info{min-width:0;flex:1;padding-top:1px}
.ch-name{
  font-size:14.5px;font-weight:600;letter-spacing:-.035em;color:var(--ink);
  display:flex;align-items:center;gap:5px;min-width:0;transition:color .16s var(--ease);
}
/* 이름이 길면 이름만 줄인다 — 예전엔 이름이 늘어나면서 대분류·내채널 태그가 서로 겹쳤다 */
.ch-name-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-name .badge,.ch-name .cat-tag{flex:0 0 auto}
.ch-desc{
  font-size:12px;color:var(--ink-sub);margin-top:3px;letter-spacing:-.025em;font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ch-stat{font-size:11px;color:var(--ink-mute);margin-top:4px;font-variant-numeric:tabular-nums}
/* 채널이 '살아 있는 공간'으로 읽히도록 마지막 글 한 줄을 붙인다 */
.ch-live{
  display:flex;align-items:center;gap:5px;margin-top:6px;
  font-size:11.5px;color:var(--ink-600);letter-spacing:-.025em;
  white-space:nowrap;overflow:hidden;
}
.ch-live svg{width:12px;height:12px;color:var(--purple);flex-shrink:0}
.ch-live b{font-weight:450;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ch-live i{font-style:normal;color:var(--ink-mute);flex-shrink:0}

/* ── 홈 채널 레일 — 가로로 훑어보는 카드 ─────────────────── */
.ch-rail{
  display:flex;gap:9px;overflow-x:auto;padding:1px 0 2px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.ch-rail::-webkit-scrollbar{display:none}
.ch-mini{
  flex:0 0 auto;width:170px;padding:12px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .16s var(--ease);
}
.ch-mini:hover{border-color:var(--ink-mute)}
.ch-mini:hover .ch-mini-name{color:var(--purple)}
.ch-mini-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ch-mini-thumb{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;overflow:hidden;
  display:grid;place-items:center;background:var(--bg);color:var(--ink,#5C5E6C);
  border:1px solid var(--line);
}
@supports (background:color-mix(in srgb,#000 9%,#fff)){
  .ch-mini-thumb{background:color-mix(in srgb,var(--ink,#5C5E6C) 9%,#fff)}
}
.ch-mini-name{
  margin-top:9px;font-size:13.5px;font-weight:600;letter-spacing:-.035em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .16s var(--ease);
}
.ch-mini-desc{
  margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--ink-sub);letter-spacing:-.025em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:33px;
}
.ch-mini-stat{margin-top:6px;font-size:11px;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.ch-mini-more{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:104px;
  background:var(--bg);border-style:dashed;color:var(--ink-sub);
  font-size:12px;font-weight:450;letter-spacing:-.03em;text-align:center;line-height:1.4;
}
.ch-mini-more-ic{
  width:34px;height:34px;border-radius:var(--r-full);display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-sub);
}

/* ── TALK 에서 대분류를 고르면 그 대분류의 채널을 같이 보여준다 ─────
   TALK 는 FLOOR 전체 이야기, 채널은 그 이야기가 주제별로 모이는 곳.
   둘이 따로 노는 게시판처럼 보이지 않게 목록 위에 채널을 한 줄 깔아둔다. */
.talk-ch{
  margin-top:12px;padding:12px;border-radius:var(--r-sm);
  background:var(--bg-tint);border:1px solid var(--line-soft);
}
.talk-ch-hd{
  display:flex;align-items:center;gap:8px;margin-bottom:9px;padding:0 1px;
  font-size:12.5px;color:var(--ink-sub);letter-spacing:-.025em;
}
.talk-ch-hd b{color:var(--ink);font-weight:600}
.talk-ch-hd a{margin-left:auto;display:inline-flex;align-items:center;gap:1px;color:var(--purple);font-weight:500}
.talk-ch .ch-mini{background:var(--surface)}
.talk-ch .ch-mini-desc{-webkit-line-clamp:1;height:auto}
/* 팔로우 — 채워진 초록은 '아직 팔로우 안 함'일 때만. 팔로잉은 조용하게 */
/* 팔로우 버튼 — 목록에 10개 넘게 쌓이는 자리라 면을 채우지 않는다.
   꽉 찬 보라 버튼이 한 화면에 여러 개면 '포인트'가 아니라 배경이 되고,
   정작 눌러야 할 CTA(글쓰기·인증하기)와 무게가 같아진다. 옅은 보라까지만. */
.follow-btn{
  height:32px;padding:0 14px;border-radius:var(--r-full);flex-shrink:0;margin-top:2px;
  font-size:12.5px;font-weight:600;letter-spacing:-.02em;
  background:var(--purple-soft);color:var(--purple);border:1px solid var(--purple-line);
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.follow-btn:hover{background:var(--purple);border-color:var(--purple);color:#fff}
/* 이미 팔로우한 채널 — 할 일이 끝난 상태라 가장 조용하게 */
.follow-btn.on{background:transparent;color:var(--ink-mute);border-color:var(--line);font-weight:500}
.follow-btn.on:hover{background:var(--bg-tint);color:var(--ink-sub);border-color:var(--line)}

/* ── 채널 선택(글쓰기 1단계) ───────────────────────────────
   팔로우와 '이 채널에 쓰기' 선택은 다른 일이다. 둘이 같은 모양이면 무엇을 누르는지 헷갈린다.
   팔로우 = 테두리만 있는 작은 텍스트 버튼 / 선택 = 행 오른쪽 끝의 원형 인디케이터. */
.cat-tag{
  flex:0 0 auto;font-size:10.5px;font-weight:450;letter-spacing:-.02em;
  height:18px;padding:0 6px;border-radius:var(--r-xs);
  border:1px solid var(--line);color:var(--ink-mute);
  display:inline-flex;align-items:center;
}
.follow-btn.sm{
  height:28px;padding:0 10px;font-size:11.5px;font-weight:450;
  background:transparent;color:var(--ink-sub);border:1px solid var(--line);
}
.follow-btn.sm:hover{background:var(--bg);color:var(--ink)}
.follow-btn.sm.on{background:var(--purple-soft);color:var(--purple);border-color:var(--purple-line)}

.pick-row{
  display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:10px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  cursor:pointer;transition:border-color .16s,background .16s;
}
.pick-row:hover{border-color:var(--ink-mute)}
.pick-row.on{border-color:var(--purple);background:var(--purple-soft)}
.pick-thumb{
  width:46px;height:46px;border-radius:11px;flex-shrink:0;overflow:hidden;
  display:grid;place-items:center;border:1px solid var(--line);
  background:var(--bg);color:var(--ink,#5C5E6C);
}
@supports (background:color-mix(in srgb,#000 9%,#fff)){
  .pick-thumb{background:color-mix(in srgb, var(--ink,#5C5E6C) 9%, #fff)}
}
.pick-thumb.has-img{background:var(--bg)}
.pick-thumb picture,.pick-thumb img{width:100%;height:100%;display:block}
.pick-thumb img{object-fit:cover}
.pick-row .ch-name{font-size:14.5px}
.pick-row .ch-desc{margin-top:3px}
.pick-row .ch-stat{margin-top:4px}
/* 선택 인디케이터 — 비었을 때는 얇은 원, 선택되면 초록으로 채운다 */
.pick-radio{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--line);display:grid;place-items:center;color:#fff;
  transition:background .16s,border-color .16s;
}
.pick-row:hover .pick-radio{border-color:var(--ink-mute)}
.pick-row.on .pick-radio{background:var(--purple);border-color:var(--purple)}
.pick-gp{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin:24px 0 8px;
}
.pick-gp svg{display:none}
.pick-gp-sub{font-size:11.5px;font-weight:400;color:var(--ink-mute)}
.pick-cat{
  font-size:11.5px;font-weight:500;color:var(--ink-sub);
  display:inline-flex;align-items:center;margin:18px 0 6px;
}
.pick-new{
  width:100%;margin-top:12px;height:50px;border-radius:var(--r-md);
  border:1px dashed var(--line);background:var(--bg-tint);color:var(--ink-500);
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:13.5px;font-weight:600;transition:.16s;
}
.pick-new:hover{border-color:var(--purple-500);color:var(--purple-700);background:var(--purple-50)}
.pick-new b{color:var(--purple-700)}

/* 글쓰기 상단 채널 칩 — 선택한 채널이 고정 표시되고 언제든 변경 가능 */
.wch{
  width:100%;display:flex;align-items:center;gap:10px;padding:11px 13px;margin-bottom:10px;
  background:var(--purple-50);border:1px solid var(--purple-100);border-radius:var(--r-md);
  text-align:left;transition:.16s;
}
.wch:hover{border-color:var(--purple-500);background:#F3EFFD}
.wch.is-empty{background:var(--bg-tint);border-color:var(--line);border-style:dashed}
.wch-thumb{
  width:34px;height:34px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  background:var(--purple-800);color:var(--lilac-300);
}
.wch-thumb.is-empty{background:var(--bg-tint);color:var(--ink-400)}
.wch-name{
  font-size:15px;font-weight:700;letter-spacing:-.03em;color:var(--purple-900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wch.is-empty .wch-name{color:var(--ink-400);font-weight:600}
.wch-chg{
  margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:2px;
  font-size:12.5px;font-weight:650;color:var(--purple-700);
}
.wch.is-empty .wch-chg{color:var(--ink-400)}

.ch-cover{
  border-radius:var(--r-lg);padding:24px 20px;color:#fff;position:relative;overflow:hidden;
  margin-top:14px;min-height:230px;display:flex;align-items:flex-end;
}

.ch-cover-thumb{
  position:relative;width:56px;height:56px;border-radius:16px;margin-bottom:14px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.16);color:#fff;
  border:1px solid rgba(255,255,255,.34);
}
.ch-cover-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(175deg, rgba(var(--scrim),.52) 0%, rgba(var(--scrim),.74) 42%, rgba(var(--scrim),.90) 100%);
}
.ch-cover-in{position:relative;z-index:2}
.ch-cover h2{font-family:var(--font-serif);font-size:22px;font-weight:750;letter-spacing:-.04em;position:relative}
.ch-cover p{margin-top:7px;font-size:13.5px;color:rgba(255,255,255,.8);position:relative;line-height:1.6}
.ch-cover-stats{display:flex;gap:16px;margin-top:14px;position:relative}
.ch-cover-stats div{font-size:12.5px;color:rgba(255,255,255,.75)}
.ch-cover-stats b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}

/* ====================== MY FLOOR ======================
   진초록 그라데이션 카드를 걷어내고 흰 바탕 editorial 헤더로.
   면을 색으로 채우면 금융앱/멤버십앱처럼 읽힌다. 초록은 인증 배지에만 남긴다. */
.profile{
  background:var(--surface);padding:24px 0 22px;margin-top:4px;
  border-bottom:1px solid var(--line);
}
.profile-top{display:flex;align-items:center;gap:14px}
.profile-name{font-size:20px;font-weight:700;letter-spacing:-.04em;color:var(--ink)}
.profile-sub{
  font-size:12.5px;color:var(--ink-sub);margin-top:4px;
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
}
/* 가입일 — 근무지·경력보다 한 단계 약하게, 아래 줄로 내린다 */
.profile-sub2{font-size:11.5px;color:var(--ink-mute);margin-top:3px}
.profile-badges{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.profile-stats{
  display:grid;grid-template-columns:repeat(3,1fr);margin-top:22px;
}
.profile-stat{text-align:center;position:relative;padding:2px 4px}
.profile-stat + .profile-stat::before{
  content:'';position:absolute;left:0;top:6%;height:88%;width:1px;background:var(--line);
}
.profile-stat b{
  display:block;font-size:20px;font-weight:700;letter-spacing:-.04em;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1;
}
.profile-stat span{font-size:11.5px;color:var(--ink-sub);font-weight:400}

.menu-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.menu-item{
  display:flex;align-items:center;gap:12px;padding:15px 16px;width:100%;
  border-bottom:1px solid var(--line-soft);font-size:14.5px;font-weight:450;
  color:var(--ink);letter-spacing:-.025em;text-align:left;transition:color .16s;
}
.menu-item:last-child{border-bottom:0}
.menu-item:hover{color:var(--purple)}
.menu-item svg:first-child{color:var(--ink-sub);flex-shrink:0}
.menu-item .chev{margin-left:auto;display:inline-flex;color:var(--ink-mute)}
.menu-item .val + .chev{margin-left:6px}
.menu-item .val{margin-left:auto;font-size:13px;color:var(--ink-400);font-weight:500}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:4px}
.tabs button{
  position:relative;padding:13px 13px;font-size:13.5px;font-weight:450;
  color:var(--ink-sub);letter-spacing:-.03em;transition:color .16s;
}
.tabs button.on{color:var(--ink);font-weight:600}
.tabs button.on::after{
  content:'';position:absolute;left:6px;right:6px;bottom:-1px;height:1.5px;background:var(--purple);
}

/* invite */
.invite-box{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px;
}
.invite-code{
  display:flex;align-items:center;gap:8px;margin-top:12px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;
}
.invite-code code{
  flex:1;min-width:0;font-size:12.5px;color:var(--ink-700);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* progress */
.prog{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:10px}
.prog i{display:block;height:100%;border-radius:2px;background:var(--purple);transition:width .7s var(--ease)}

/* ====================== Notifications ====================== */
.noti{
  display:flex;gap:11px;padding:14px 14px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);cursor:pointer;
  transition:border-color .18s,background .18s;
}
.noti:hover{border-color:#DED4F7}
.noti.unread{background:var(--purple-50);border-color:var(--purple-100)}
.noti-ic{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  background:var(--purple-100);color:var(--purple-700);
}
.noti-tx{font-size:13.5px;line-height:1.55;color:var(--ink-700);letter-spacing:-.022em}
.noti-tx b{font-weight:700;color:var(--ink-900)}
.noti-time{font-size:11.5px;color:var(--ink-400);margin-top:3px}
.noti-dot{width:7px;height:7px;border-radius:50%;background:var(--purple-600);flex-shrink:0;margin-top:14px}

/* ====================== Search ====================== */
.search-bar{position:relative;margin-top:14px}
.search-bar input{
  width:100%;height:42px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);padding:0 42px;font-size:14px;
  transition:border-color .16s;
}
.search-bar input::placeholder{color:var(--ink-mute)}
.search-bar input:focus{outline:none;border-color:var(--ink-sub)}
.search-bar .s-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-mute)}
.search-bar .s-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
.kw-list{display:flex;flex-wrap:wrap;gap:7px}
.kw{
  height:31px;padding:0 12px;border-radius:var(--r-sm);background:var(--surface);
  border:1px solid var(--line);font-size:12.5px;font-weight:450;color:var(--ink-sub);
  display:inline-flex;align-items:center;gap:6px;transition:all .18s;
}
.kw:hover{border-color:var(--purple-500);color:var(--purple-700)}
.kw .x{color:var(--ink-300);display:grid;place-items:center}
.kw .x:hover{color:var(--red)}
mark{background:var(--lilac-200);color:var(--purple-950);border-radius:3px;padding:0 1px}

/* ====================== Auth ====================== */
.auth-wrap{max-width:400px;margin:0 auto;padding:28px 0 40px}
.auth-logo{text-align:center;margin-bottom:26px;display:flex;flex-direction:column;align-items:center;gap:12px}
.auth-logo p{font-size:13.5px;color:var(--ink-500);margin-top:5px}
.divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--ink-300);font-size:12px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.check-row{display:flex;align-items:flex-start;gap:9px;padding:9px 0;font-size:13.5px;color:var(--ink-700)}
.cb{
  width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);flex-shrink:0;
  display:grid;place-items:center;background:#fff;transition:all .16s;margin-top:1px;
}
.cb svg{opacity:0;transition:opacity .16s var(--ease)}
.cb.on{background:var(--purple-800);border-color:var(--purple-800);color:#fff}
.cb.on svg{opacity:1}

/* ====================== Empty / skeleton ====================== */
.empty{
  padding:52px 20px;text-align:center;color:var(--ink-400);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.empty svg{color:var(--ink-300)}
.empty b{font-size:15px;font-weight:650;color:var(--ink-500)}
.empty p{font-size:13px;line-height:1.6}

/* ====================== Toast / sheet ====================== */
.toast-wrap{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px);
  z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;
  width:calc(100% - 32px);max-width:400px;
}
.toast{
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:600;letter-spacing:-.02em;box-shadow:var(--sh-3);
  display:flex;align-items:center;gap:8px;animation:toastIn .3s var(--ease);
  max-width:100%;
}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut .25s var(--ease) forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.97)}}

.sheet-bg{
  position:fixed;inset:0;z-index:150;background:rgba(var(--scrim),.42);
  animation:fadeIn .22s var(--ease);
  display:flex;align-items:flex-end;justify-content:center;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{
  width:100%;max-width:520px;background:#fff;
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:8px 0 calc(16px + env(safe-area-inset-bottom));
  animation:sheetUp .3s var(--ease);max-height:82vh;overflow-y:auto;
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.sheet-grip{width:38px;height:4px;border-radius:2px;background:var(--line);margin:6px auto 12px}
.sheet-title{font-size:15.5px;font-weight:720;letter-spacing:-.03em;padding:0 20px 10px}
.sheet-item{
  display:flex;align-items:center;gap:11px;width:100%;padding:14px 20px;
  font-size:15px;font-weight:600;color:var(--ink-700);text-align:left;letter-spacing:-.025em;
  transition:background .16s;
}
.sheet-item:hover{background:var(--bg-tint)}
.sheet-item.danger{color:var(--red)}
.sheet-item svg{color:var(--ink-400)}
.sheet-item.danger svg{color:var(--red)}

/* FAB */
/* sidebar (desktop only) */
.layout{display:block}
.side{display:flex;flex-direction:column;gap:14px;margin-top:22px}
/* 인용 배너는 데스크톱 사이드바 장식이다. 모바일 홈은 이야기로만 채운다 */
@media (max-width:1023.98px){.side .quote-card{display:none}}

/* ================================================================
   TABLET  ≥ 768px
   ================================================================ */
@media (min-width:768px){
  :root{--gutter:24px}
  body{font-size:15.5px}
  .hero-copy{padding:0 30px}
  .hero-slim h2{font-size:22px}
  .hero-slim p{font-size:13px;margin-top:6px}
  .cat-tile-ic{width:52px;height:52px;border-radius:17px}
  .cat-tile-t{font-size:12px}
  .stat-line{padding:13px 16px}
  .stat-line-t{font-size:14px}
  .post{padding:15px 16px}
  .post-title{font-size:16px}
  .post-excerpt{font-size:13px}
  .detail-title{font-size:27px}
  .cta-band{min-height:250px}
  .cta-in{padding:34px 38px;display:flex;align-items:flex-end;gap:24px}
  .cta-band .btn{margin-top:0;margin-left:auto;flex-shrink:0}
  .cta-band h3{font-size:26px}
  .cta-band p{font-size:14px}
  .sec-title{font-size:20px}
}

/* ================================================================
   DESKTOP  ≥ 1024px
   ================================================================ */
@media (min-width:1024px){
  :root{--header-h:64px}
  .tabbar{display:none}

  /* 세부 화면: 공통 헤더(.hdr-detail) 아래에 뒤로가기 바를 2단으로 붙인다.
     둘 다 sticky 라 top 을 내려주지 않으면 스크롤 시 포개진다.
     뒤로가기 바는 보조 요소라 46px 로 낮춰 본문 영역을 덜 먹게 한다(64+46=110px). */
  .hdr-detail{z-index:61}
  .hdr-detail + .subhdr{top:var(--header-h);z-index:59}
  .hdr-detail + .subhdr .subhdr-in{height:46px}
  .page{padding-bottom:0}
  .page-with-composer{padding-bottom:110px}
  .composer{bottom:0}
  .toast-wrap{bottom:28px}
  .gnb{display:flex}

  /* 1024~1279 는 한 단. 본문 + 332px 사이드바를 같이 놓기엔 폭이 빠듯해
     헤더의 검색바·우측 아이콘까지 밀려난다. 2단은 1280px 부터 연다. */

  .hero-slim{margin-top:20px;border-radius:var(--r-xl)}
  /* 데스크톱부터는 PC 권장 규격(1600×420)과 같은 비율. 모바일 이미지를 쓰는 구간
     (1024px 미만)과 경계를 똑같이 맞춰야 이미지와 틀이 갈라지지 않는다 —
     화면이 기기를 가르는 기준도 같은 1024px 이다(app.js 의 isMobile). */
  .hero-slide{aspect-ratio:1600/420}
  .hero-copy{padding:0 40px}
  .hero-slim h2{font-size:25px}
  .hero-slim p{font-size:14px}

  .cat-rail{gap:10px;margin-top:18px}
  .stat-line{margin-top:18px}

  /* 사이드바(332px)에서는 인용 카피를 한 단계 줄인다 */
  .quote-tx{font-size:18px}

  .feed{gap:9px}
  .detail-wrap{max-width:760px}
  .auth-wrap{padding:52px 0 70px}
  .ftr{margin-top:50px}
  .sheet-bg{align-items:center}
  .sheet{border-radius:var(--r-xl);max-width:440px;margin:0 20px}
}

@media (min-width:1160px){
  .hdr-search{display:block}
}

@media (min-width:1280px){
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:26px;align-items:start}
  .side{margin-top:0;position:sticky;top:calc(var(--header-h) + 18px)}
}

/* ── 대분류 폴더 UI (채널 선택 · 채널 탐색) ───────────────── */
.pick-cat-hd{display:flex;align-items:center;gap:8px;margin:18px 2px 8px}
.pick-cat-hd .pick-cat{margin:0}
.pick-cat-add{
  margin-left:auto;height:26px;padding:0 9px;border-radius:var(--r-xs);
  border:1px solid var(--line);background:var(--surface);color:var(--ink-sub);
  font-size:11.5px;font-weight:450;display:inline-flex;align-items:center;gap:4px;transition:.16s;
}
.pick-cat-add:hover{border-color:var(--ink-mute);color:var(--ink)}
/* 대분류별 '더보기' — 채널이 늘어나도 첫 화면이 길어지지 않게 하는 접힘 버튼 */
.pick-more{
  width:100%;display:flex;align-items:center;justify-content:center;gap:5px;
  margin-top:8px;padding:11px 0;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);
  font-size:13px;font-weight:500;color:var(--ink-sub);letter-spacing:-.03em;
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease);
}
.pick-more:hover{border-color:var(--purple-line);background:var(--purple-50);color:var(--purple-700)}
.pick-more svg{opacity:.7}
.pick-cat-empty{
  padding:13px 0;margin-bottom:8px;
  border-bottom:1px solid var(--line-soft);
  font-size:12.5px;color:var(--ink-mute);letter-spacing:-.02em;
}
.chip .chip-c{
  margin-left:5px;font-size:11px;font-weight:700;color:var(--ink-400);
  font-variant-numeric:tabular-nums;
}
.chip.on .chip-c{color:rgba(255,255,255,.72)}
.cat-head{
  display:flex;align-items:center;gap:10px;margin-top:14px;padding:13px 14px;
  border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--bg-tint);
}
.cat-head b{font-size:14.5px;letter-spacing:-.03em;color:var(--purple-900)}
.cat-head > div{min-width:0;flex:1}
.cat-head .btn{flex-shrink:0}
.ch-cover-cat{
  display:inline-flex;align-items:center;gap:4px;margin-bottom:7px;cursor:pointer;
  height:22px;padding:0 8px;border-radius:var(--r-xs);
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);
  font-size:11.5px;font-weight:650;color:#fff;letter-spacing:-.02em;transition:.16s;
}
.ch-cover-cat:hover{background:rgba(255,255,255,.3)}

/* ── 채널 대표이미지 · 개설 미리보기 ──────────────────────── */
.ch-thumb.has-img,.pick-thumb.has-img,.wch-thumb.has-img,.ch-cover-thumb.has-img{
  background:var(--bg);border:1px solid var(--line);overflow:hidden;
}
.ch-thumb.has-img img,.pick-thumb.has-img img,.wch-thumb.has-img img,.ch-cover-thumb.has-img img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.cover-prev{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.cover-prev img{width:100%;height:150px;object-fit:cover;display:block}
.cover-prev-acts{
  position:absolute;right:8px;bottom:8px;display:flex;gap:6px;
}
.cover-prev-acts .btn{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
}
.nc-preview{
  margin-top:20px;padding:14px;border-radius:var(--r-md);
  background:var(--bg);border:1px dashed var(--line);
}
.nc-preview-lb{
  font-size:11.5px;font-weight:650;color:var(--ink-400);
  letter-spacing:-.02em;margin:0 0 9px 2px;
}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ====================== 채널 권한 ======================
   개설자가 정하는 공개범위·작성 권한 (명세 10항 확장).
   기본값(전체 공개·누구나)일 때는 아무것도 그리지 않는다 — 대부분의 채널이 기본값이라
   전부 칩을 붙이면 정보가 아니라 배경이 된다. 기본값과 다를 때만 눈에 띄면 된다. */
.seg-sm button{height:34px;font-size:12.5px;font-weight:600}
.perm-row{margin-bottom:14px}
.perm-row:last-child{margin-bottom:0}
.perm-lb{font-size:12.5px;font-weight:600;color:var(--ink-700);margin-bottom:6px;letter-spacing:-.025em}
.perm-desc{margin-top:6px;font-size:11.5px;color:var(--ink-mute);letter-spacing:-.02em}

/* 채널 카드·미리보기에 붙는 권한 칩 */
.ch-perm{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.ch-perm-chip{
  display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;
  border-radius:var(--r-full);background:var(--purple-soft);border:1px solid var(--purple-line);
  font-size:10.5px;font-weight:600;color:var(--purple);letter-spacing:-.02em;white-space:nowrap;
}
.ch-perm-chip svg{width:12px;height:12px;opacity:.8}
/* 채널 상세 상단의 권한 줄 */
.ch-perm-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding:10px 13px;border-radius:var(--r-sm);
  background:var(--purple-soft);border:1px solid var(--purple-line);
}
.ch-perm-bar .ch-perm{margin-top:0}
.ch-perm-bar .ch-perm-chip{background:#fff}
.mini-link{margin-left:auto;font-size:12px;font-weight:600;color:var(--purple);letter-spacing:-.02em}
.mini-link:hover{text-decoration:underline}
/* 제한이 하나도 없는 채널의 권한 줄 — 개설자에게만 보입니다(설정 화면 진입로) */
.ch-perm-open{font-size:12.5px;color:var(--ink-sub);letter-spacing:-.02em}

/* 채널 설정 화면 머리 — 지금 어느 채널을 고치는 중인지 */
.ch-edit-hd{
  display:flex;align-items:center;gap:12px;
  padding:13px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);
}
.ch-edit-hd .ch-info{min-width:0;flex:1}

/* 권한이 없어 잠긴 상태 */
.badge-lock{background:var(--bg-tint);color:var(--ink-sub);border:1px solid var(--line)}
/* 글 수정 중에는 채널을 바꿀 수 없다 — 서버가 거부한다.
   누를 수 없는 것처럼 보이되, 어느 채널에 쓴 글인지는 계속 읽혀야 한다. */
.wch.is-locked{opacity:.68;cursor:default}
.wch.is-locked .wch-chg{display:none}

.pick-row.is-locked{opacity:.62}
.pick-row.is-locked:hover{border-color:var(--line);background:var(--surface)}
.pick-row.is-locked .pick-radio{opacity:.4}
.btn.is-locked{opacity:.55;cursor:not-allowed}

/* 열람 권한이 없는 채널 — 빈 화면 대신 '왜' 와 인증 경로를 준다 */
.ch-locked{
  text-align:center;padding:44px 22px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.ch-locked-ic{
  width:60px;height:60px;margin:0 auto 16px;border-radius:19px;display:grid;place-items:center;
  background:var(--purple-soft);color:var(--purple);border:1px solid var(--purple-line);
}
.ch-locked h3{font-size:17px;font-weight:700;letter-spacing:-.035em;color:var(--ink)}
.ch-locked p{margin-top:7px;font-size:13.5px;line-height:1.6;color:var(--ink-sub)}
.ch-locked-meta{margin-top:12px;font-size:12px;color:var(--ink-mute)}

/* 댓글 작성 권한이 없을 때의 입력줄 */
.composer-locked{
  display:flex;align-items:center;gap:11px;padding:13px 15px;
  background:var(--purple-soft);border-top:1px solid var(--purple-line);
}
.composer-locked svg{flex-shrink:0;color:var(--purple)}
.composer-locked > div{flex:1;min-width:0;font-size:12.5px;line-height:1.5;color:var(--ink-700)}
.composer-locked .btn{flex-shrink:0}

/* ============================================================
   배너 — 슬롯 기반 (BANNER_SLOTS / BANNERS)
   ------------------------------------------------------------
   **배너 전면은 누를 수 없다.** 예전에는 투명 오버레이가 배너를 통째로 덮고 있어서,
   모바일에서 스크롤하거나 배너를 스와이프하다 스치기만 해도 다른 페이지로 날아갔다.
   지금은 이미지 안에 그려둔 CTA 자리에만 클릭영역(.bnr-cta)을 얹는다.

   위치는 슬롯마다 정해둔 % 좌표를 인라인 style 로 받는다 — px 로 잡으면 반응형으로
   이미지가 줄 때 클릭영역만 제자리에 남아 엉뚱한 곳이 눌린다.
   CTA 를 꺼두면 이 요소 자체가 그려지지 않으므로 배너는 그냥 그림이 된다.
   ============================================================ */
.bnr-cta{position:absolute;z-index:3;border-radius:var(--r-sm)}
.bnr-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* 가로 띠 배너 — TALK 목록 상단 / 채널 탐색 상단.
   여기도 높이를 픽셀로 잡지 않는다(위 Hero 머리말과 같은 이유).
   PC 1600×300 · 모바일 1200×420 — data.js 의 권장 규격과 같은 값. */
.strip-bnr{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  aspect-ratio:1200/420;margin:10px 0 2px;border-radius:var(--r-md);background:#15141C}
.strip-bnr .bnr-img img{object-position:50% 50%}
/* 데스크톱부터는 PC 권장 규격(1600×300). 이 한 줄을 위쪽 @media 블록에 두면
   아래 .strip-bnr 기본 규칙이 나중에 나와 덮어버린다 — 규칙 순서가 곧 우선순위다. */
@media (min-width:1024px){ .strip-bnr{aspect-ratio:1600/300} }
/* 어둠막과 글자 — 둘 다 클릭을 받지 않습니다(.hero-copy 와 같은 이유).
   이 둘이 배너를 통째로 덮고 있어, 제목을 넣은 TALK 배너는 CTA 가 아예 안 눌렸습니다. */
.strip-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--scrim),.78) 0%,rgba(var(--scrim),.52) 58%,rgba(var(--scrim),.3) 100%)}
.strip-in{position:relative;z-index:2;padding:0 16px 14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;width:100%;pointer-events:none}
.strip-in b{font-size:14.5px;font-weight:700;letter-spacing:-.035em;color:#fff}
.strip-in span{font-size:12px;color:rgba(255,255,255,.76);letter-spacing:-.02em}
.strip-go{margin-left:auto;color:#fff;opacity:.85;display:inline-flex;align-self:center}

/* ============================================================
   관련 점포 / 관련 브랜드 — 필터 줄과 선택 버튼
   ============================================================ */
.tagbar{display:flex;align-items:center;gap:6px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tagbar::-webkit-scrollbar{display:none}
.tagbar-btn{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;height:32px;padding:0 11px;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-full);
  font-size:12.5px;font-weight:600;color:var(--ink-sub);letter-spacing:-.025em}
.tagbar-btn svg{color:var(--ink-mute)}
.tagbar-btn:hover{border-color:var(--purple-line);color:var(--ink)}
.tagbar-btn.on{background:var(--purple-soft);border-color:var(--purple-line);color:var(--purple-deep)}
.tagbar-btn.on svg{color:var(--purple)}
.tagbar-x{
  display:inline-flex;align-items:center;gap:4px;flex-shrink:0;height:32px;padding:0 10px;
  border-radius:var(--r-full);font-size:12px;font-weight:600;color:var(--ink-mute)}
.tagbar-x:hover{color:var(--red);background:var(--red-soft)}
.tagbar-more{
  margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:2px;
  font-size:12px;font-weight:600;color:var(--purple);letter-spacing:-.02em;white-space:nowrap}
.tagbar-more:hover{text-decoration:underline}

/* 글쓰기·인증 화면의 선택 버튼 — select 가 아니라 검색 오버레이를 연다 */
.tagpick{
  width:100%;display:flex;align-items:center;gap:9px;height:46px;padding:0 13px;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);text-align:left}
.tagpick:hover{border-color:var(--purple-500);background:var(--purple-50)}
.tagpick svg:first-child{color:var(--ink-mute);flex-shrink:0}
.tagpick.on svg:first-child{color:var(--purple)}
.tagpick-v{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink-300);letter-spacing:-.03em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tagpick.on .tagpick-v{color:var(--ink)}
.tagpick-c{flex-shrink:0;display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:600;color:var(--ink-mute)}
.tagpick.on .tagpick-c{color:var(--purple)}

/* ============================================================
   검색형 선택 오버레이 (pickOverlay)
   브랜드·점포는 수백 개로 늘어날 목록이라 스크롤이 아니라 검색으로 고른다.
   ============================================================ */
.pov-bg{align-items:flex-end}
.pov{
  width:100%;max-width:520px;margin:0 auto;background:var(--surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:82vh;display:flex;flex-direction:column;
  animation:sheetUp .24s var(--ease)}
.pov-hd{display:flex;align-items:center;gap:8px;padding:16px 14px 10px 20px;border-bottom:1px solid var(--line-soft)}
.pov-hd b{font-size:15.5px;font-weight:720;letter-spacing:-.03em}
.pov-hd .icon-btn{margin-left:auto}
.pov-search{position:relative;padding:12px 16px 10px}
.pov-search input{
  width:100%;height:42px;padding:0 14px 0 40px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg);font-size:14.5px;font-family:inherit}
.pov-search input:focus{outline:none;background:#fff;border-color:var(--purple-500)}
.pov-search svg{position:absolute;left:29px;top:50%;transform:translateY(-50%);color:var(--ink-mute)}
.pov-list{flex:1;overflow-y:auto;padding:0 8px 8px;-webkit-overflow-scrolling:touch}
.pov-row{
  width:100%;display:flex;align-items:center;gap:8px;padding:12px;border-radius:var(--r-xs);text-align:left}
.pov-row:hover{background:var(--bg-tint)}
.pov-row.on{background:var(--purple-soft)}
.pov-row.on .pov-row-n{color:var(--purple-deep)}
.pov-row svg{margin-left:auto;color:var(--purple);flex-shrink:0}
.pov-row-n{font-size:14.5px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.pov-row-s{font-size:11.5px;color:var(--ink-mute);letter-spacing:-.02em}
.pov-row-clear .pov-row-n{color:var(--ink-mute);font-weight:500}
.pov-empty{padding:34px 16px;text-align:center;color:var(--ink-400);display:flex;flex-direction:column;align-items:center;gap:7px}
.pov-empty svg{color:var(--ink-300)}
.pov-empty b{font-size:14px;font-weight:650;color:var(--ink-500)}
.pov-empty p{font-size:12.5px;margin:0}
.pov-ft{padding:13px 16px 18px;border-top:1px solid var(--line-soft);background:var(--bg)}
.pov-ft-lb{font-size:12px;font-weight:650;color:var(--ink-600);margin-bottom:7px;letter-spacing:-.025em}
.pov-ft-row{display:flex;gap:7px}
.pov-ft-row .input{flex:1;height:38px;font-size:13.5px}
.pov-ft .help{margin-top:6px}

/* ============================================================
   점포별 모아보기
   ============================================================ */
.store-row{
  display:flex;align-items:center;gap:12px;padding:14px 15px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md)}
.store-row:hover{border-color:var(--purple-line);background:var(--purple-50)}
.store-row:hover .store-n{color:var(--purple)}
.store-row > svg{color:var(--ink-mute);flex-shrink:0;margin-left:auto}
.store-ic{
  width:40px;height:40px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;
  background:var(--purple-soft);color:var(--purple)}
.store-main{min-width:0;flex:1;display:flex;flex-direction:column}
.store-n{font-size:14.5px;font-weight:680;letter-spacing:-.035em;color:var(--ink)}
.store-s{font-size:11.5px;color:var(--ink-mute);margin-top:2px;letter-spacing:-.02em}
.store-hd{display:flex;align-items:center;gap:13px;padding:18px 0 14px;border-bottom:1px solid var(--line-soft)}
.store-hd-ic{
  width:48px;height:48px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;
  background:var(--purple-soft);color:var(--purple)}
.store-hd h1{font-family:var(--font-serif);font-size:20px;font-weight:750;letter-spacing:-.04em;color:var(--ink)}
.store-hd p{margin-top:3px;font-size:12.5px;color:var(--ink-sub)}
.store-brands{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:14px}
.store-brands-lb{font-size:11.5px;font-weight:650;color:var(--ink-500);margin-right:2px;letter-spacing:-.02em}
.badge-brand.is-btn{cursor:pointer}
.badge-brand.is-btn:hover{border-color:var(--purple-line);background:var(--purple-soft);color:var(--purple-deep)}
.badge-brand i{font-style:normal;font-weight:700;opacity:.6;margin-left:2px}

/* ============================================================
   1:1 문의
   ============================================================ */
.inq-row{display:block;padding:14px 15px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.inq-row:hover{border-color:var(--purple-line);background:var(--purple-50)}
.inq-row:hover .inq-row-t{color:var(--purple)}
.inq-row-top{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.inq-row-at{margin-left:auto;font-size:11.5px;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.inq-row-t{margin-top:8px;font-size:14.5px;font-weight:680;letter-spacing:-.035em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inq-row-b{margin-top:4px;font-size:12.5px;color:var(--ink-sub);letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inq-row-a{margin-top:8px;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:650;color:var(--purple)}
.inq-files{margin-top:12px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-sub)}
.inq-files svg{color:var(--ink-mute)}
.inq-answer{margin-top:18px;padding:16px;background:var(--purple-50);border:1px solid var(--purple-100);border-radius:var(--r-md)}
.inq-answer-hd{display:flex;align-items:center;gap:10px}
.inq-answer-hd b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.03em;color:var(--purple-deep)}
.inq-answer-hd span{display:block;font-size:11.5px;color:var(--ink-mute);margin-top:1px}
.inq-answer-b{margin-top:12px;font-size:14px;line-height:1.7;color:var(--ink-700);white-space:pre-wrap;letter-spacing:-.018em}

/* ============================================================
   약관 버전 · 재동의
   ============================================================ */
.consent-bar{
  display:flex;align-items:center;gap:9px;margin-top:12px;padding:11px 13px;
  background:#FFF9EC;border:1px solid #FAE8C0;border-radius:var(--r-sm);
  font-size:12.5px;color:#8A6410;letter-spacing:-.025em;line-height:1.45}
.consent-bar svg:first-child{flex-shrink:0;color:var(--amber)}
.consent-bar span{flex:1;min-width:0}
.consent-bar b{font-weight:700}
.consent-bar svg:last-child{flex-shrink:0;opacity:.65}
.consent-bar:hover{background:#FEF4DE}
.consent-bar.is-soon{background:var(--purple-50);border-color:var(--purple-100);color:var(--purple-deep)}
.consent-bar.is-soon svg:first-child{color:var(--purple)}
.consent-bar.is-soon:hover{background:var(--purple-soft)}

.term-card{margin-top:14px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.term-card-hd{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.term-card-hd b{font-size:15.5px;font-weight:720;letter-spacing:-.035em}
.term-diff{margin-top:12px;padding:12px 13px;background:var(--purple-50);border:1px solid var(--purple-100);
  border-radius:var(--r-xs);font-size:13.5px;line-height:1.6;color:var(--ink-700);letter-spacing:-.02em}
.term-diff-lb{display:block;font-size:11px;font-weight:700;color:var(--purple);margin-bottom:4px;letter-spacing:.02em}
.term-rows{margin-top:10px;display:flex;flex-direction:column}
.term-row{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.term-row:last-child{border-bottom:0}
.term-row span{flex:0 0 84px;color:var(--ink-mute);font-weight:600;font-size:12px}
.term-row b{flex:1;min-width:0;font-weight:650;color:var(--ink-700);letter-spacing:-.02em}
.term-hist{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.term-hist-lb{font-size:11.5px;font-weight:700;color:var(--ink-500);margin-bottom:7px;letter-spacing:-.02em}
.term-ver{
  width:100%;display:grid;grid-template-columns:46px 1fr;gap:2px 10px;padding:10px;text-align:left;
  border-radius:var(--r-xs);border:1px solid var(--line-soft);margin-bottom:6px;background:var(--bg)}
.term-ver:hover{border-color:var(--purple-line);background:var(--purple-50)}
.term-ver.active{border-color:var(--purple-line);background:var(--purple-50)}
.term-ver.past{opacity:.72}
.term-ver-v{grid-row:span 2;display:grid;place-items:center;font-size:12px;font-weight:750;
  color:var(--purple-deep);background:#fff;border:1px solid var(--purple-line);border-radius:7px}
.term-ver.past .term-ver-v{color:var(--ink-500);border-color:var(--line);background:#fff}
.term-ver-s{font-size:13px;font-weight:600;color:var(--ink-700);letter-spacing:-.025em;line-height:1.45}
.term-ver-m{font-size:11px;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.term-ver-m b{color:var(--purple);font-weight:700}
.tver{
  font-style:normal;font-size:11px;font-weight:700;color:var(--purple-deep);
  background:var(--purple-soft);border:1px solid var(--purple-line);border-radius:5px;padding:0 4px;
  vertical-align:1px}

@media (min-width:768px){
  .strip-in b{font-size:16px}
  .pov-bg{align-items:center}
  .pov{border-radius:var(--r-lg);max-height:76vh}
}

/* ====================== 근무이력 (명세 1항) ======================
   인증이 쌓인 줄을 그대로 보여주는 목록입니다. 왼쪽 점과 세로선으로
   "위가 최근" 이라는 순서를 눈으로 알게 합니다 — 날짜를 읽지 않아도
   어느 쪽이 지금인지 보여야 합니다. */
.career-sum{
  margin-left:auto;font-size:12px;font-weight:600;color:var(--purple-800);
  letter-spacing:-.02em;white-space:nowrap;
}
.career-list{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,14px);
  overflow:hidden;
}
.career{
  display:flex;align-items:flex-start;gap:11px;padding:14px 16px;position:relative;
}
/* 줄 사이에 구분선을 넣지 않습니다. 대신 점과 점을 선으로 잇습니다 —
   구분선과 세로선이 겹치면 선이 끊긴 것처럼 보입니다(실제로 그렇게 나왔습니다).
   dot 중심은 padding-top 14 + margin-top 5 + 4.5 = 23.5px 입니다. */
.career-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:5px;
  background:var(--purple-800);box-shadow:0 0 0 3px var(--purple-100);
}
.career:not(:first-child) .career-dot{background:var(--ink-300);box-shadow:0 0 0 3px var(--bg-tint)}
.career:not(:last-child)::after{
  content:'';position:absolute;left:20.25px;top:30px;bottom:-19px;width:1.5px;
  background:var(--line);
}
.career-main{min-width:0;flex:1}
.career-t{
  font-size:14.5px;font-weight:700;color:var(--ink-900);letter-spacing:-.025em;
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
}
.career-s{margin-top:3px;font-size:12.5px;color:var(--ink-500);letter-spacing:-.02em}
.career-tag{
  font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:5px;letter-spacing:0;
  background:var(--purple-100);color:var(--purple-800);
}
.career-tag.pend{background:#FDF2DA;color:#8A6410}
.career-tag.mgr{background:#2F4858;color:#CFE6F5}
.career-ym{text-align:right;flex-shrink:0}
.career-ym b{
  display:block;font-size:12.5px;font-weight:650;color:var(--ink-700);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap;
}
.career-ym span{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-400)}
.career.is-pending{background:#FFFCF5}

/* 근무기간 입력 — 시작/종료 연월 두 칸. 숫자만 치면 되게 가운데 정렬·고정폭 숫자 */
.ym-row{display:flex;align-items:center;gap:9px}
.ym-row .input{flex:1;min-width:0;text-align:center;font-variant-numeric:tabular-nums}
.ym-row .input:disabled{background:var(--bg-tint);color:var(--ink-300);cursor:not-allowed}
.ym-sep{flex-shrink:0;color:var(--ink-300);font-size:14px;font-weight:600}

/* 바텀시트에 두 줄짜리 항목(근무이력)이 들어갑니다 — 한 줄 항목은 영향받지 않습니다 */
.sheet-item span{white-space:pre-line;line-height:1.5}

@media (max-width:420px){
  .career{padding:13px 14px}
  .career-ym b{font-size:12px}
}