/* =========================================================================
   오늘의 꽃 커뮤니티 (today-flower / 꽃향) — 디자인 시스템 v2
   "손으로 그린 사랑방" — 박스·아이콘칩·글로우를 걷어내고
   수채 일러스트가 종이에 스며들게(multiply), 여백·헤어라인으로 구분.
   팔레트/타이포/히어로/보이스는 유지. (de-AI 재작성)
   ========================================================================= */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Jua&display=swap");

:root {
  /* 베이스 */
  --cream:        #FBF3E4;
  --cream-2:      #F6EAD2;
  --card:         #FFFDF8;
  --white:        #FFFFFF;

  /* 주조 스카이블루 */
  --sky:          #97C3EA;
  --sky-2:        #B9D8F2;
  --sky-deep:     #5E97C9;
  --sky-ink:      #355E84;

  /* 포인트 */
  --rose:         #A73E38;
  --rose-2:       #C2615A;
  --cosmos:       #FF7DA9;
  --cosmos-soft:  #FFC0D5;
  --gold:         #F2C84A;
  --gold-deep:    #D9A92E;

  /* 전통 앵커 */
  --navy:         #303751;
  /* 대면적 배경 전용 — 한옥 목재 톤의 웜 다크(먹+나무). 띠/푸터/결과패널 배경에만 쓴다.
     텍스트·헤딩용 --navy 는 그대로. (이전 #393246 은 따뜻해지지 않고 보라로 읽혀 교체) */
  --wood-ink:     #4A3F35;
  --maroon:       #7A2E2A;
  --wood:         #967159;
  --wood-dark:    #634F37;

  /* 텍스트 */
  --ink:          #332F36;
  --ink-2:        #6B635C;
  --ink-3:        #9A9089;

  /* 라인/유틸 */
  --line:         #E3D6BC;
  --line-2:       #EFE4CF;

  /* 라운드 — 역할별로 분리 (단일 18px 균일 금지) */
  --r-input: 9px;          /* 입력 필드 */
  --r-card:  16px;         /* 콘텐츠 표면(폼/글) */
  --r-story: 22px 10px 24px 12px;  /* 손으로 자른 듯한 비대칭 — 히어로/특수 패널 */

  /* 그림자 — wood/navy 톤, 아껴 사용. 가장자리 OR 그림자, 둘 다 금지 */
  --sh-sm: 0 2px 10px rgba(99, 79, 55, .08);
  --sh:    0 14px 34px rgba(99, 79, 55, .14);

  --maxw: 1180px;
  --gut: clamp(18px, 4vw, 40px);

  --font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  --hand: "Gaegu", var(--font);
  --round: "Jua", var(--font);
}

/* ----- 리셋 ----- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--cream);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
  /* 짧은 페이지에서도 푸터가 화면 바닥에 닿도록 (크림 띠 차단) */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* 봄날 햇살 워시 2겹 + 종이 결 1겹. 결은 검은 입자를 노이즈 알파로 뿌려(평균 ~4%·정점 ~8%)
     1x 에선 은은하고 확대하면 종이 결이 실제로 보인다(이전 soft-light 노이즈는 렌더 0이었음).
     자체 배경을 가진 요소(카드/푸터/밴드)는 위에 칠해지므로 결이 비치지 않음. */
  background-image:
    radial-gradient(1100px 520px at 88% -8%, rgba(151, 195, 234, .26), transparent 60%),
    radial-gradient(800px 480px at -6% 4%, rgba(255, 192, 213, .18), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  /* 결(3번째 레이어)은 종이에 붙어 같이 스크롤 — 화면 고정이면 필터처럼 읽힘 */
  background-attachment: fixed, fixed, scroll;
  background-blend-mode: normal, normal, normal;
}
main { flex: 1 0 auto; width: 100%; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.22; font-weight: 800; color: var(--navy); letter-spacing: -.01em; text-wrap: balance; }
::selection { background: var(--cosmos-soft); color: var(--maroon); }

/* ----- 레이아웃 유틸 ----- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(48px, 8vw, 96px); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

/* 작은 머리표 — 분홍 알약+이모지 대신, 손그림 꽃 마크 + 소문자 라벨 */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: .8rem; letter-spacing: .06em;
  color: var(--rose); text-transform: none;
}
.eyebrow::before {
  content: ""; width: 1.15em; height: 1.15em; flex-shrink: 0;
  background: url(/assets/mark-blossom.svg) center/contain no-repeat;
}

.h-display {
  font-size: clamp(2rem, 6.4vw, 3.7rem);
  line-height: 1.12;
  color: var(--navy);
}
.lead { font-size: clamp(1.02rem, 2.4vw, 1.22rem); color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: .88rem; }

/* 통통 라운드 디스플레이 — 히어로 전용 */
.h-round {
  font-family: var(--round);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.22;
}

/* 페이지 들머리 제목 — 히어로(.h-display)보다 한 체급 작은 소개형 머리.
   guide/가입은 이 기본 체급, 소개(about)는 --soft 로 더 성기게. */
.h-intro {
  font-size: clamp(1.8rem, 5vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--navy);
}
.h-intro--soft { font-weight: 700; font-size: clamp(1.68rem, 4.6vw, 2.5rem); }

/* 손글씨 곁말 — 시스템 숫자가 아닌 사람 목소리에만, 자리마다 크기·기울기 달리 */
.hand-note {
  font-family: var(--hand);
  font-weight: 700;
  color: var(--ink-2);
  line-height: 1.4;
}

/* ----- 버튼 — 로즈 채움 유지, 글로우 제거 ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 26px;
  border-radius: var(--r-card); border: 0;
  font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-align: center; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/* 주 CTA만 알약 유지 — 사이트에서 100% 균일하던 알약을 이 한 갈래로 좁힘 */
.btn--primary { background: var(--rose); color: #fff; border-radius: 999px; box-shadow: 0 2px 8px rgba(122, 46, 42, .2); }
.btn--primary:hover { background: #97352F; box-shadow: 0 4px 14px rgba(122, 46, 42, .26); }
.btn--sky { background: var(--sky-deep); color: #fff; box-shadow: 0 2px 8px rgba(53, 94, 132, .2); }
.btn--sky:hover { background: #4F86B8; }
.btn--ghost { background: var(--white); color: var(--navy); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--sky); color: var(--sky-ink); }
.btn--lg { min-height: 56px; padding: 0 32px; font-size: 1.06rem; }
.btn--block { width: 100%; }

/* 화살표 링크 — 보조 행동(버튼 글로우 대신 텍스트 링크) */
.link-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--rose); }
.link-go::after { content: "→"; transition: transform .15s; }
.link-go:hover::after { transform: translateX(4px); }

/* ----- 카드 — 가장자리(헤어라인)만, 그림자는 hover 때만 ----- */
.card {
  background: var(--card);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-card);
  padding: clamp(20px, 3.4vw, 30px);
}
.card--lift { transition: transform .2s ease, box-shadow .2s ease; }
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--sh); }

/* 메타 태그 칩 (등급·가입비 등) — 진짜 칩이라 알약 유지 */
.pill {
  display: inline-block; font-weight: 700; font-size: .76rem;
  padding: 4px 11px; border-radius: var(--r-input);
  background: rgba(151, 195, 234, .26); color: var(--sky-ink);
}
.pill--gold { background: rgba(242, 200, 74, .26); color: var(--gold-deep); }
.pill--rose { background: rgba(255, 192, 213, .4); color: var(--rose); }

/* =========================================================================
   헤더 / 네비 — 불투명 종이 바 (글래스/blur 제거)
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(99, 79, 55, .04);
}
.nav { display: flex; align-items: center; gap: 16px; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: var(--navy); font-size: 1.12rem; white-space: nowrap; }
.brand__mark { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.brand__tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .03em;
  color: var(--wood); border: 1.2px solid var(--line);
  padding: 2px 7px; border-radius: 7px 3px 6px 3px; background: var(--white);
  white-space: nowrap;
}
.nav__links { display: none; margin-left: auto; align-items: center; gap: 4px; }
.nav__links a {
  padding: 9px 14px; border-radius: 10px; font-weight: 700; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.nav__links a:hover { background: var(--white); color: var(--navy); }
.nav__links a.is-active { color: var(--rose); }
.nav__links a.is-active::after {
  content: ""; display: block; height: 2px; border-radius: 2px;
  background: var(--cosmos); margin-top: 3px;
}
.nav__toggle {
  margin-left: auto; width: 46px; height: 46px; border-radius: 11px;
  background: var(--white); border: 1.5px solid var(--line); display: grid; place-items: center;
  cursor: pointer;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--navy); border-radius: 2px; position: relative;
}
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after { position: absolute; top: 6px; }

.nav__drawer {
  display: none; flex-direction: column; gap: 2px;
  padding: 8px var(--gut) 18px;
  border-bottom: 1px solid var(--line); background: var(--cream);
}
.nav__drawer.is-open { display: flex; }
.nav__drawer a { padding: 13px 12px; border-radius: 11px; font-weight: 700; color: var(--navy); }
.nav__drawer a:hover { background: var(--white); }
.nav__drawer a.is-active { color: var(--rose); background: var(--white); }

/* 전역 계정 바 — 헤더 우상단(데스크탑은 링크 뒤, 모바일은 토글 앞). 로그인 상태가 모든 페이지에서 보인다. */
.acct { margin-left: auto; position: relative; display: inline-flex; align-items: center; min-width: 0; }
.nav__links + .acct { margin-left: 10px; }
.acct-login {
  font: inherit; font-weight: 700; font-size: .9rem; color: var(--navy);
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 16px; cursor: pointer; white-space: nowrap; line-height: 1;
}
.acct-login:hover { border-color: var(--rose); color: var(--rose); }
.acct-chip {
  font: inherit; font-weight: 700; color: var(--navy); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; max-width: 190px; min-width: 0;
  background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 5px 11px 5px 5px;
}
.acct-chip:hover, .acct.is-open .acct-chip { background: var(--white); }
/* 낙관 힌트 칩 — me() 보정 전 비활성 시각 자리표시(클릭 동작 없음) */
.acct-chip.is-hint { cursor: default; opacity: .9; }
.acct-ini {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--rose); color: #fff;
  font-weight: 800; font-size: .9rem; line-height: 1;
}
.acct-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 116px; font-size: .92rem; }
.acct-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 172px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--sh); padding: 6px; display: none; z-index: 60;
}
.acct.is-open .acct-menu { display: block; }
.acct-item {
  display: block; width: 100%; text-align: left; font: inherit; font-weight: 600; font-size: .94rem;
  color: var(--navy); background: transparent; border: 0; border-radius: 9px; padding: 10px 12px; cursor: pointer;
}
.acct-item:hover { background: var(--cream); }
.acct-item--danger { color: var(--rose); }
.acct-item--danger:hover { background: rgba(167, 62, 56, .08); }
.acct-sep { height: 1px; background: var(--line); margin: 5px 6px; }

/* 모바일: 헤더 과밀 해소 — 비공식 팬 태그는 드로어로 위임 */
@media (max-width: 859.98px) {
  .brand__tag { display: none; }
  .acct-nm { max-width: 84px; }
}
/* 좁은 폰: 닉 텍스트는 접고 머리글자 칩만 — 로그인 신호는 유지하되 브랜드+토글과 한 줄 충돌 방지 */
@media (max-width: 480px) {
  .acct-chip { padding: 5px; gap: 0; }
  .acct-nm { display: none; }
}
@media (min-width: 860px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .nav__drawer { display: none !important; }
}

/* =========================================================================
   허브 히어로 — 들판 사진 전면 bleed. 4면 모두 화면 끝까지, 액자·라운드·그림자 0.
   텍스트는 사진 위 좌하단, 남색 스크림으로 대비 확보.
   ========================================================================= */
.hero-photo { position: relative; overflow: hidden; background: var(--navy); }
.hero-photo__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
.hero-photo__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(193deg, rgba(48, 55, 81, 0) 34%, rgba(48, 55, 81, .62) 92%),
    linear-gradient(90deg, rgba(48, 55, 81, .30), rgba(48, 55, 81, 0) 68%);
}
.hero-photo__content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  min-height: clamp(430px, 62vh, 660px);
  padding-block: clamp(36px, 6vw, 72px);
}
.hero-photo__kicker {
  display: inline-block; margin-bottom: 14px;
  font-weight: 700; font-size: clamp(.82rem, 1.8vw, .94rem); letter-spacing: .01em;
  color: #fff; background: rgba(48, 55, 81, .42); border: 1px solid rgba(255, 255, 255, .28);
  padding: 6px 13px; border-radius: 999px; backdrop-filter: blur(3px);
  text-shadow: 0 1px 10px rgba(48, 55, 81, .5);
}
.hero-photo h1 {
  font-size: clamp(2.05rem, 5.6vw, 3.4rem);
  color: #fff;
  text-shadow: 0 2px 26px rgba(48, 55, 81, .6);
}
.hero-photo__lead {
  margin-top: 14px; max-width: 530px;
  font-size: clamp(1rem, 2.2vw, 1.14rem); line-height: 1.7;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 14px rgba(48, 55, 81, .55);
}
.hero-photo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 26px; }
.link-go--light { color: #fff; text-shadow: 0 1px 10px rgba(48, 55, 81, .55); }
/* 초광폭(1536+): 사진이 밝은 꽃밭으로 넓어져 리드가 워시아웃 →
   하단 스크림을 뷰포트 모양과 무관한 0deg 그라데로 강화 + 리드 음영 보강 */
@media (min-width: 1536px) {
  .hero-photo__scrim {
    background:
      linear-gradient(0deg, rgba(48, 55, 81, .62) 0%, rgba(48, 55, 81, .36) 28%, rgba(48, 55, 81, 0) 58%),
      linear-gradient(90deg, rgba(48, 55, 81, .32), rgba(48, 55, 81, .16) 46%, rgba(48, 55, 81, 0) 72%);
  }
  .hero-photo__lead { text-shadow: 0 1px 18px rgba(48, 55, 81, .75), 0 0 2px rgba(48, 55, 81, .4); }
}

/* =========================================================================
   상회 히어로 — 손글씨 문패 + 사진이 종이로 번져 들어옴.
   그라데 머리·버튼 쌍·칩 없음. 사진은 4면이 크림으로 풀어지는 마스크.
   ========================================================================= */
.hero-plate { overflow: hidden; }
.hero-plate__grid {
  display: grid; gap: clamp(8px, 3vw, 40px); align-items: center;
  padding-block: clamp(26px, 4.6vw, 58px);
}
@media (min-width: 880px) { .hero-plate__grid { grid-template-columns: 1.04fr .96fr; } }
.hero-plate__name {
  font-family: var(--hand); font-weight: 700; color: var(--maroon);
  font-size: clamp(3.1rem, 9vw, 5.4rem); line-height: 1.04; letter-spacing: .01em;
}
.hero-plate__name .hanja { font-size: .4em; color: var(--rose-2); margin-left: .2em; letter-spacing: .08em; }
.hero-plate__sub { margin-top: 12px; font-weight: 700; color: var(--sky-ink); }
.hero-plate__text .lead { margin-top: 16px; max-width: 480px; }
.hero-plate__links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; }
.hero-plate__photo img {
  width: 100%; height: auto;
  aspect-ratio: 10 / 9; object-fit: cover; object-position: center 42%;
  /* closest-side = 반경이 가장 가까운 변까지 → 네 변 모두에서 알파 0 도달 (사각 윤곽 차단)
     안쪽 유지 반경 62% — 코스모스 본체를 창백하게 만들지 않으면서 가장자리만 풀어짐 */
  -webkit-mask-image: radial-gradient(closest-side at 51% 49%, #000 62%, transparent 97%);
  mask-image: radial-gradient(closest-side at 51% 49%, #000 62%, transparent 97%);
}
@media (max-width: 879.98px) { .hero-plate__photo { max-width: 440px; margin-inline: auto; } }

/* ----- 리그 스트립 (진급/유지/강등) — 남색 띠 ----- */
.league-strip { background: var(--wood-ink); color: #fff; }
.league-strip .wrap { padding-block: clamp(34px, 6vw, 56px); }
.league-strip h2 { color: #fff; }
.league-strip .muted { color: rgba(255,255,255,.72); }
/* 균일 외곽선 박스 3개 → 박스 chrome 제거, 헤어라인 분리 + 폭 비대칭.
   손글씨 숫자·색 차등은 유지. */
.league-flow { display: grid; gap: 0; margin-top: 26px; grid-template-columns: 1fr; }
.lf {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.lf:last-child { border-bottom: 0; }
/* 순위 컷 = 시스템 데이터 → 손글씨에서 회수, 통통 디스플레이(Jua)로 또박또박 */
.lf__rank { font-family: var(--round); font-weight: 400; font-size: 2.3rem; line-height: 1; min-width: 66px; text-align: center; white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.lf__t { font-weight: 700; }
.lf__d { font-size: .86rem; color: rgba(255,255,255,.7); }
.lf--up .lf__rank { color: var(--gold); }
.lf--hold .lf__rank { color: var(--sky-2); }
.lf--down .lf__rank { color: var(--cosmos); }
@media (min-width: 760px) {
  .league-flow { grid-template-columns: 1.15fr 1fr 1fr; }
  .lf { border-bottom: 0; padding: 8px 24px; }
  .lf + .lf { border-left: 1px solid rgba(255,255,255,.16); }
  .lf:first-child { padding-left: 4px; }
}

/* =========================================================================
   특징 묶음 — 박스 없는 손배치 흐름 (3-card 그리드 해체)
   .feat 는 크림 종이 위에 그대로 앉고, 일러스트는 multiply 로 스며든다.
   ========================================================================= */
.feature-grid { display: grid; gap: clamp(26px, 4vw, 46px); grid-template-columns: 1fr; margin-top: 34px; align-items: start; }
.feat { display: flex; flex-direction: column; align-items: flex-start; }
/* 수채 spot — 컨테이너/박스/그림자 0, 흰 배경은 multiply 로 크림에 녹음.
   각도·크기·기준선·hover 반응은 nth-child 의사난수 공식이 아니라,
   각 페이지에서 spot 마다 인라인 변수로 직접 지정한다(규칙 없음 = 손으로 놓은 느낌).
   변수를 안 준 spot 은 어긋남 0(가만히). */
.feat__spot {
  /* 높이 변수는 --sp-h — 그림자 토큰 --sh 와 이름이 겹치면 안 됨(상속 충돌로 height 폭주) */
  width: auto; height: var(--sp-h, clamp(86px, 10vw, 116px));
  object-fit: contain; align-self: flex-start;
  mix-blend-mode: multiply;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  transform: rotate(var(--sr, 0deg)) translate(var(--sx, 0px), calc(var(--sy, 0px) + var(--shl, 0px))) scale(var(--ss, 1));
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
/* hover 도 인스턴스별 — --shs(없으면 1=무동작), --shy(없으면 0=안 뜸) */
.feat:hover .feat__spot { --ss: var(--shs, 1); --shl: var(--shy, 0px); }
.feat h3 { margin-top: 14px; font-size: 1.28rem; }
.feat p { margin-top: 8px; color: var(--ink-2); font-size: .96rem; }
/* 화살표 nudge 대신 손글씨 밑줄이 자라남 */
.feat__go {
  margin-top: 16px; font-weight: 700; color: var(--rose);
  background-image: linear-gradient(transparent 60%, rgba(255, 125, 169, .5) 0);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 100%;
  transition: background-size .35s ease;
}
.feat:hover .feat__go { background-size: 100% 100%; }
/* 데스크탑: 살짝 어긋난 트랙 + 행 stagger = 게시판에 핀으로 꽂은 느낌.
   stagger 오프셋은 페이지마다 다르게 인라인 --feat-mt 로 (3p 동일 복제 폐기). */
@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: 1.12fr 1fr 1fr; }
  .feature-grid .feat { margin-top: var(--feat-mt, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .feat__spot { transition: none; }
}

/* ----- 섹션 헤더 ----- */
.sec-head { max-width: 640px; }
.sec-head.center { margin-inline: auto; }
.sec-head h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.sec-head p { margin-top: 12px; color: var(--ink-2); }

/* ----- 밴드 (옅은 베이지 띠) ----- */
.band { background: var(--cream-2); border-block: 1px solid var(--line); }

/* 밀집 구간 (데이터·리스트) — 소개 구간과 호흡을 다르게 */
.section--tight { padding-block: clamp(26px, 4.6vw, 52px); }

/* 본문 빛 깊이 — 차가운 플랫 시트에 오후 햇살 한 줄기 고이게.
   문서형(약관/방침)·게시판형(공지/게시판)엔 쓰지 않는다(빈 상태 연출 금지).
   주의: 섹션 자체 background 로만 구현 — isolation/::before(z-index:-1) 방식은
   스태킹 격리로 .feat__spot 의 multiply 스며듦을 끊어 흰 박스가 노출된다. */
.section--glow {
  background:
    radial-gradient(56% 72% at 84% 2%, rgba(242, 200, 74, .24), transparent 60%),
    radial-gradient(44% 60% at 4% 98%, rgba(255, 125, 169, .17), transparent 62%);
}

/* 디렉터리에 등재 상회가 1곳일 때 — 3-컬럼 빈칸 대신 풀폭 가로 쇼케이스 */
.guild-showcase { display: grid; gap: clamp(18px, 3.4vw, 44px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 760px) { .guild-showcase { grid-template-columns: minmax(150px, .62fr) 1.38fr; } }
.guild-showcase__spot { height: clamp(118px, 17vw, 194px); mix-blend-mode: multiply; }
.guild-showcase__name {
  font-size: clamp(1.7rem, 4.4vw, 2.4rem); color: var(--navy);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
}
.guild-showcase__name .hanja { font-size: .5em; color: var(--rose-2); letter-spacing: .06em; }
.guild-showcase__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }

/* ----- 페이지 제목줄 — 그라데 머리 없이 본문 직진 (공지/게시판/계산기/디렉터리) ----- */
.page-bar { border-bottom: 1px solid var(--line); }
.page-bar .wrap {
  padding-block: clamp(20px, 3.4vw, 32px);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
}
.page-bar h1 { font-size: clamp(1.45rem, 3.6vw, 1.9rem); }
.page-bar__note { color: var(--ink-2); font-size: .92rem; }
.page-bar__meta { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 759.98px) { .page-bar__meta { margin-left: 0; } }

/* ----- 상회 현황 — 손글씨 숫자 + 헤어라인 (박스 0) ----- */
.stat-strip { display: flex; flex-wrap: wrap; gap: 14px 0; border-block: 1px solid var(--line); padding-block: 16px; }
.stat { padding-right: clamp(18px, 3vw, 34px); margin-right: clamp(18px, 3vw, 34px); border-right: 1px solid var(--line-2); }
.stat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
/* 현황 수치 = 시스템 데이터 → 본문 폰트로 회수 (값은 그대로, 폰트만) */
.stat__v { font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.1; color: var(--maroon); letter-spacing: -.01em; }
.stat__k { font-size: .82rem; color: var(--ink-2); margin-top: 2px; }

/* ----- 인게임 캡처 (주입식 슬롯 — 마크업이 없으면 아무것도 렌더되지 않음) ----- */
.snaps { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; }
.snaps figure { margin: 0; }
.snaps img { width: min(340px, 100%); height: auto; border-radius: var(--r-input); border: 1px solid var(--line); }
.snaps figcaption { font-size: .82rem; color: var(--ink-2); margin-top: 6px; }

/* ----- 번호 차례 (순차 단계) — 박스 대신 큰 손글씨 숫자 + 헤어라인 ----- */
.steps { list-style: none; margin: 30px 0 0; padding: 0; max-width: 48rem; counter-reset: step; }
.steps li {
  counter-increment: step; position: relative;
  padding: 20px 0 20px 66px; border-bottom: 1px solid var(--line);
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(step); position: absolute; left: 4px; top: 12px;
  font-family: var(--hand); font-weight: 700; font-size: 2.7rem; line-height: 1; color: var(--cosmos);
}
.steps b { color: var(--navy); font-size: 1.05rem; }
.steps p { margin-top: 4px; }

/* ----- 메모 묶음 (비순차) — 박스 대신 꽃 글머리 + 헤어라인 ----- */
.notes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; }
.notes.cols { gap: 0 36px; }
@media (min-width: 760px) { .notes.cols { grid-template-columns: 1fr 1fr; } }
.notes li {
  position: relative; padding: 18px 0 18px 32px;
  border-bottom: 1px solid var(--line);
}
.notes li::before {
  content: ""; position: absolute; left: 0; top: 20px;
  width: 19px; height: 19px;
  background: url(/assets/mark-blossom.svg) center/contain no-repeat;
}
.notes b { color: var(--navy); }
.notes p { margin-top: 4px; }

/* ----- CTA 밴드 (스카이 그라데 — 동계열, 유지) ----- */
.cta-band { background: linear-gradient(160deg, var(--sky-deep), var(--sky-ink)); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band .muted { color: rgba(255,255,255,.95); } /* sky 그라데 위 AA 대비 확보(.82=3.3:1 미달) */
.cta-band .wrap { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; padding-block: clamp(40px, 7vw, 72px); }
@media (min-width: 760px) {
  .cta-band .wrap { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* =========================================================================
   푸터
   ========================================================================= */
.site-footer { background: var(--wood-ink); color: rgba(255,255,255,.78); padding-block: 44px; }
.site-footer a { color: rgba(255,255,255,.9); }
.site-footer a:hover { color: var(--gold); }
.foot-top { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-start; justify-content: space-between; }
.foot-brand { font-weight: 700; color: #fff; font-size: 1.06rem; display: inline-flex; gap: 8px; align-items: center; }
.foot-brand img { width: 1.4rem; height: 1.4rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 14px 20px; font-weight: 600; }
.foot-disclaim {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .82rem; color: rgba(255,255,255,.6); line-height: 1.7;
}

/* =========================================================================
   계산기
   ========================================================================= */
.calc-head { background: linear-gradient(180deg, var(--sky-2), var(--cream)); border-bottom: 1px solid var(--line); }
.calc-head .wrap { padding-block: clamp(32px, 6vw, 56px); }
.calc-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }

.calc-layout { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 920px) { .calc-layout { grid-template-columns: 1fr 340px; } }
/* align-self:stretch = 결과 칼럼을 그리드 행 높이(긴 임무 목록)에 맞춤 →
   참고·더보기를 칼럼 밖으로 뺀 뒤에도 sticky 결과 패널이 스크롤 범위를 갖게 함 */
.calc-side { display: flex; flex-direction: column; gap: 14px; align-self: stretch; }
.calc-side .calc-disclaimer { margin-top: 0; }
/* 참고·더보기 = grid(입력+sticky결과) 아래 분리 영역. sticky 패널이 덮지 않음. */
.calc-foot { max-width: 760px; margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.calc-foot .calc-disclaimer { margin-top: 0; }
/* 데스크탑 2컬럼에선 좌측 입력 컬럼(1fr of `1fr 340px`, gap 22 = 100%-362px)에 폭을 맞춰
   '점수 목록' 위와 정렬(참고·더보기가 더 넓게 삐져나오던 어긋남 해소). */
@media (min-width: 920px) {
  .calc-foot { max-width: calc(100% - 362px); }
}

.mission-list { display: flex; flex-direction: column; gap: 10px; }
.mrow {
  display: grid; grid-template-columns: 1fr auto; gap: 12px 14px; align-items: center;
  background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r-input);
  padding: 14px 16px; transition: border-color .15s, box-shadow .15s;
}
.mrow:focus-within { border-color: var(--sky); box-shadow: var(--sh-sm); }
.mrow__main { min-width: 0; }
.mrow__label { font-weight: 700; color: var(--navy); }
.mrow__sub { font-size: .82rem; color: var(--ink-2); margin-top: 2px; }
.mrow__pts { font-weight: 700; color: var(--rose); white-space: nowrap; }
.mrow__ctrl { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.stepper {
  display: inline-flex; align-items: center; background: var(--cream);
  border: 1.5px solid var(--line); border-radius: var(--r-input); overflow: hidden;
}
.stepper button {
  width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer;
  font-size: 1.3rem; font-weight: 700; color: var(--sky-ink); line-height: 1;
}
.stepper button:hover { background: var(--white); }
.stepper input {
  width: 46px; height: 40px; text-align: center; border: 0; background: transparent;
  font-weight: 700; font-size: 1.02rem; color: var(--navy); -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

.calc-result {
  background: var(--wood-ink); color: #fff; border-radius: var(--r-story);
  padding: 26px 24px; box-shadow: var(--sh);
}
/* sticky 결과 패널은 2컬럼(데스크탑)에서만. 모바일(단일 컬럼)은 자연 흐름.
   내부 스크롤(max-height + overflow-y)은 제거 — 참고·더보기(.calc-foot)는 이미 grid
   밖 하단으로 분리돼 있어, 컨테이닝 블록(.calc-side)을 벗어날 수 없는 sticky 패널이
   덮을 수 없다. 따라서 뷰포트 상한이 불필요하고, 패널은 콘텐츠 높이 그대로 흐른다. */
@media (min-width: 920px) {
  .calc-result {
    position: sticky; top: 84px;
  }
}
.calc-result h3 { color: #fff; font-size: 1.05rem; }
/* 큰 점수는 Jua(또박또박 라운드) — Gaegu 의 '0' 은 금색 고리/알파벳 O 로 오독되고
   tabular-nums 피처도 없어 무효였음. 결과 패널의 나머지 숫자는 본문 폰트로 통일 */
.score-big { font-family: var(--round); font-size: 4rem; line-height: 1; color: var(--gold); margin-top: 6px; }
.score-big small { font-family: var(--font); font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,.8); margin-left: 4px; }
.res-divider { height: 1px; background: rgba(255,255,255,.16); margin: 20px 0; }
.res-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; }
.res-line .k { color: rgba(255,255,255,.72); font-size: .92rem; }
.res-line .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.res-tier { font-weight: 700; font-size: 1.5rem; color: var(--sky-2); font-variant-numeric: tabular-nums; }
.res-cut .v { color: var(--gold); }
.res-hint { margin-top: 16px; font-size: .8rem; color: rgba(255,255,255,.55); line-height: 1.6; }
.guild-toggle { margin-top: 18px; }
.guild-toggle summary {
  cursor: pointer; font-weight: 700; color: var(--sky-2); list-style: none; padding: 6px 0;
  display: flex; align-items: center; gap: 8px;
}
.guild-toggle summary::-webkit-details-marker { display: none; }
.guild-toggle summary::before {
  content: ""; width: 0; height: 0; flex-shrink: 0;
  border-left: 6px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform .2s ease;
}
.guild-toggle[open] summary::before { transform: rotate(90deg); }
.guild-fields { margin-top: 12px; display: grid; gap: 10px; }
.guild-fields label { font-size: .85rem; color: rgba(255,255,255,.75); display: grid; gap: 5px; }
.guild-fields input {
  height: 42px; border-radius: var(--r-input); border: 1.5px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: #fff; padding: 0 12px; font-weight: 700;
}

.calc-disclaimer {
  margin-top: 22px; background: rgba(242, 200, 74, .14); border: 1.5px solid rgba(242,200,74,.4);
  border-radius: var(--r-input); padding: 14px 16px; font-size: .88rem; color: var(--wood-dark);
}
.calc-disclaimer b { color: var(--wood-dark); }
.tag-note { font-weight: 700; color: var(--gold-deep); margin-right: 6px; }

/* 임무 메타 */
.mrow__meta { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 5px; font-size: .82rem; color: var(--ink-2); }
.mscore b { color: var(--rose); }
.mscore--lvl { color: var(--gold-deep); }
.mscore--lvl b { color: var(--gold-deep); }
.mtime { color: var(--ink-3); }
.mrow.leveled .mscore { opacity: .45; text-decoration: line-through; }
.mrow.leveled .mscore--lvl { opacity: 1; text-decoration: none; font-weight: 700; }

/* 레벨업(금괴) 토글 — 이모지 제거, 금색 점으로 표시 */
.lvl-toggle {
  height: 40px; padding: 0 13px; border-radius: var(--r-input);
  border: 1.5px solid var(--gold); background: var(--white); color: var(--gold-deep);
  font-weight: 700; font-size: .85rem; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s;
}
.lvl-toggle::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.lvl-toggle.on { background: var(--gold); color: var(--wood-dark); border-color: var(--gold-deep); }
.lvl-toggle.on::before { background: var(--wood-dark); }
.lvl-toggle[disabled] { opacity: .3; cursor: not-allowed; border-color: var(--line); color: var(--ink-3); }

/* 주간 임무 한도 바 */
.budget-bar { height: 9px; border-radius: 5px; background: rgba(255,255,255,.15); overflow: hidden; margin: 8px 0 4px; }
.budget-bar i { display: block; height: 100%; width: 0; background: var(--sky-2); border-radius: 5px; transition: width .25s ease, background .25s ease; }
.budget-bar.over i { background: var(--cosmos); }
.res-warn { color: var(--cosmos); font-weight: 700; font-size: .84rem; margin-top: 8px; }

/* ----- 계산기 v2: 추가 패널 ----- */
.add-card {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-card);
  padding: 0; overflow: visible; margin-bottom: 22px;  /* visible: 자동완성 드롭다운 클리핑 방지 */
}
.add-tabs {
  display: flex; gap: 0; background: var(--cream-2); border-bottom: 1.5px solid var(--line);
  border-radius: calc(var(--r-card) - 2px) calc(var(--r-card) - 2px) 0 0;  /* card overflow visible 보정 */
}
.add-tab {
  flex: 1; min-height: 46px; border: 0; background: transparent; cursor: pointer;
  font-weight: 700; font-size: .92rem; color: var(--ink-2);
  border-bottom: 2.5px solid transparent;
}
.add-tab:hover { color: var(--sky-ink); }
.add-tab.on { color: var(--rose); border-bottom-color: var(--rose); background: var(--card); }
.add-bodies { padding: 16px; }
.add-row { display: flex; gap: 8px; align-items: center; }
.add-row--wrap { flex-wrap: wrap; }
.add-row input[type="text"], .add-row input[type="number"], .add-row select {
  flex: 1 1 130px; min-width: 0; height: 44px; padding: 0 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-input); background: var(--white);
  font-size: .95rem; font-weight: 600; color: var(--ink);
}
.add-row input:focus, .add-row select:focus { outline: none; border-color: var(--sky); box-shadow: var(--sh-sm); }
.add-row .btn { flex: 0 0 auto; }
.add-sub { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: .85rem; color: var(--ink-2); font-weight: 600; }
.add-sub select { height: 40px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: var(--r-input); background: var(--white); font-weight: 600; }
.add-msg { margin-top: 10px; }
.add-note { margin-top: 10px; }
.add-note:empty { display: none; }
.assign-grades { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.add-hint { margin-top: 10px; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .9rem; }
.assign-grades .btn--sm { min-height: 38px; padding: 0 14px; }

/* ----- 계산기 v2: 꽃 검색 combobox 자동완성 ----- */
.combo { position: relative; flex: 1 1 170px; min-width: 0; }
.combo > input { width: 100%; }
.combo-list {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 4px; list-style: none;
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-input);
  box-shadow: var(--sh); max-height: 340px; overflow-y: auto;
}
.combo-list[hidden] { display: none; }
.combo-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 46px; padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
.combo-opt:hover, .combo-opt.on { background: rgba(151, 195, 234, .2); }
.combo-opt__name { font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-opt__name b { color: var(--rose); font-weight: 800; }
.combo-opt__grade { font-size: .76rem; color: var(--ink-3); font-weight: 700; flex: 0 0 auto; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ----- 계산기 v2: 연맹 등급 / 추가 시도 (결과 패널 다크) ----- */
.tier-row { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: end; margin: 16px 0 6px; }
.tier-field { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; color: rgba(255, 255, 255, .75); font-weight: 600; }
.tier-field select {
  height: 42px; border-radius: var(--r-input); border: 1.5px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08); color: #fff; padding: 0 10px; font-weight: 700; cursor: pointer;
}
.tier-field select option { color: #1a1a1a; }
.stepper--dark { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.stepper--dark button { color: var(--sky-2); }
.stepper--dark button:hover { background: rgba(255, 255, 255, .12); }
.stepper--dark input { color: #fff; }
.tier-note { font-size: .8rem; color: rgba(255, 255, 255, .62); margin: 2px 0 14px; line-height: 1.5; }
.tier-note:empty { display: none; }

/* ----- 계산기 v2: 내 점수 공유 + 상회 합산(v0 코드 모으기) ----- */
.share-msg { font-size: .82rem; color: var(--sky-2); font-weight: 700; margin: 8px 0 4px; }
.share-msg:empty { display: none; }


/* ----- 계산기 v2: 목록 헤더 ----- */
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.list-head h3 { font-size: 1.1rem; color: var(--navy); }
.calc-empty {
  border: 1.5px dashed var(--line); border-radius: var(--r-card); padding: 26px 20px;
  text-align: center; color: var(--ink-2); background: var(--card);
}
.calc-empty p + p { margin-top: 6px; }

/* ----- 계산기 v2: 행(기본/레벨업 분리 스텝퍼) ----- */
.mrow--v2 { grid-template-columns: 1fr auto; align-items: start; }
.mrow--v2 .mrow__label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mbadge {
  font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(151, 195, 234, .26); color: var(--sky-ink); white-space: nowrap;
}
.mbadge--warn { background: rgba(242, 200, 74, .26); color: var(--gold-deep); }
.mgold { color: var(--gold-deep); font-weight: 700; }
.mrow--v2 .mrow__sub { margin-top: 7px; font-weight: 700; color: var(--rose); }

.dual { display: inline-flex; gap: 10px; align-items: flex-end; }
.dual__col { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.dual__lab { font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.dual__col--lvl .dual__lab { color: var(--gold-deep); }
.dual__col.is-off { opacity: .4; }
.stepper--lvl { border-color: var(--gold); background: rgba(242, 200, 74, .12); }
.stepper--lvl button { color: var(--gold-deep); }
.stepper input:disabled, .stepper button:disabled { cursor: not-allowed; }

.mrow__del {
  width: 32px; height: 32px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--white); color: var(--ink-3); font-size: 1.2rem; line-height: 1; cursor: pointer;
  margin-left: 10px; flex: 0 0 auto; align-self: flex-start;
}
.mrow__del:hover { border-color: var(--cosmos); color: var(--cosmos); }

/* ----- 계산기 v2: 미? 미확정 선택형 미세조정(강제 아님) ----- */
.mi-refine { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.mi-refine__lab { font-size: .76rem; color: var(--ink-3); font-weight: 600; }
.mi-refine__btn {
  height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--cream); color: var(--gold-deep);
  font-weight: 700; font-size: .74rem; cursor: pointer;
}
.mi-refine__btn:hover { border-color: var(--gold-deep); background: rgba(242, 200, 74, .14); }
.res-mi { color: var(--gold-2, rgba(255,255,255,.62)); }
.res-mi[hidden] { display: none; }

/* ----- 계산기 v2: 결과 추천 ----- */
.res-reco {
  margin-top: 16px; padding: 12px 14px; border-radius: var(--r-input);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
}
.res-reco:empty { display: none; }
.res-reco__line { font-weight: 700; font-size: .88rem; color: var(--sky-2); }
.res-reco .small { margin-top: 6px; color: rgba(255, 255, 255, .6); }

@media (max-width: 560px) {
  .mrow--v2 { grid-template-columns: 1fr; }
  .mrow--v2 .mrow__ctrl { justify-content: space-between; width: 100%; }
}

/* =========================================================================
   본문 프로즈 (공략/약관 등)
   ========================================================================= */
.prose { max-width: 760px; }
.prose h1 { font-size: clamp(1.6rem, 4.4vw, 2.2rem); }
.prose .doc-date { margin-top: 10px; font-size: .88rem; color: var(--ink-3); }
.prose h2 { font-size: 1.5rem; margin-top: 2em; }
.prose h3 { font-size: 1.18rem; margin-top: 1.6em; color: var(--rose); }
.prose p { margin-top: .9em; color: var(--ink); }
.prose ul, .prose ol { margin-top: .9em; padding-left: 1.3em; }
.prose li { margin-top: .4em; }
.prose a { color: var(--sky-ink); text-decoration: underline; text-underline-offset: 3px; }
/* prose 안 버튼은 링크 색·밑줄을 받지 않게(specificity 가드) — 버튼 변종 색 유지. */
.prose a.btn { text-decoration: none; }
.prose a.btn--primary, .prose a.btn--sky { color: #fff; }
.prose a.btn--ghost { color: var(--navy); }

/* 강조 패널 (시그니처 이벤트 등) — 박스이되 비대칭 손자름 라운드 */
.panel { border-radius: var(--r-story); padding: clamp(22px, 3.4vw, 34px); border: 1.5px solid var(--line-2); }
.panel--bloom { background: linear-gradient(135deg, rgba(255,192,213,.22), rgba(242,200,74,.14)); border-color: rgba(255,125,169,.32); }

/* =========================================================================
   폼 / 인증 (회원가입·로그인·프로필·글쓰기 — Member SDK 골격)
   ========================================================================= */
.auth-card { max-width: 460px; margin-inline: auto; }
.write-card { max-width: 720px; margin-inline: auto; }

.field { display: grid; gap: 7px; margin-top: 16px; }
.field:first-child { margin-top: 0; }
.field-label { font-weight: 700; font-size: .9rem; color: var(--navy); }
.field-label .opt { font-weight: 600; color: var(--ink-3); font-size: .85em; margin-left: 4px; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 50px; padding: 12px 15px;
  border: 1.5px solid var(--line); border-radius: var(--r-input);
  background: var(--white); color: var(--ink); font-weight: 600;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.65; padding-top: 13px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--sky); box-shadow: 0 0 0 4px rgba(151, 195, 234, .22);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); font-weight: 500; }

.field-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: .92rem; color: var(--ink-2); cursor: pointer; }
.field-check input { width: 20px; height: 20px; min-height: 0; margin-top: 1px; flex-shrink: 0; accent-color: var(--rose); }

.form-msg { margin-top: 14px; font-size: .9rem; min-height: 1.2em; color: var(--rose); font-weight: 700; }

.auth-alt { margin-top: 20px; text-align: center; font-size: .92rem; color: var(--ink-2); }
.auth-alt a { color: var(--sky-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.member-tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--cream-2); border: 1.5px solid var(--line); border-radius: var(--r-card); margin-bottom: 24px; }
.member-tabs a { padding: 9px 22px; border-radius: var(--r-input); font-weight: 700; color: var(--ink-2); font-size: .92rem; }
.member-tabs a.is-active { background: var(--white); color: var(--rose); }

.profile-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.profile-ava { width: 60px; height: 60px; border-radius: 50%; background: var(--sky-2); display: grid; place-items: center; flex-shrink: 0; }
.profile-ava img { width: 34px; height: 34px; }
.profile-name { font-weight: 700; color: var(--navy); font-size: 1.2rem; }
.profile-mail { font-size: .9rem; color: var(--ink-2); margin-top: 2px; }

.form-section-label { font-weight: 700; color: var(--navy); font-size: 1.08rem; }
.danger-zone { border-color: rgba(167, 62, 56, .3); background: rgba(167, 62, 56, .035); }

/* 게시판 빈 상태 / 로그인 유도 — 박스 대신 종이 위 안내 */
.empty-state { text-align: center; color: var(--ink-2); padding-block: clamp(28px, 5vw, 48px); }
.empty-state .empty-spot { width: auto; height: 96px; margin: 0 auto 6px; mix-blend-mode: multiply; }
.gate { text-align: center; max-width: 560px; margin-inline: auto; }
.gate .gate-spot { width: auto; height: 116px; margin: 0 auto 10px; mix-blend-mode: multiply; }
.gate .btn { margin-top: 6px; }

/* SDK 생성 게시물 리스트 항목 */
.saeroon-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-2); padding: 32px; }
.saeroon-post-item { background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r-card); padding: 20px 22px; }
.saeroon-post-item:hover { border-color: var(--sky); }
.saeroon-post-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .85rem; color: var(--ink-2); }

/* 글 목록 — 박스 그리드 대신 헤어라인 인덱스 */
.post-list { display: grid; gap: 0; max-width: 820px; }
.post-list .saeroon-post-item { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 18px 4px; }
.post-list .saeroon-post-item:hover { border-color: var(--line); background: rgba(255,255,255,.4); }

/* 목록 항목 → 상세 링크 (제목 클릭) */
.post-link { display: block; color: inherit; text-decoration: none; }
.post-link:hover h3 { color: var(--sky-ink); }

/* 커뮤니티 카테고리 탭 — 목록 폭에 맞춰 좌측 정렬 */
.comm-tabs { display: flex; flex-wrap: wrap; gap: 8px; max-width: 820px; }
.comm-tabs a {
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px;
  font-size: .94rem; font-weight: 700; text-decoration: none;
  color: var(--ink-2); background: var(--card); border: 1.5px solid var(--line-2);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.comm-tabs a:hover { border-color: var(--sky); color: var(--sky-ink); }
.comm-tabs a.is-active { background: var(--sky-ink); border-color: var(--sky-ink); color: #fff; }

/* 상회 구인 — 디렉터리/개설 안내 노트 */
.recruit-note {
  max-width: 820px; padding: 14px 18px; border-radius: 12px;
  background: rgba(151, 195, 234, .12); border: 1px solid var(--sky-2);
  color: var(--ink-2); font-size: .95rem;
}
.recruit-note p { margin: 0; line-height: 1.7; }
.recruit-note a { color: var(--sky-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   단건 보기 (게시글/공지 상세) + 댓글 — 헤어라인, 박스 그리드 0
   ========================================================================= */
.post-view { max-width: 760px; }
.post-view__back { display: inline-block; font-size: .9rem; color: var(--sky-ink); font-weight: 700; text-decoration: none; }
.post-view__back:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-view__kicker { margin-top: 16px; }
.post-view__title { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-top: 14px; color: var(--navy); line-height: 1.3; }
.post-view__meta { margin-top: 12px; }
/* 본문은 SDK 가 textContent 로 채움 — 줄바꿈 보존(pre-wrap) */
.post-view__body { margin-top: 22px; color: var(--ink); line-height: 1.85; white-space: pre-wrap; word-break: break-word; font-size: 1.02rem; }
.post-view__actions { margin-top: 28px; }

/* 좋아요 토글 */
.like-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--white); color: var(--ink-2);
  font-weight: 700; font-size: .92rem; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.like-btn:hover { border-color: var(--cosmos); color: var(--cosmos); }
.like-btn__heart { fill: var(--ink-3); transition: fill .15s ease; }
.like-btn:hover .like-btn__heart { fill: var(--cosmos); }
.like-btn.is-liked { border-color: var(--cosmos); color: var(--cosmos); background: rgba(255, 125, 169, .08); }
.like-btn.is-liked .like-btn__heart { fill: var(--cosmos); }
.like-btn b { font-weight: 800; }

/* 댓글 — 종이 위 헤어라인 (카드 박스 아님) */
.comment-wrap { max-width: 760px; }
.comment-head { font-size: 1.25rem; color: var(--navy); }
.comment-list { display: grid; gap: 0; margin-top: 14px; }
.comment { padding: 16px 2px; border-bottom: 1px solid var(--line); }
.comment__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.comment__who { color: var(--navy); font-size: .96rem; }
.comment__when { font-size: .82rem; color: var(--ink-3); }
.comment__body { margin-top: 6px; color: var(--ink); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.comment[data-comment-depth] { margin-left: 22px; border-left: 2px solid var(--line-2); padding-left: 14px; }
.comment-form { margin-top: 22px; }
.comment-login { margin-top: 22px; }

/* 카카오 로그인 (브랜드 색) — .btn 위에 색만 덮음 */
.btn--kakao {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: #FEE500; color: #3B1E1E; border: 0;
  box-shadow: 0 2px 8px rgba(254, 229, 0, .35);
}
.btn--kakao:hover { background: #FADA0A; box-shadow: 0 4px 14px rgba(254, 229, 0, .4); }
.btn--kakao svg { flex-shrink: 0; }

/* =========================================================================
   닉네임 설정 모달 (회원 — member.js)
   ========================================================================= */
.nick-scrim {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(48, 55, 81, .42);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.nick-scrim.is-open { opacity: 1; pointer-events: auto; }
.nick-card {
  width: 100%; max-width: 380px; padding: 26px 24px 22px;
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: 18px 8px 18px 8px; box-shadow: var(--sh);
  transform: translateY(8px); transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}
.nick-scrim.is-open .nick-card { transform: none; }
.nick-card h3 { font-family: var(--round); font-size: 1.32rem; color: var(--navy); margin: 0; line-height: 1.3; }
.nick-card p { margin: 10px 0 0; color: var(--ink-2); font-size: .94rem; line-height: 1.65; }
.nick-card input {
  width: 100%; min-height: 50px; margin-top: 16px; padding: 12px 15px;
  border: 1.5px solid var(--line); border-radius: var(--r-input);
  background: var(--white); color: var(--ink); font: inherit; font-weight: 600;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nick-card input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 4px rgba(151, 195, 234, .22); }
.nick-card input::placeholder { color: var(--ink-3); font-weight: 500; }
/* 서버(숫자) + 닉네임 2필드 — 's'·'.' 은 자동 affix, 사용자는 숫자만 입력. */
.nick-fields { display: flex; gap: 12px; margin-top: 16px; align-items: flex-end; }
.nick-fields label { margin: 0; }
.nick-cap { display: block; font-size: .8rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.nick-srv { flex: none; }
.nick-name { flex: 1 1 auto; min-width: 0; }
.nick-srv-box {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-input); background: var(--white);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nick-srv-box:focus-within { border-color: var(--sky); box-shadow: 0 0 0 4px rgba(151, 195, 234, .22); }
.nick-affix { color: var(--ink-3); font-weight: 800; }
.nick-card .nick-name input { margin-top: 0; }
.nick-card .nick-srv-box input {
  width: 3.5ch; min-height: 0; margin-top: 0; padding: 12px 2px;
  border: 0; border-radius: 0; background: transparent; text-align: center; font-weight: 700;
}
.nick-card .nick-srv-box input:focus { box-shadow: none; }
.nick-msg { margin-top: 10px; min-height: 1.1em; font-size: .86rem; font-weight: 700; color: var(--rose); }
.nick-actions { margin-top: 16px; display: flex; align-items: center; gap: 12px; }
.nick-actions .btn { margin: 0; }
.nick-later {
  background: none; border: 0; padding: 6px; cursor: pointer;
  font: inherit; font-size: .9rem; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.nick-later:hover { color: var(--ink-2); }
/* 차단형 온보딩의 로그아웃 탈출구 — 취소보다 또렷하게(닉 없이 나가는 유일한 출구) */
.nick-later--exit { color: var(--rose); font-weight: 700; }
.nick-later--exit:hover { color: var(--rose-2); }

/* 프로필 카드 닉네임 수정 링크 */
.nick-edit {
  background: none; border: 0; padding: 0; margin-left: 8px; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--sky-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.nick-edit:hover { color: var(--sky-deep); }

/* =========================================================================
   스크롤 리빌 (JS 없으면 항상 보임)
   ========================================================================= */
/* 거리·시간·딜레이는 자리마다 인라인 변수로 차등 (단일 20px/.7s 변종 폐기).
   '모든 항목 균일 stagger' 도 금지 — 등장 여부 자체가 자리마다 다르다(reveal 클래스가
   붙은 것만 움직이고, 떼면 그냥 보인다). */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0; transform: translateY(var(--rv-y, 16px));
  transition: opacity var(--rv-d, .6s) ease, transform var(--rv-d, .6s) cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--rv-delay, 0s);
}
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   상회 점수판 / 제출 (guild.js) — 슬라이스3
   ============================================================ */

/* --- 계산기 결과 패널(어두운 배경) 안의 '내 상회에 올리기' --- */
/* 라이트 배경 안내/폼 카드 — 로그인 유도·상회 개설 폼·상태 안내(/g/·/guilds/new·셸).
   기존엔 베이스 스타일이 없어 제목·본문·버튼이 기본 마진으로 '따로 놀던' 영역.
   페이지 톤(종이 카드 + 부드러운 테두리 + 간격 리듬)으로 통일.
   다크 계산기 카드(#kh-guild-submit .kh-card)는 specificity(#) 로 그대로 덮어쓴다. */
.kh-card { background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r-card); padding: clamp(20px, 3.5vw, 28px) clamp(18px, 3.5vw, 24px); }
.kh-card-title { font-size: 1.18rem; font-weight: 800; color: var(--navy); line-height: 1.3; }
.kh-card > .kh-sub { margin-top: 8px; color: var(--ink-2); line-height: 1.65; }
.kh-card > .btn { margin-top: 18px; }
.kh-card > .field { margin-top: 14px; }
.kh-card > .form-msg { margin-top: 12px; }

.kh-submit-mount { margin-top: 18px; }
#kh-guild-submit .kh-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  padding: 16px 16px 18px;
}
#kh-guild-submit .kh-card-title { color: #fff; font-size: 1rem; font-weight: 800; }
#kh-guild-submit .kh-sub { color: rgba(255, 255, 255, .74); font-size: .88rem; margin-top: 6px; line-height: 1.5; }
#kh-guild-submit .btn { margin-top: 12px; }
/* 기본 .kh-link — 밝은 배경(점수판/셸 안내문)에서 또렷한 링크로 보이게. */
.kh-link { color: var(--sky-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.kh-link:hover { color: var(--rose); }
/* 계산기 submit 카드(어두운 배경)는 골드 + 밑줄 없음으로 덮어쓴다. */
#kh-guild-submit .kh-link { display: inline-block; margin-top: 10px; color: var(--gold); font-size: .9rem; font-weight: 700; text-decoration: none; }
#kh-guild-submit .kh-link:hover { text-decoration: underline; }
/* kh-msg = 라이트(종이) 배경 기준 — 사이트 전역이 라이트 테마. (구 흰색/연녹 트리오는 다크 submit 카드 전용이라 종이 위에서 안 읽혔음) */
.kh-msg { font-size: .88rem; margin-top: 10px; min-height: 1.2em; color: var(--ink-2); }
.kh-msg.is-ok { color: #2F7A4A; font-weight: 700; }
.kh-msg.is-warn { color: var(--rose); font-weight: 700; }
/* 다크 계산기 submit 카드(재활성화 시)에서는 흰 배경용 색으로 덮어쓴다(specificity #). */
#kh-guild-submit .kh-msg { color: rgba(255, 255, 255, .8); }
#kh-guild-submit .kh-msg.is-ok { color: #BFE6B0; }
#kh-guild-submit .kh-msg.is-warn { color: var(--cosmos-soft); }

/* --- 점수판 대시보드(밝은 배경) --- */
.kh-board { min-height: 200px; }
.kh-loading { color: var(--ink-3); padding: 40px 0; text-align: center; }

/* 게이트(로그인/가입/없음 안내) — 박스 대신 종이 위 안내 + multiply 일러스트(.gate 본문 패턴과 통일) */
.kh-gate { max-width: 560px; margin: 24px auto; text-align: center; padding: clamp(20px, 4vw, 32px) 0; }
.kh-gate .gate-spot { width: auto; height: 116px; margin: 0 auto 10px; mix-blend-mode: multiply; }
.kh-gate-title { font-size: 1.4rem; }
.kh-gate-sub { color: var(--ink-2); margin: 10px 0 22px; line-height: 1.6; }

.kh-board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kh-board-title { font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
.kh-board-meta { color: var(--ink-2); margin-top: 6px; font-size: .95rem; }

/* 상회 소개 문패 — 사랑방 보이스(손글씨 이름, 박스 0). 셸 첫 화면 격상. */
.kh-intro-plate { padding-block: clamp(8px, 2vw, 18px); }
.kh-intro-plate__name { font-family: var(--hand); font-weight: 700; color: var(--maroon); font-size: clamp(2.1rem, 6vw, 3.3rem); line-height: 1.06; letter-spacing: -.01em; }

.kh-note { color: var(--ink-3); font-size: .86rem; margin-top: 12px; line-height: 1.55; max-width: 64ch; }

.kh-sec { margin-top: 30px; }
.kh-sec-title { font-size: 1.15rem; margin-bottom: 12px; }

.kh-table-wrap { overflow-x: auto; }
.kh-table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--card); }
.kh-table th, .kh-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); text-align: left; white-space: nowrap; }
.kh-table th { font-size: .8rem; color: var(--ink-2); font-weight: 700; border-bottom: 1.5px solid var(--line); background: rgba(231, 214, 188, .18); }
.kh-table td.num, .kh-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.kh-table tbody tr:last-child td { border-bottom: none; }
.kh-table tbody tr.is-me { background: rgba(242, 200, 74, .16); }
.kh-table tbody tr:hover { background: rgba(151, 195, 234, .08); }
.kh-tag-me { display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 800; color: var(--gold-deep); background: rgba(242, 200, 74, .22); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }

.kh-empty { color: var(--ink-3); padding: clamp(22px, 4vw, 36px) 0; text-align: center; }

.kh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kh-chip { background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: .85rem; color: var(--ink-2); }

/* --- 보유 꽃 매트릭스(.kh-mx) = 꽃 종류 과다 시 열 압착 → 회원별 인라인 칩(.kh-fl-*)으로 대체·제거됨 --- */

/* ----- G2: 상회 디렉터리 + 가입 신청 검토 ----- */
.kh-myguild {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--cream); border: 1.5px solid var(--rose); border-radius: 14px;
  padding: 13px 16px; margin-bottom: 16px; text-decoration: none; color: var(--navy);
}
.kh-myguild:hover { background: var(--cream-2); }
.kh-myguild__label { font-size: .78rem; font-weight: 800; color: var(--rose); letter-spacing: .02em; }
.kh-myguild__name { font-weight: 800; }
.kh-guild-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kh-guild-card { display: block; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 18px 18px 16px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.kh-guild-card:hover { border-color: var(--rose); transform: translateY(-2px); }
.kh-guild-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.kh-guild-card-name { font-weight: 800; font-size: 1.05rem; color: var(--navy); }
.kh-guild-card-tier { font-size: .8rem; font-weight: 700; color: var(--rose); white-space: nowrap; }
.kh-guild-card-desc { color: var(--ink-2); font-size: .9rem; line-height: 1.5; margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kh-guild-card-meta { color: var(--ink-3); font-size: .82rem; margin-top: 10px; }
.kh-apply-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.kh-apply-who { display: flex; align-items: baseline; gap: 8px; }
.kh-apply-name { font-weight: 700; color: var(--navy); }
.kh-apply-rank { font-size: .85rem; color: var(--ink-2); }
.kh-apply-actions { display: flex; gap: 8px; }

/* ----- 상회 둘러보기(체험) ----- */
/* 디렉터리 상단 진입 카드 — 크림 표면 + 헤어라인(균일 그림자 0, de-AI). */
.kh-tour { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; background: var(--cream); border: 1.5px solid var(--line); border-radius: 18px; padding: 20px 20px 22px; margin-bottom: 18px; }
@media (min-width: 640px) { .kh-tour { grid-template-columns: 1fr minmax(96px, 132px); gap: 18px; } }
.kh-tour__t { font-size: 1.15rem; font-weight: 800; color: var(--navy); margin: 0; }
.kh-tour__p { color: var(--ink-2); font-size: .92rem; line-height: 1.6; margin: 8px 0 14px; }
.kh-tour__spot { height: clamp(96px, 16vw, 132px); width: auto; justify-self: center; mix-blend-mode: multiply; }
@media (max-width: 639px) { .kh-tour__spot { display: none; } }
/* 회원용 간략 둘러보기 — '내 상회' 핀보다 작은 보조 링크(위계 유지). */
.kh-tour-brief { display: inline-flex; align-items: center; margin-bottom: 16px; font-size: .88rem; font-weight: 700; color: var(--sky-ink); text-decoration: underline; text-underline-offset: 3px; }
.kh-tour-brief:hover { color: var(--rose); }
/* 셸 상단 체험 배너 — 골드 틴트로 '지금 예시 상회'임을 또렷이(콘텐츠와 구분). */
.kh-demo-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; background: rgba(242, 200, 74, .16); border: 1px solid var(--gold-deep); border-radius: 12px; padding: 11px 15px; margin-bottom: 16px; }
.kh-demo-banner__msg { min-width: 0; flex: 1 1 220px; }
.kh-demo-banner__acts { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.kh-demo-banner__tag { color: var(--maroon); font-size: .9rem; }
.kh-demo-banner__sub { color: var(--ink-2); font-size: .86rem; }
/* 쓰기 시도 넛지 — 떠 있는 모달(기능적 elevation이라 그림자 허용). */
.kh-demo-nudge-back { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(51, 47, 54, .5); }
.kh-demo-nudge { background: var(--white); border-radius: 18px; padding: 24px 22px; max-width: 380px; width: 100%; box-shadow: var(--sh); }
.kh-demo-nudge__t { font-size: 1.1rem; font-weight: 800; color: var(--navy); margin: 0 0 8px; }
.kh-demo-nudge__p { color: var(--ink-2); font-size: .92rem; line-height: 1.6; margin: 0 0 18px; }
.kh-demo-nudge__acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* ----- 부트스트랩 개설자 보드(멤버 모으는 중) + 초대 코드 ----- */
.kh-boot-banner { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-block: 16px; border-block: 1px solid var(--line); }
.kh-boot-spot { width: auto; height: 64px; flex-shrink: 0; mix-blend-mode: multiply; }
.kh-boot-state { font-weight: 800; color: var(--maroon); font-size: 1.05rem; }
.kh-boot-sub { color: var(--ink-2); font-size: .92rem; line-height: 1.6; margin-top: 4px; }

.kh-invite-make { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.kh-inline-msg { font-size: .85rem; font-weight: 700; min-height: 1em; }
.kh-invite-list { margin-top: 4px; }
.kh-invite-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.kh-invite-row.is-revoked { opacity: .5; }
.kh-invite-row.is-revoked .kh-invite-code { text-decoration: line-through; }
.kh-invite-main { display: flex; flex-direction: column; gap: 3px; }
.kh-invite-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.2rem; font-weight: 800; letter-spacing: .14em; color: var(--maroon); user-select: all; }
.kh-invite-meta { font-size: .8rem; color: var(--ink-3); }
.kh-invite-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.kh-boot-apps-head { display: flex; justify-content: flex-end; margin: 6px 0 2px; }
.kh-boot-apps { margin-top: 2px; }
.kh-adm-row { display: flex; align-items: center; gap: 11px; padding: 13px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.kh-adm-row input { width: 20px; height: 20px; min-height: 0; flex-shrink: 0; accent-color: var(--rose); cursor: pointer; }
.kh-adm-name { font-weight: 700; color: var(--navy); }
.kh-adm-rank { margin-left: auto; font-size: .85rem; color: var(--ink-2); }

.kh-boot-activate { border-top: 1.5px solid var(--line); padding-top: 18px; }
.kh-boot-prog { font-weight: 800; font-size: 1.1rem; color: var(--navy); }
.kh-boot-pres { margin-top: 6px; font-size: .92rem; font-weight: 700; color: var(--rose); }
.kh-boot-pres.is-ok { color: #4A6B3A; }
.kh-boot-activate .btn { margin-top: 16px; }
.kh-boot-activate .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* ----- G3: 멤버 전용 탭 (점수판/게시판/공지) + 상회 게시판/공지 글 ----- */
.kh-tabs { display: flex; gap: 4px; margin-top: 26px; border-bottom: 1.5px solid var(--line); flex-wrap: wrap; }
.kh-tab {
  appearance: none; background: none; border: 0; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px;
  padding: 10px 14px; font: inherit; font-weight: 700; font-size: .98rem; color: var(--ink-2); cursor: pointer;
}
.kh-tab:hover { color: var(--sky-ink); }
.kh-tab.is-active { color: var(--rose); border-bottom-color: var(--rose); }
.kh-tabpanel { margin-top: 18px; }

.kh-postlist { display: grid; gap: 0; margin-top: 16px; max-width: 760px; }
.kh-post-row {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; width: 100%;
  appearance: none; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 14px 4px; cursor: pointer; font: inherit;
}
.kh-post-row:hover { background: rgba(255, 255, 255, .45); }
.kh-post-row__title { font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.kh-post-row:hover .kh-post-row__title { color: var(--sky-ink); }
.kh-post-row__meta { font-size: .82rem; color: var(--ink-3); }
.kh-post-view__title { font-size: clamp(1.3rem, 3.4vw, 1.7rem); color: var(--navy); margin-top: 16px; line-height: 1.3; max-width: 760px; }
.kh-post-view__body { margin-top: 16px; color: var(--ink); line-height: 1.8; white-space: pre-wrap; word-break: break-word; max-width: 760px; }
.kh-post-actions { margin-top: 22px; display: flex; align-items: center; gap: 12px; }

/* ----- 게시판 목록/작성 분리 (MOVE4) ----- */
/* SDK 게시판(community/kkochhyang) — 목록 화면 글쓰기 진입 + 작성 완료 알림 + 작성 화면 복귀 */
.board-cta { margin-top: 2px; }
.board-compose-back { margin-bottom: 16px; }
.board-toast {
  margin-top: 14px; padding: 12px 16px; border-radius: var(--r-input);
  background: #E9F1DE; border: 1px solid #CBDBB2; color: #4A6B3A; font-weight: 700; font-size: .92rem;
}
.board-toast[hidden] { display: none; }
/* 제네릭 상회 셸(guild.js renderPostsTab) — 같은 역할 */
.kh-board-cta { margin: 2px 0 18px; }
.kh-compose-back { margin-bottom: 14px; }
.kh-toast {
  margin-bottom: 16px; padding: 10px 14px; border-radius: var(--r-input);
  background: #E9F1DE; border: 1px solid #CBDBB2; color: #4A6B3A; font-weight: 700; font-size: .9rem;
}

/* ----- 상회 회원/권한 탭 ----- */
.kh-member-list { margin-top: 4px; }
.kh-member-row { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.kh-member-name { font-weight: 700; color: var(--navy); }
.kh-role-tag { font-size: .85rem; color: var(--ink-2); }
.kh-mgr-tag { font-size: .74rem; font-weight: 700; color: var(--rose); border: 1px solid var(--rose-2); border-radius: 999px; padding: 2px 9px; }
.kh-legend { margin-top: 8px; padding-left: 18px; color: var(--ink-2); font-size: .9rem; line-height: 1.7; }
.kh-legend li { margin-top: 4px; }

/* ───────── 계산기 — 할 거예요 / 보유만 토글 ───────── */
.mrow__own { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--cream); }
.own-pill { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: .78rem; font-weight: 700; padding: 4px 12px; cursor: pointer; }
.own-pill.is-on { background: var(--rose); color: #fff; }
.mrow__ownonly { font-size: .84rem; color: var(--ink-3); padding: 6px 2px; }

/* ───────── 점수판 — 보물상자 진행바 ───────── */
.kh-treas { margin-top: 12px; }
.kh-treas-track { height: 8px; background: var(--cream-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.kh-treas-fill { height: 100%; background: var(--gold); border-radius: 999px; transition: width .4s ease; }

/* ───────── 점수판 — 꽃별 베스트 카드 ───────── */
.kh-fb-list { display: grid; gap: 0; }
.kh-fb-card { padding: 14px 4px; border-bottom: 1px solid var(--line); }
.kh-fb-list .kh-fb-card:last-child { border-bottom: 0; }
.kh-fb-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.kh-fb-name { font-weight: 800; font-size: 1.02rem; }
.kh-fb-grade { font-size: .74rem; font-weight: 700; color: var(--sky-ink); background: rgba(151, 195, 234, .18); border-radius: 999px; padding: 2px 9px; }
.kh-fb-pt { font-size: .84rem; font-weight: 700; color: var(--rose); font-variant-numeric: tabular-nums; }
.kh-fb-can { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--gold-deep); background: rgba(242, 200, 74, .18); border-radius: 999px; padding: 2px 10px; }
.kh-fb-owners { margin-top: 9px; }
.kh-fb-owners .kh-chip { font-size: .8rem; padding: 4px 11px; }
.kh-fb-owners .kh-chip.is-me { background: rgba(242, 200, 74, .22); border-color: var(--gold-deep); color: var(--gold-deep); font-weight: 700; }

/* ───────── 점수판 — 접이식(협동·격자) ───────── */
.kh-acc { margin-top: 20px; border-block: 1px solid var(--line); }
.kh-acc > summary { cursor: pointer; padding: 14px 42px 14px 4px; list-style: none; position: relative; }
.kh-acc > summary::-webkit-details-marker { display: none; }
.kh-acc > summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.kh-acc[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.kh-acc[open] > summary { border-bottom: 1px solid var(--line-2); }
.kh-acc-sum { font-weight: 800; font-size: .98rem; }
.kh-acc > :not(summary) { margin: 12px 4px 16px; }
.kh-ho-line { font-size: .9rem; line-height: 1.6; color: var(--ink-2); padding: 7px 0; border-bottom: 1px dashed var(--line-2); }
.kh-ho-line:last-child { border-bottom: 0; }

/* (점수 설계 제거: A2 소진 게이지·A3 롤업·효율 배지 CSS = 인벤토리 개편으로 삭제) */

/* ───────── 점수판 — 회원별 보유 꽃(구성원 단위 인라인 칩) ───────── */
.kh-fl-list { display: grid; gap: 0; }
.kh-fl-row { display: grid; grid-template-columns: 1fr; gap: 4px 14px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.kh-fl-row:last-child { border-bottom: 0; }
.kh-fl-row.is-me { background: rgba(242, 200, 74, .1); }
.kh-fl-who { display: flex; align-items: baseline; gap: 8px; font-weight: 700; color: var(--navy); }
.kh-fl-cnt { font-weight: 600; font-size: .78rem; color: var(--ink-3); white-space: nowrap; }
@media (min-width: 680px) {
  .kh-fl-row { grid-template-columns: minmax(110px, 170px) 1fr; align-items: baseline; }
}

/* ───────── 내 꽃 인벤토리 편집기(/my/) — .combo* 재사용 ───────── */
.kh-inv-add { max-width: 520px; margin-bottom: 18px; }
.kh-inv-input {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-input);
  background: var(--white); color: var(--ink); font: inherit; font-weight: 600;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kh-inv-input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 4px rgba(151, 195, 234, .22); }
.kh-inv-input::placeholder { color: var(--ink-3); font-weight: 500; }
.combo-opt.is-added { opacity: .55; }
.combo-opt.is-added .combo-opt__grade { color: var(--gold-deep); }

.kh-inv-top { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kh-inv-count { font-weight: 800; color: var(--maroon); margin-bottom: 12px; }
.kh-inv-empty { color: var(--ink-2); padding: 18px 0; }
.kh-inv-group { margin-bottom: 16px; }
.kh-inv-grade { font-size: .82rem; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line-2); }
.kh-inv-chip { display: inline-flex; align-items: center; gap: 6px; padding-right: 6px; }
.kh-inv-rm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(167, 62, 56, .1); color: var(--rose); font-size: 1rem; line-height: 1; cursor: pointer;
}
.kh-inv-rm:hover { background: var(--rose); color: #fff; }
.kh-inv-save { max-width: 520px; margin-top: 22px; }
.kh-inv-save .btn { margin-bottom: 8px; }

/* ── 내 꽃 — 경기 활성 토글 + 기본 점수 + 일괄 켜기/끄기 ── */
.kh-inv-bar { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.kh-inv-bar .kh-inv-count { margin-bottom: 0; }
.kh-inv-bulk { display: inline-flex; gap: 6px; }
.kh-inv-bulk .btn { min-height: 30px; padding: 4px 11px; }
.kh-inv-pt { font-size: .76rem; font-weight: 700; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.kh-inv-use {
  appearance: none; border: 1.4px solid var(--line); background: var(--white);
  border-radius: 999px; padding: 2px 9px; font: inherit; font-size: .72rem; font-weight: 700;
  color: var(--ink-3); cursor: pointer; line-height: 1.4; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.kh-inv-use:hover { border-color: var(--rose); color: var(--rose); }
.kh-inv-use.is-on { background: var(--rose); border-color: var(--rose); color: #fff; }
.kh-inv-chip.is-active { border-color: var(--rose); background: rgba(167, 62, 56, .07); }

/* ───────── 내 꽃 v2 — 전체 카탈로그 체크리스트(보유/경기 토글) ───────── */
/* 상단 컨트롤: 배경/테두리 박스 없이 페이지에 그대로 얹힘(의미없는 네모 박스 제거).
   sticky 도 해제 — 배경 없는 sticky 는 스크롤 시 칩 사이로 콘텐츠가 비쳐 깨지므로. */
.kh-inv2-controls {
  padding: 2px 0 6px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.kh-inv2-find { max-width: 520px; min-width: 0; }
/* 검색 = pill + 좌측 돋보기 아이콘 + 가벼운 테두리(아래 필터 칩과 둥근 언어 통일) */
.kh-inv2-search {
  min-height: 48px; border-radius: 999px; border-width: 1.5px;
  padding-left: 46px;
  /* 흰 바탕 ✕ — 페이지와 같은 cream 으로 녹이고 살짝 inset 으로 '입력칸' 깊이만 줌(테두리+아이콘이 검색임을 표시) */
  background-color: var(--cream);
  box-shadow: inset 0 1px 2px rgba(99, 79, 55, .06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9088' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 18px center; background-size: 18px 18px;
}
.kh-inv2-search::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.kh-inv2-filter { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.kh-inv2-fbtn {
  appearance: none; min-height: 38px; padding: 7px 16px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--white);
  font: inherit; font-size: .85rem; font-weight: 700; color: var(--ink-2); cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.kh-inv2-fbtn:hover { border-color: var(--sky); }
.kh-inv2-fbtn[aria-pressed="true"] { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.kh-inv2-sumrow { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.kh-inv2-summary { font-size: .86rem; font-weight: 700; color: var(--ink-2); margin: 0; }
/* 경기 전체 해제 — 보조 ghost pill(경기 켠 게 있을 때만 노출) */
.kh-inv2-clearmatch {
  appearance: none; border: 1px solid var(--line); background: none;
  border-radius: 999px; padding: 5px 13px; min-height: 32px;
  font: inherit; font-size: .78rem; font-weight: 700; color: var(--ink-3); cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.kh-inv2-clearmatch:hover { color: var(--rose); border-color: var(--rose); }
.kh-inv2-hint { font-size: .9rem; color: var(--ink-2); background: var(--cream); border-radius: var(--r-input); padding: 11px 14px; margin: 0 0 14px; }

.kh-inv2-groups { margin-bottom: 18px; }
.kh-inv2-band {
  width: 100%; display: flex; align-items: center; gap: 10px;
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 13px 2px; border-bottom: 1.5px solid var(--line-2);
  font: inherit; text-align: left; color: var(--ink); margin-top: 10px; min-height: 48px;
}
.kh-inv2-band.is-static { cursor: default; }
.kh-inv2-bandname { font-weight: 800; font-size: .98rem; }
.kh-inv2-bandcnt { font-size: .8rem; font-weight: 700; color: var(--maroon); margin-left: auto; font-variant-numeric: tabular-nums; }
.kh-inv2-chev { flex: none; width: 11px; height: 11px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform .15s ease; margin-left: 4px; }
.kh-inv2-band.is-open .kh-inv2-chev { transform: rotate(45deg); }

.kh-inv2-rows { display: flex; flex-direction: column; padding: 2px 0 6px; }
.kh-inv2-row { display: flex; align-items: stretch; gap: 8px; border-bottom: 1px solid var(--line-2); }
.kh-inv2-row:last-child { border-bottom: 0; }
.kh-inv2-row.is-owned { background: rgba(167, 62, 56, .045); }
.kh-inv2-row.is-match { background: rgba(167, 62, 56, .09); }
/* 보유 토글 = 행 본체(큰 타깃 ≥52px). 비색 단서: 체크박스 마크 + 이름 굵기 + 행 배경 */
.kh-inv2-own {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 11px;
  appearance: none; border: 0; background: none; cursor: pointer;
  min-height: 52px; padding: 9px 6px; font: inherit; text-align: left; color: var(--ink-2);
}
.kh-inv2-mark {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  border: 1.8px solid var(--line); background: var(--white); position: relative;
  transition: background .12s ease, border-color .12s ease;
}
.kh-inv2-own[aria-pressed="true"] .kh-inv2-mark { background: var(--maroon); border-color: var(--maroon); }
.kh-inv2-own[aria-pressed="true"] .kh-inv2-mark::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(42deg);
}
.kh-inv2-txt { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1 1 auto; }
.kh-inv2-name { flex: 0 1 auto; min-width: 0; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-inv2-own[aria-pressed="true"] .kh-inv2-name { color: var(--ink); font-weight: 800; }
.kh-inv2-meta { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.kh-inv2-rt { flex: none; display: flex; align-items: center; gap: 6px; padding-right: 2px; }
.kh-inv2-match-btn {
  appearance: none; min-height: 40px; padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--white); cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 800; color: var(--ink-3);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.kh-inv2-match-btn:hover { border-color: var(--rose); color: var(--rose); }
.kh-inv2-match-btn.is-on { background: var(--rose); border-color: var(--rose); color: #fff; }
.kh-inv2-info-btn {
  appearance: none; min-height: 40px; padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid transparent; background: none; cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 700; color: var(--ink-3);
}
.kh-inv2-info-btn:hover { color: var(--rose); border-color: var(--line); }
.kh-inv2-empty { color: var(--ink-2); padding: 20px 2px; }

/* ── 태블릿·PC(≥768px) — 풀폭 리스트 → 카드 반응형 그리드(가로 공간 활용, 한 화면에 더 많이) ── */
@media (min-width: 768px) {
  /* 컨트롤: 검색 좌측 + 필터 우측 한 줄 */
  .kh-inv2-controls { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 14px 0 12px; }
  .kh-inv2-find { flex: 1 1 300px; max-width: 440px; }
  .kh-inv2-filter { margin-left: auto; }
  .kh-inv2-sumrow { flex-basis: 100%; order: 3; justify-content: space-between; }

  /* 밴드 안 꽃들 = 자동 채움 그리드(폭에 따라 2~5열) */
  .kh-inv2-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 10px; padding: 12px 0 20px; }
  .kh-inv2-row {
    flex-direction: column; align-items: stretch; gap: 0;
    border: 1.5px solid var(--line); border-radius: var(--r-card);
    background: var(--card); overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
  }
  .kh-inv2-row:last-child { border-bottom: 1.5px solid var(--line); }
  .kh-inv2-row:hover { border-color: var(--sky); box-shadow: var(--sh); }
  .kh-inv2-row.is-owned { border-color: var(--maroon); background: rgba(167, 62, 56, .05); }
  .kh-inv2-row.is-match { border-color: var(--rose); background: rgba(167, 62, 56, .1); }
  /* 카드: 마크 좌상단 + 이름 위·메타 아래(세로 스택), 토글은 카드 하단 */
  .kh-inv2-own { align-items: flex-start; gap: 10px; padding: 14px 14px 10px; min-height: 0; }
  .kh-inv2-mark { margin-top: 1px; }
  .kh-inv2-txt { flex-direction: column; align-items: flex-start; gap: 2px; }
  .kh-inv2-name { white-space: normal; }
  .kh-inv2-rt { justify-content: flex-end; padding: 0 12px 12px; gap: 8px; }
}
/* 넓은 화면(≥1280)에선 약간 더 조밀하게 */
@media (min-width: 1280px) {
  .kh-inv2-rows { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
}

/* 저장 바 = 화면에 떠 있는 플로팅 액션 카드(직각 띠 ✕): 둥근 모서리 + 떠 있는 그림자 + 반투명 cream + 유리(backdrop blur).
   스크롤 중엔 아래 콘텐츠가 블러로 비쳐 '뚝 잘린 띠' 느낌이 사라진다. blur 미지원 브라우저는 불투명 cream 폴백. */
.kh-inv2-savebar {
  position: sticky; bottom: 14px; z-index: 6;
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 16px; padding: 10px 12px 10px 18px;
  border: 1px solid rgba(167, 62, 56, .14); border-radius: 18px;
  background: rgba(251, 243, 228, .80);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: var(--sh);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .kh-inv2-savebar { background: var(--cream); }
}
.kh-inv2-saveinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.kh-inv2-savesum { font-weight: 800; color: var(--maroon); font-size: .9rem; }
.kh-inv2-dirty { display: none; font-size: .78rem; font-weight: 700; color: var(--rose); }
.kh-inv2-savebar.is-dirty .kh-inv2-dirty { display: inline; }
.kh-inv2-savebar .btn { flex: none; min-width: 130px; margin: 0; }
.kh-inv2-savebar .kh-msg { margin: 0; }
@media (max-width: 460px) {
  .kh-inv2-savebar .btn { min-width: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .kh-inv2-chev, .kh-inv2-mark, .kh-inv2-match-btn, .kh-inv2-fbtn, .kh-sf-btn, .kh-opt-btn, .kh-fb-morebtn, .kh-search { transition: none; }
}

/* ── 보유 명단 — 경기 활성 또렷 / 보유만 흐림 + 기본 점수 ── */
.kh-chip-pt { margin-left: 5px; font-size: .72rem; font-weight: 700; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.kh-fl-chip.is-active { border-color: var(--rose); background: rgba(167, 62, 56, .07); font-weight: 700; }
.kh-fl-chip.is-idle { opacity: .55; border-style: dashed; }
/* 보유만(경기 미사용) 꽃 펼치기 버튼 — 회원별 행에서 경기 꽃은 전부·보유만은 1개+나머지 접기 */
.kh-fl-more { appearance: none; border: 1.4px dashed var(--line); background: none; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .78rem; font-weight: 700; color: var(--ink-3); cursor: pointer; transition: color .12s ease, border-color .12s ease; }
.kh-fl-more:hover { color: var(--rose); border-color: var(--rose); }
/* 경기 체크한 보유자=또렷(로즈), 경기 미체크 보유자=흐림(점선) — '경기 낼 사람 vs 그냥 보유자' 구분(의도된 설계). */
.kh-fb-owners .kh-chip.is-active { border-color: var(--rose); background: rgba(167, 62, 56, .08); font-weight: 700; }
.kh-fb-owners .kh-chip.is-idle { opacity: .5; border-style: dashed; }

/* ── A5 경기 임무 조율 마킹 (임원 오버레이) ─────────────────────────────
   회원 본인의 경기 꽃 선택(is-active=로즈 채움 / is-idle=점선)과 겹치지 않게 '별 채널'로:
   완수=사주 초록 좌측 accent+배지, 배정=하늘 outline+배지, 제외=음영+취소선+배지.
   채움(background)은 안 건드린다 — is-active 로즈 채움 위에 마크가 배지/테두리로만 얹힌다. */
.kh-mm-bar { padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
.kh-mm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.kh-mm-lab { font-size: .82rem; font-weight: 800; color: var(--maroon); margin-right: 2px; }
.kh-mm-clear { margin-left: auto; }
.kh-mm-summary { margin: 8px 0 0; font-size: .84rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kh-mm-summary.is-warn { color: var(--rose); }
.kh-mm-hint { margin-top: 6px; }
.kh-mm-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.kh-mm-confirm[hidden] { display: none; }
.kh-mm-confirm-q { font-size: .82rem; font-weight: 700; color: var(--rose); }
.btn.kh-mm-yes { background: var(--rose); border-color: var(--rose); color: #fff; }
.btn.kh-mm-yes:hover { background: var(--maroon); border-color: var(--maroon); }

/* 완수 — 회원행. 초록 좌측 accent(두껍게) + 옅은 초록 tint + 채운 '완수' 배지(또렷하게). */
.kh-fl-row.mm-done { box-shadow: inset 4px 0 0 0 #4E7047; background: rgba(91, 123, 84, .10); border-radius: 8px; }
.kh-fl-row.mm-done .kh-fl-who::after {
  content: '완수'; align-self: center; font-size: .72rem; font-weight: 800; color: #fff;
  background: #4E7047; border-radius: 999px; padding: 2px 10px; white-space: nowrap; letter-spacing: .03em;
}
/* 마크된 칩(사람 뷰=.kh-fl-chip / 꽃 뷰=.kh-fb-owners .kh-chip)은 흐림(is-idle)을 걷어 낸다 — 페이드에 묻히던 게 '안 띄던' 근본 원인. */
.kh-fl-chip.mm-assigned, .kh-fl-chip.mm-excluded,
.kh-fb-owners .kh-chip.mm-assigned, .kh-fb-owners .kh-chip.mm-excluded { opacity: 1; }
/* 배정 — 하늘 굵은 outline(border 채널은 is-active/idle 이 씀 → outline 분리) + 채운 배지. 두 뷰 공통. */
.kh-fl-chip.mm-assigned, .kh-fb-owners .kh-chip.mm-assigned { outline: 2.5px solid var(--sky-deep); outline-offset: 1px; }
.kh-fl-chip.mm-assigned::after, .kh-fb-owners .kh-chip.mm-assigned::after {
  content: '배정'; margin-left: 6px; font-size: .68rem; font-weight: 800; color: #fff;
  background: var(--sky-deep); border-radius: 999px; padding: 1px 8px; letter-spacing: .03em;
}
/* 제외 — 이름·점수만 흐린 취소선, '제외' 배지는 채워서 또렷(칩 페이드 상속을 끊음). 두 뷰 공통. */
.kh-fl-chip.mm-excluded, .kh-fb-owners .kh-chip.mm-excluded { border-color: var(--wood-dark); border-style: solid; }
.kh-fl-chip.mm-excluded .kh-srch, .kh-fb-owners .kh-chip.mm-excluded .kh-srch { opacity: .5; text-decoration: line-through; }
.kh-fl-chip.mm-excluded .kh-chip-pt { opacity: .5; }
.kh-fl-chip.mm-excluded::after, .kh-fb-owners .kh-chip.mm-excluded::after {
  content: '제외'; margin-left: 6px; font-size: .68rem; font-weight: 800; color: #fff;
  background: var(--wood-dark); border-radius: 999px; padding: 1px 8px; text-decoration: none; letter-spacing: .03em;
}
/* 조율 모드 편집 어포던스 — 두 뷰(사람=꽃칩, 꽃=보유자 칩). 커서·hover 로 '누를 수 있음'을 알린다. */
.kh-mm-on .kh-fl-who { cursor: pointer; }
.kh-mm-on .kh-fl-who:hover .kh-fl-name { color: var(--maroon); }
.kh-mm-on .kh-fl-chip[data-flower-id], .kh-mm-on .kh-fb-owners .kh-chip[data-member-id] { cursor: pointer; }
.kh-mm-on .kh-fl-chip[data-flower-id]:hover, .kh-mm-on .kh-fb-owners .kh-chip[data-member-id]:hover { border-color: var(--sky-deep); }

/* ───────── 점수판 — 검색바(꽃·상회원 인플레이스 강조 + 점프) ───────── */
/* 검색바 sticky(P2) — 긴 결과를 스크롤해도 검색은 항상 손닿는 곳에. 헤더(66px) 아래 고정.
   기본 흐름에선 배경 없이 종이 결 위에 자연스럽게 얹히고(평평한 크림 밴드=떠 있는 박스처럼 보임),
   헤더 아래 고정되는 순간에만 크림 fill 로 스크롤 콘텐츠를 가린다 — Material Design 3(2025) fill-on-scroll 패턴.
   is-stuck 토글 = IntersectionObserver(스크롤 sentinel). de-AI: 그림자 카드 대신 fill+헤어라인만. */
.kh-stick-sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; }
.kh-search { position: sticky; top: 72px; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); transition: padding .16s ease, box-shadow .16s ease, border-radius .16s ease; }
/* 고정 시 = 둥글고 여백 있는 floating pill(Apple Music 미니플레이어 톤): 좌우 여백·라운드·따뜻한 입체감.
   기본 흐름의 하단 divider 는 카드로 전환하며 숨긴다. de-AI 완화(CEO 명시 요청 미감 — 기능적 elevation). */
.kh-search.is-stuck { background: var(--cream); border-bottom-color: transparent; border-radius: 20px; padding: 12px 18px; box-shadow: 0 10px 26px -12px rgba(99, 79, 55, .34), 0 2px 8px -4px rgba(99, 79, 55, .14); }
.kh-search-field { position: relative; flex: 1 1 240px; min-width: 0; }
.kh-search-input { width: 100%; min-height: 46px; padding: 10px 42px 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r-input); background: var(--white); font: inherit; font-weight: 600; color: var(--ink); }
.kh-search-input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 4px rgba(151, 195, 234, .22); }
.kh-search-input::placeholder { color: var(--ink-3); font-weight: 500; }
.kh-search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.kh-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 1.25rem; line-height: 1; border-radius: 999px; }
.kh-search-clear:hover { color: var(--rose); background: var(--cream); }
.kh-search-count { font-size: .84rem; font-weight: 700; color: var(--ink-2); min-height: 1.1em; }
.kh-search-count:empty { display: none; }
.kh-search-jump { flex: none; margin-left: auto; appearance: none; background: none; border: 0; padding: 6px 2px; cursor: pointer; font: inherit; font-weight: 700; font-size: .9rem; color: var(--sky-ink); text-decoration: underline; text-underline-offset: 3px; }
.kh-search-jump:hover { color: var(--rose); }
/* 매칭 강조 = rose 텍스트만(형광 배경칩·신호등 색 회피, de-AI) */
.kh-srch mark { background: none; color: var(--rose); font-weight: 800; }

/* 점수 필터 칩 + 보기 옵션 — 보유 꽃에 실재하는 등급·점수만 노출. /my/ 필터 pill 과 같은 둥근 언어.
   .kh-opts(경기만·점수순)는 별 컨테이너지만 pill 언어는 .kh-sf-btn 과 공유(신규 색 0). */
.kh-sf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kh-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
/* A3 뷰 토글 — 꽃/사람 세그먼트. .kh-opts 레이아웃 재사용, 필터 구분선 제거 + 라벨(모드 선택임을 구분). */
.kh-viewseg { border-bottom: none; padding-bottom: 4px; }
.kh-viewseg-lab { font-size: .82rem; color: var(--ink-2); margin-right: 2px; }
.kh-sf-btn, .kh-opt-btn {
  appearance: none; min-height: 36px; padding: 6px 14px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--white);
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--ink-2); cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.kh-sf-btn:hover, .kh-opt-btn:hover { border-color: var(--sky); }
.kh-sf-btn[aria-pressed="true"], .kh-opt-btn[aria-pressed="true"] { background: var(--maroon); border-color: var(--maroon); color: #fff; }

/* 꽃별 페이지네이션 — 더 보기 바 */
.kh-fb-morebar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 14px 0 2px; }
.kh-fb-morebtn {
  appearance: none; border: 1.4px dashed var(--line); background: none; border-radius: 999px;
  padding: 8px 16px; font: inherit; font-size: .84rem; font-weight: 700; color: var(--ink-3); cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.kh-fb-morebtn:hover { color: var(--rose); border-color: var(--rose); }
.kh-fb-morecnt { font-size: .78rem; font-weight: 600; color: var(--ink-3); }

/* 필터 결과 없음 */
.kh-filter-empty { padding: 26px 4px 10px; text-align: center; color: var(--ink-2); }
.kh-filter-empty p { margin: 0 0 12px; font-weight: 600; }
/* 자기 활약 행 — 좌측 rose 헤어라인 액센트(레이아웃 시프트 0) */

/* 점수판/셸 진입 모션 — @keyframes(요소 삽입 시 자동 실행). .reveal+옵저버와 달리
   비동기 렌더에 opacity:0 박힘 없음(끝 상태 opacity:1, fill both). 탭 전환 시에도 재실행. */
@keyframes khRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.kh-board-head, .kh-intro-plate, .kh-board .stat-strip, .kh-board .kh-sec, .kh-board .kh-acc,
.kh-tabpanel > .kh-postlist, .kh-tabpanel > .kh-post-view__title { animation: khRise .5s cubic-bezier(.22, 1, .36, 1) both; }
/* 탐색기 재렌더 섹션 — 키 입력·칩 토글마다 khRise 재실행(깜빡임) 금지. 최초 마운트만 애니메이션. */
.kh-board .kh-sec--live { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .kh-board-head, .kh-intro-plate, .kh-board .stat-strip, .kh-board .kh-sec, .kh-board .kh-acc,
  .kh-tabpanel > .kh-postlist, .kh-tabpanel > .kh-post-view__title { animation: none; }
}

/* ───────── 내 꽃 — 칩 내 이름 버튼(클릭=정보) + 꽃 상세 모달 ───────── */
.kh-inv-info { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--ink-2); cursor: pointer; }
.kh-inv-info:hover { color: var(--rose); text-decoration: underline; text-underline-offset: 2px; }
.combo-opt.is-none { cursor: default; color: var(--ink-3); }
.combo-opt.is-none .combo-opt__name { color: var(--ink-3); }

.kh-fi-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(51, 47, 54, .42); }
.kh-fi-box { width: min(360px, 100%); background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh); padding: 18px 18px 20px; }
.kh-fi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kh-fi-title { font-size: 1.15rem; font-weight: 800; color: var(--ink); margin: 0; }
.kh-fi-x { appearance: none; border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 0 2px; }
.kh-fi-x:hover { color: var(--rose); }
.kh-fi-row { display: flex; gap: 10px; margin: 6px 0; font-size: .92rem; }
.kh-fi-k { flex: none; width: 82px; color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.kh-fi-v { color: var(--ink); }
.kh-fi-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: .85rem; color: var(--ink-2); line-height: 1.55; }

/* 멤버 관리(2번) — 행 액션 + 모달 폼 */
.kh-member-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.kh-member-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.kh-member-btn { appearance: none; border: 1.5px solid var(--line); background: var(--white); color: var(--navy); border-radius: 999px; font-size: .8rem; font-weight: 700; padding: 5px 12px; min-height: 34px; cursor: pointer; font-family: inherit; }
.kh-member-btn:hover { border-color: var(--sky); color: var(--sky-ink); }
/* 상회 탈퇴(본인) — 회원 목록 하단 위험 구역. 파괴적 행동을 조용히(고스트+로즈 텍스트) 분리 */
.kh-leave-zone { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.kh-leave-zone .kh-note { margin: 0 0 12px; }
.kh-leave-btn { color: var(--rose); }
.kh-leave-btn:hover { border-color: var(--rose); color: var(--rose); }

/* 내 영역 peer 탭 — '내 꽃'과 '계정'을 동등한 개인 영역으로 나란히 둔다(CEO). .wrap 폭에 정렬. */
.my-tabs {
  display: flex; gap: 6px; align-items: center;
  width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 14px var(--gut) 0;
}
.my-tabs a {
  padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: .92rem;
  color: var(--ink-2); border: 1.5px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.my-tabs a:hover { background: var(--white); color: var(--navy); }
.my-tabs a.is-active { color: var(--navy); background: var(--card); border-color: var(--line-2); }

/* 계정 설정(#kh-account) — 카드 세로 스택. */
.kh-acct { display: flex; flex-direction: column; gap: 18px; }
.kh-acct-id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kh-acct-nm { font-size: 1.3rem; font-weight: 800; color: var(--navy); line-height: 1.25; }
.kh-acct-role { font-size: .82rem; color: var(--ink-3); font-weight: 600; }
.kh-acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }

/* 회원 탈퇴 자리 — 카드 밖, 페이지 맨 아래 조용한 영역. */
.kh-acct-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
.kh-acct-foot .kh-note { margin: 0 0 10px; }

/* 은은한 텍스트 링크 — 파괴적 동작(탈퇴)을 '찾으면 보이되 튀지 않게'. 기본 회색, hover 로만 강조. */
.kh-quiet-link {
  font: inherit; font-weight: 600; font-size: .9rem; color: var(--ink-3);
  background: transparent; border: 0; padding: 6px 2px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line);
}
.kh-quiet-link:hover { color: var(--navy); text-decoration-color: currentColor; }
.kh-quiet-link:disabled { opacity: .5; cursor: default; }
.kh-quiet-link--danger:hover { color: var(--rose); }

.kh-fi-box.kh-dlg { max-height: calc(100dvh - 40px); overflow-y: auto; }
.kh-dlg-cap { font-size: .9rem; color: var(--ink-2); line-height: 1.55; margin: 0 0 12px; }
.kh-dlg-select { width: 100%; min-height: 46px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px; font-size: .95rem; font-family: inherit; color: var(--ink); background: var(--white); }
.kh-dlg-perm { display: flex; align-items: center; gap: 10px; padding: 9px 2px; font-size: .92rem; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--line-2); }
.kh-dlg-perm:last-child { border-bottom: 0; }
.kh-dlg-perm input { width: 20px; height: 20px; flex: none; accent-color: var(--rose); cursor: pointer; }
.kh-fi-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.kh-fi-foot .btn { margin: 0; }

/* 꽃 편집 폼(1번) */
.kh-dlg-flabel { display: block; font-size: .82rem; font-weight: 700; color: var(--ink-3); margin: 12px 0 5px; }
.kh-dlg-flabel:first-child { margin-top: 0; }
.kh-dlg-input { width: 100%; min-height: 46px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px; font-size: .95rem; font-family: inherit; color: var(--ink); background: var(--white); }
.kh-dlg-input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 4px rgba(151, 195, 234, .22); }
.kh-dlg .kh-dlg-cap { margin-top: 12px; margin-bottom: 0; }
/* 등급 기반 기본값 미리보기 — 등급 고르면 즉시 점수·수량·시간 표시(저장 전 확인). 헤어라인만, 박스·그림자 없음. */
.kh-dlg-derived { margin: 8px 0 0; padding-top: 9px; border-top: 1px solid var(--line); font-size: .88rem; font-weight: 700; color: var(--sky-ink); line-height: 1.5; }

/* =========================================================================
   커뮤니티 게시판 리디자인 (2026-07)
   ① 한 칼럼 통일 ② 목록 행 전체 클릭 ③ 상세 타이포·여백 ④ 소유자 액션
   ========================================================================= */

/* ① 칼럼 통일 — 제목줄·탭·목록·상세·댓글 전부 740px 중앙 (body.board-page 페이지 한정).
   --gut 은 .wrap 의 안쪽 패딩이므로 그만큼 더해 콘텐츠 실폭 740 을 유지한다. */
.board-page main .wrap { max-width: calc(740px + var(--gut) * 2); }

/* ② 목록 행 — stretched-link 로 행 전체가 클릭 영역(제목 앵커는 그대로 = 접근성·SEO 유지)
   min-width:0 = grid 자식 기본 min-content 차단 — nowrap 제목이 트랙을 넓혀 칼럼을 넘는 것 방지 */
.post-list .saeroon-post-item { position: relative; cursor: pointer; padding: 18px 30px 18px 4px; min-width: 0; }
.post-list .post-link::after { content: ""; position: absolute; inset: 0; }
/* 우측 셰브런 — hover 시 살짝 밀림 */
.post-list .saeroon-post-item::after {
  content: "›"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; line-height: 1; color: var(--ink-3);
  transition: transform .15s ease, color .15s ease;
}
.post-list .saeroon-post-item:hover::after { transform: translate(2px, -50%); color: var(--sky-ink); }
/* 행 제목 — 한 줄 말줄임 */
.post-list .saeroon-post-item h3 {
  font-size: 1.08rem; font-weight: 700; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 행 메타 — 가운뎃점 구분, muted. 점은 앞 항목의 ::after — 줄바꿈 시 새 줄이 점으로 시작하지 않게 */
.post-list .saeroon-post-meta { margin-top: 7px; gap: 4px 7px; }
.post-list .saeroon-post-meta > span:not(:last-child)::after { content: "·"; margin-left: 7px; color: var(--ink-3); }

/* ③ 상세 — 제목 28~30px, 메타 아래 헤어라인, 본문 17px/1.8 */
.post-view__title { font-size: clamp(1.55rem, 4.4vw, 1.875rem); line-height: 1.3; }
.post-view__meta { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.post-view__body { margin-top: 28px; font-size: 1.0625rem; line-height: 1.8; min-height: 140px; }
/* 좋아요 줄 — 위 헤어라인으로 본문과 분리 */
.post-view__actions { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.comment { padding-block: 16px; }

/* ④ 소유자 액션 — 은은한 텍스트 버튼(계정 탈퇴 링크 .kh-quiet-link 와 같은 결, 13px) */
.own-act {
  font: inherit; font-weight: 600; font-size: .82rem; color: var(--ink-3);
  background: transparent; border: 0; padding: 4px 5px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line);
}
.own-act:hover { color: var(--navy); text-decoration-color: currentColor; }
.own-act--danger:hover { color: var(--rose); }
/* hidden 기본값 존중 — 보일 때만 display 를 건드린다(SDK 가 isMine 확인 후 hidden 제거) */
.post-view__meta [data-saeroon-post-actions]:not([hidden]) { margin-left: auto; display: inline-flex; gap: 8px; }
.comment__top [data-saeroon-comment-actions]:not([hidden]) { margin-left: auto; display: inline-flex; gap: 6px; }

/* 글 수정 폼 — 본문 자리에 노출(.field 재사용). 저장/취소 한 줄 */
.post-edit-form { margin-top: 24px; }
.post-edit-form .form-actions, .comment-edit-form .form-actions { display: flex; gap: 10px; margin-top: 16px; }
/* 댓글 수정 폼 — 항목 안에서 컴팩트하게 */
.comment-edit-form { margin-top: 10px; }
.comment-edit-form .field textarea { min-height: 96px; }
.comment-edit-form .form-actions { margin-top: 12px; }
.comment-edit-form .form-actions .btn { min-height: 40px; padding: 0 16px; font-size: .9rem; }