/* kalimagic v2 - 웜 다크 + 테라코타, 시네마틱 코칭 랜딩 */

:root {
    --bg-color: #1a1512;
    --bg-alt: #1f1815;
    --card-bg: #261d18;
    --text-main: #f4efe9;
    --text-muted: #ab9f92;
    --point-gold: #E8631F;
    --point-gold-rgb: 232, 99, 31;
    --point-gold-hover: #cf5212;
    --kx-terra: #D94A1A;
    --kx-terra-deep: #9E2F0C;
    --font-main: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-light: rgba(255, 255, 255, 0.1);
    --maxw: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-main);
    line-height: 1.7;
    overflow-x: hidden;
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ---------- 공유 애니메이션 & 인터랙션 ---------- */
@keyframes kxOptIn{ from{ opacity:0; transform:translateY(22px); filter:blur(5px); } to{ opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes introCardIn{ from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:translateY(0); } }
@keyframes kxKen{ from{ transform:scale(1); } to{ transform:scale(1.09); } }
@keyframes kxCue{ 0%,100%{ transform:translateY(0); opacity:.35; } 50%{ transform:translateY(8px); opacity:.95; } }

.kx-ken{ animation:kxKen 22s ease-out forwards; }
/* 서브페이지 히어로 켄번스 (CSS 배경 이미지) */
.hero{ overflow:hidden; }
.hero::before{ animation:kxKen 22s ease-out forwards; transform-origin:center; }
/* split-media 호버줌 */
.split-media{ overflow:hidden; border-radius:18px; }
.split-media img{ transition:transform 1.05s cubic-bezier(.2,.7,.2,1); }
.split-media:hover img{ transform:scale(1.06); }
.kx-imgzoom img{ transition:transform 1.05s cubic-bezier(.2,.7,.2,1); }
.kx-imgzoom:hover img{ transform:scale(1.06); }
.kx-cue span{ display:block; width:1px; height:42px; background:linear-gradient(rgba(224,144,78,0), var(--point-gold)); animation:kxCue 1.9s ease-in-out infinite; }
.js-anim .kx-desktop .kx-fade{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); will-change:opacity, transform; }
.js-anim .kx-desktop .kx-fade.kx-in{ opacity:1; transform:none; }
.js-anim .kx-desktop .kx-fade.kx-in > *{ animation:kxOptIn .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:min(calc(var(--kx-i, 0) * .08s), .72s); }
.js-anim .kx-desktop .intro-stagger.kx-fade.kx-in > *{ animation:introCardIn .82s cubic-bezier(.18,.72,.18,1) both; animation-delay:min(calc(var(--kx-i, 0) * .13s), 1.04s); }

/* 서브페이지 fade-in 스크롤 트리거 */
.js-anim .fade-in{ opacity:0; transform:translateY(26px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
.js-anim .fade-in.visible{ opacity:1; transform:none; }

/* ---------- 모바일 진입 애니메이션 ---------- */
@keyframes kxPhotoIn{ from{ opacity:0; transform:scale(.93); } to{ opacity:1; transform:scale(1); } }
@keyframes kxBubbleIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }
.js-anim .kx-mobile .kx-shell > div{ opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
.js-anim .kx-mobile .kx-shell > div.kx-in{ opacity:1; transform:none; }
/* 갤러리 사진: 스케일+페이드 스태거 */
.js-anim .kx-mobile .kx-in figure{ animation:kxPhotoIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay:min(calc(var(--kx-i, 0) * .06s), .48s); }
/* 카톡 스레드: 말풍선 순차 등장 */
.js-anim .kx-mobile .kx-in .kx-thread > div{ animation:kxBubbleIn .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:min(calc(var(--kx-i, 0) * .1s), .8s); }
/* ---------- 탭 눌림 피드백 (모바일) ---------- */
.kx-mobile a[href], .kx-mobile button, .kx-mobile .field-card, .kx-mobile details summary{ transition:transform .14s cubic-bezier(.2,.7,.2,1); }
.kx-mobile a[href]:active, .kx-mobile button:active, .kx-mobile .field-card:active, .kx-mobile details summary:active{ transform:scale(.97); }

/* ---------- 카드 텍스트 정렬 ---------- */
.vcard{ text-align:center; }
.store-card .store-info{ text-align:center; }
.secondary-cta-box, .final-cta{ text-align:center; }
.review-card{ text-align:left; }
.review-quote{ text-align:left; }
.field-card{ text-align:left; }

@media (prefers-reduced-motion: reduce){
  .kx-ken{ animation:none; }
  .hero-about::before{ animation:none; }
  .kx-cue{ display:none; }
  .js-anim .kx-desktop .kx-fade{ opacity:1 !important; transform:none !important; transition:none; }
  .js-anim .kx-desktop .kx-fade.kx-in > *{ animation:none; }
  .js-anim .kx-desktop .intro-stagger.kx-fade.kx-in > *{ animation:none; }
  .js-anim .kx-mobile .kx-shell > div{ opacity:1 !important; transform:none !important; transition:none; }
  .js-anim .kx-mobile .kx-in figure, .js-anim .kx-mobile .kx-in .kx-thread > div{ animation:none; }
  .kx-mobile a[href]:active, .kx-mobile button:active, .kx-mobile .field-card:active, .kx-mobile details summary:active{ transform:none; }
}

/* ---------- 레이아웃 ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.bg-alt { background: var(--bg-alt); }

.eyebrow {
    color: var(--point-gold);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}
.section-title {
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 20px;
}
.section-lead {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.9;
    max-width: 620px;
}
.center { text-align: center; }
.center .section-lead { margin-left: auto; margin-right: auto; }

/* ---------- 네비 ---------- */
.main-nav {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px;
    background: rgba(26, 21, 18, 0.82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
}
.nav-brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.nav-logo { flex: 0 0 auto; font-weight: 800; letter-spacing: 0.14em; color: var(--point-gold); font-size: 1.1rem; }
.nav-brand-sub {
    min-width: 0; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: rgba(var(--point-gold-rgb), 0.76); font-size: 0.76rem; font-weight: 700; letter-spacing: -0.01em;
}
.nav-links { display: flex; gap: 6px; align-items: center; }
.nav-link {
    padding: 7px 13px; border-radius: 8px; font-size: 0.92rem; color: var(--text-muted);
    transition: var(--transition);
}
.nav-link:hover { color: var(--text-main); }
.nav-link.active { color: var(--text-main); }
.nav-profile { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 10rem; }
.nav-profile__nickname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-profile .kali-badge-img {
    flex: 0 0 auto; width: 1em; height: 1em; margin: 0; border-radius: 50%; object-fit: cover;
}
.nav-cta {
    background: var(--point-gold); color: #1a1512 !important; font-weight: 700;
}
.nav-cta:hover { background: var(--point-gold-hover); }

/* ---------- 네비: 공간 전환 스위처 ---------- */
.nav-space-switch {
    display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.055); border: 1px solid var(--border-subtle);
}
.nav-space-switch__item {
    padding: 6px 13px; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
    color: var(--text-muted); white-space: nowrap; transition: var(--transition);
}
.nav-space-switch__item:hover { color: var(--text-main); }
.nav-space-switch__item.is-active { background: var(--point-gold); color: #1a1512; }

/* 의미 단위 줄바꿈 훅: 필요 시 특정 브레이크포인트에서 .brk{display:none}으로 끌 수 있다. */
.brk { }

/* ---------- 버튼 ---------- */
.btn {
    display: inline-block; padding: 15px 30px; border-radius: 12px;
    font-weight: 700; font-size: 1.02rem; transition: var(--transition); cursor: pointer;
    border: 1px solid transparent;
}
.btn--primary { background: var(--point-gold); color: #1a1512; box-shadow: 0 8px 24px rgba(var(--point-gold-rgb), 0.25); }
.btn--primary:hover { background: var(--point-gold-hover); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--text-main); border-color: var(--border-light); }
.btn--ghost:hover { border-color: var(--point-gold); color: var(--point-gold); }
.btn--block { display: block; text-align: center; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.center .cta-row { justify-content: center; }
.sub-link { margin-top: 22px; }
.sub-link a {
    color: var(--text-muted); font-size: 0.95rem;
    border-bottom: 1px solid rgba(var(--point-gold-rgb), 0.4); padding-bottom: 2px;
}
.sub-link a:hover { color: var(--point-gold); }

/* ---------- Hero ---------- */
/* index.html 히어로 사진 - 두 사람이 다 나오도록 반응형 */
.hero-main-img { object-position: 72% 38%; }
@media (max-width: 768px) { .hero-main-img { object-position: 76% 38%; } }
@media (max-width: 460px) { .hero-main-img { object-position: 80% 38%; } }

.hero {
    position: relative; min-height: 88vh; display: flex; align-items: center;
    padding: 96px 0 72px;
}
.hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background:
        linear-gradient(180deg, rgba(26,21,18,0.62) 0%, rgba(26,21,18,0.86) 70%, var(--bg-color) 100%),
        var(--hero-img, none) var(--hero-pos, center)/cover no-repeat;
}
.hero .container { position: relative; z-index: 1; }
.hero-headline {
    font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 800; line-height: 1.25;
    letter-spacing: -0.01em; margin-bottom: 22px;
}
.hero-sub { color: #d4c8bb; font-size: clamp(1rem, 2.6vw, 1.2rem); line-height: 1.85; margin-bottom: 36px; max-width: 560px; }

/* ---------- 방문자 카드 ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.vcard {
    background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 16px;
    padding: 32px 26px; display: flex; flex-direction: column; transition: var(--transition);
}
.vcard:hover { border-color: rgba(var(--point-gold-rgb), 0.5); transform: translateY(-4px); }
.vcard h3 { font-size: 1.22rem; font-weight: 800; margin-bottom: 14px; }
.vcard p { color: var(--text-muted); font-size: 0.98rem; line-height: 1.8; margin-bottom: 24px; flex: 1; }
.vcard .vcard-cta { color: var(--point-gold); font-weight: 700; font-size: 0.96rem; }

/* ---------- 이미지+텍스트 분할 ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split--reverse .split-media { order: 2; }
.split-media img { border-radius: 18px; width: 100%; height: 100%; max-height: 460px; object-fit: cover; }
.quote-list { margin: 26px 0 0; }
.quote-list li {
    list-style: none; color: #e5ddd4; font-size: 1.05rem; line-height: 1.7;
    padding: 10px 0 10px 20px; border-left: 2px solid rgba(var(--point-gold-rgb), 0.6); margin-bottom: 8px;
}
.empathy { margin-top: 26px; color: var(--point-gold); font-weight: 700; font-size: 1.1rem; }

/* ---------- 제품 계단 ---------- */
.ladder { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; }
.ladder-step {
    background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 14px;
    padding: 22px 26px; display: flex; gap: 18px; align-items: flex-start;
}
.ladder-step .num { color: var(--point-gold); font-weight: 800; font-size: 1.3rem; flex: 0 0 auto; line-height: 1.4; }
.ladder-step h4 { font-size: 1.08rem; font-weight: 700; margin-bottom: 6px; }
.ladder-step p { color: var(--text-muted); font-size: 0.96rem; line-height: 1.7; }

/* ---------- 후기 ---------- */
.beforeafter { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; align-items: center; margin-top: 40px; }
.ba-before {
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 28px;
}
.ba-before .ba-tag { color: var(--text-muted); font-weight: 700; letter-spacing: 0.06em; margin-bottom: 12px; font-size: 0.9rem; }
.ba-before p { color: #c8bcae; line-height: 1.8; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.review-grid--wide { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-card {
    background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 22px;
}
.review-grid--wide .review-card { padding: 30px 28px; }
.review-quote { color: #ede5dc; font-size: 0.98rem; line-height: 1.7; margin-bottom: 12px; }
.review-grid--wide .review-quote { font-size: 1.1rem; line-height: 1.75; }
.review-label { color: var(--point-gold); font-size: 0.85rem; font-weight: 600; }
.reviews-photo { margin-top: 36px; }
.reviews-photo img { border-radius: 18px; max-height: 420px; width: 100%; object-fit: cover; }

/* ---------- About ---------- */
.hero-about {
    position: relative;
    overflow: hidden;
    background: var(--bg-color);
}
.hero-about::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(20,15,12,0.35) 0%, rgba(20,15,12,0.72) 45%, rgba(20,15,12,0.92) 100%),
        var(--hero-img, none) var(--hero-pos, center 39%)/cover no-repeat;
    transform-origin: center;
    animation: kxKen 22s ease-out forwards;
}
.hero-about > * {
    position: relative;
    z-index: 1;
}
.hero-about .hero::before {
    content: none;
    animation: none;
}
.hero-about .section--tight {
    padding-bottom: 72px;
}
.about-belief p { color: #dfd7ce; font-size: 1.08rem; line-height: 2; margin-bottom: 18px; }
.about-belief strong { color: var(--point-gold); font-weight: 700; }
.proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 24px 0 24px;
}
.proof-card {
    min-height: 148px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 24px 20px;
    background: linear-gradient(160deg, rgba(var(--point-gold-rgb), 0.08), rgba(255,255,255,0.025)), var(--card-bg);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    color: var(--text-main);
    text-align: center;
    transition: var(--transition);
}
.proof-card:hover,
.proof-card:focus-visible {
    border-color: rgba(var(--point-gold-rgb), 0.46);
    transform: translateY(-3px);
    outline: none;
}
.proof-icon {
    display: block;
    font-size: 2rem;
    line-height: 1;
}
.proof-label {
    color: #efe4da;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.45;
}
.kx-mobile .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 18px;
}
.kx-mobile .proof-card {
    min-height: 126px;
    padding: 17px 12px;
    border-radius: 13px;
}
.kx-mobile .proof-icon { font-size: 1.75rem; }
.kx-mobile .proof-label { font-size: 0.82rem; }

/* ---------- 최종 CTA ---------- */
.final-cta {
    background: linear-gradient(160deg, rgba(var(--point-gold-rgb), 0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(var(--point-gold-rgb), 0.25); border-radius: 22px;
    padding: 56px 32px; text-align: center;
}
.final-cta .price-anchor { color: var(--text-muted); margin: 14px 0 30px; line-height: 1.9; }
.final-cta .strike { text-decoration: line-through; opacity: 0.7; }

/* ---------- 서브페이지 본문 ---------- */
.prose { max-width: 680px; margin: 0 auto; }
.prose h2 { font-size: 1.3rem; font-weight: 800; margin: 36px 0 14px; }
.prose p { color: #d5cdc2; line-height: 1.9; margin-bottom: 14px; }
.prose ul { margin: 8px 0 18px 4px; }
.prose li { list-style: none; color: #d5cdc2; line-height: 1.9; padding-left: 18px; position: relative; }
.prose li::before { content: '·'; color: var(--point-gold); position: absolute; left: 2px; font-weight: 800; }
.option-box {
    background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 14px;
    padding: 20px 24px; margin: 8px 0 22px;
}
.option-box .opt { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.option-box .opt:last-child { border-bottom: none; }
.option-box .opt .price { color: var(--point-gold); font-weight: 800; }

/* ---------- footer ---------- */
.site-footer { padding: 40px 0; border-top: 1px solid var(--border-subtle); text-align: center; color: var(--text-muted); font-size: 0.86rem; }

/* ---------- fade-in (progressive enhancement: js-anim 있을 때만 숨김) ---------- */
@media (prefers-reduced-motion: reduce) {
    .js-anim .fade-in { opacity: 1 !important; transform: none !important; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- 제품 카드 (works) ---------- */
.reco-label { color: var(--point-gold); font-weight: 700; letter-spacing: 0.06em; margin: 40px 0 20px; font-size: 1.05rem; }
.category-title { color: var(--point-gold); font-weight: 700; font-size: 1.08rem; margin: 44px 0 16px; }
.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.store-card {
    background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 16px;
    overflow: hidden; display: flex; flex-direction: column; transition: var(--transition);
}
.store-card:hover { border-color: rgba(var(--point-gold-rgb), 0.5); transform: translateY(-4px); }
.store-thumb { aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-alt); }
.store-thumb img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.store-card:hover .store-thumb img { transform: scale(1.04); }
.store-info { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; }
.store-info .tag { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 6px; }
.store-info h4 { font-size: 1.06rem; font-weight: 700; margin-bottom: 8px; }
.store-info p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; }
.store-card--reco {
    position: relative;
    border-color: rgba(var(--point-gold-rgb), 0.45);
    box-shadow: 0 0 0 1px rgba(var(--point-gold-rgb), 0.15), 0 8px 24px rgba(var(--point-gold-rgb), 0.08);
}
.store-pick-badge {
    position: absolute; top: 10px; left: 10px; z-index: 1;
    background: var(--point-gold); color: #1a1410; font-size: 0.68rem; font-weight: 800;
    padding: 4px 10px; border-radius: 999px; letter-spacing: 0.03em;
}

/* ---------- 행사 갤러리 (reviews, 확장 구조) ---------- */
.event-block { margin-top: 52px; text-align: left; }
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 18px; align-items: start; }
.event-grid .event-block { margin-top: 0; }
.event-grid .event-block.is-open { grid-column: 1 / -1; }
.event-block-title {
    font-size: 0.96rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.35;
    color: var(--point-gold); text-transform: none; margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
.event-block-title::before {
    content: ''; display: inline-block; width: 18px; height: 2px;
    background: var(--point-gold); border-radius: 2px; flex-shrink: 0;
}
.event-title-copy {
    display: inline-flex; align-items: baseline; gap: 4px 5px; flex-wrap: wrap; min-width: 0;
}
.event-title-main,
.event-title-year {
    white-space: nowrap;
}
.event-title-sub {
    color: var(--text-muted); font-size: 0.82em; font-weight: 600; white-space: nowrap;
}
.event-grid .event-block-title {
    font-size: clamp(0.86rem, 0.78vw, 0.95rem);
}
.event-block--main { margin-top: 0; margin-bottom: 30px; }
.event-block--main .event-block-title { font-size: 1.15rem; }
.event-block-title.ev-toggle { cursor: pointer; user-select: none; }
.event-block-title .ev-count {
    margin-left: auto; color: var(--text-muted); font-weight: 600;
    font-size: 0.85rem; white-space: nowrap;
}
.event-block-title .ev-chevron { display: inline-block; margin-left: 4px; transition: transform 0.3s; }
.event-block.is-open .ev-chevron { transform: rotate(180deg); }
.event-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 10px; }
.event-gallery figure {
    position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3;
    border: 1px solid var(--border-subtle); margin: 0;
}
.event-gallery img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.event-gallery figure:hover img { transform: scale(1.05); }
.event-gallery figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 16px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: #fff;
    font-size: 0.9rem; font-weight: 600;
}
.event-block--main.is-collapsed .event-gallery figure:first-child { aspect-ratio: 21 / 9; }
.event-block.is-collapsed .event-gallery { grid-template-columns: 1fr; }
.event-block.is-collapsed .event-gallery figure { display: none; }
.event-block.is-collapsed .event-gallery figure:first-child {
    display: block; aspect-ratio: 16 / 9; cursor: pointer;
}
.ev-more {
    position: absolute; right: 12px; bottom: 12px;
    background: rgba(20,16,13,0.72); color: #fff; font-weight: 700;
    font-size: 0.85rem; padding: 6px 12px; border-radius: 999px;
    pointer-events: none; backdrop-filter: blur(2px);
}
.event-block.is-open .ev-more { display: none; }

/* ---------- 후기 Q&A (reviews) ---------- */
.reviews-intro { text-align: center; max-width: 620px; margin: 0 auto 56px; }
.reviews-intro p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.9; }
.review-q-block { margin-bottom: 56px; }
.review-q-title { font-size: clamp(1.3rem, 3.5vw, 1.8rem); font-weight: 800; text-align: center; margin-bottom: 30px; }
.review-q-title .q-mark { color: var(--point-gold); margin-right: 6px; }
.card-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ---------- 레슨 CTA 박스 (works·reviews 공통) ---------- */
.secondary-cta-box {
    background: linear-gradient(160deg, rgba(var(--point-gold-rgb), 0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(var(--point-gold-rgb), 0.25); border-radius: 22px;
    padding: 52px 32px; text-align: center; margin-top: 52px;
}
.secondary-cta-box h2 { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 800; line-height: 1.4; margin-bottom: 28px; }
.cta-button {
    display: inline-block; background: var(--point-gold); color: #1a1512; font-weight: 700;
    padding: 15px 32px; border-radius: 12px; transition: var(--transition);
}
.cta-button:hover { background: var(--point-gold-hover); transform: translateY(-2px); }

/* ---------- 오픈채팅 배너 ---------- */
.oc-banner {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    background:
        linear-gradient(135deg, rgba(255, 224, 0, 0.08), rgba(var(--point-gold-rgb), 0.06)),
        var(--card-bg);
    border: 1px solid rgba(var(--point-gold-rgb), 0.22);
    border-radius: 16px;
    padding: 26px 28px;
}
.oc-banner__copy { max-width: 620px; }
.oc-banner__eyebrow {
    color: var(--point-gold); font-size: 0.82rem; font-weight: 800;
    letter-spacing: 0.1em; margin-bottom: 8px;
}
.oc-banner__title {
    color: var(--text-main); font-size: clamp(1.12rem, 2.2vw, 1.45rem);
    font-weight: 800; line-height: 1.35; margin-bottom: 8px;
}
.oc-banner__body {
    color: var(--text-muted); font-size: 0.95rem; line-height: 1.75;
}
.oc-banner__button {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 12px 18px; border-radius: 10px;
    background: rgba(var(--point-gold-rgb), 0.12);
    border: 1px solid rgba(var(--point-gold-rgb), 0.36);
    color: var(--point-gold); font-size: 0.94rem; font-weight: 800;
    transition: var(--transition);
}
.oc-banner__button:hover {
    background: rgba(var(--point-gold-rgb), 0.2);
    border-color: rgba(var(--point-gold-rgb), 0.55);
    transform: translateY(-2px);
}

/* ---------- 유튜브 배너 (works) ---------- */
.youtube-banner {
    display: flex; align-items: center; gap: 18px; margin-top: 36px;
    background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 16px;
    padding: 20px 24px; transition: var(--transition);
}
.youtube-banner:hover { border-color: rgba(var(--point-gold-rgb), 0.5); }
.youtube-banner h4 { color: var(--point-gold); font-size: 0.85rem; letter-spacing: 0.1em; margin-bottom: 6px; }
.youtube-banner p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }
.youtube-icon { width: 42px; height: 42px; fill: #ff0000; flex: 0 0 auto; }

/* ---------- 반응형 ---------- */
@media (max-width: 820px) {
    .section { padding: 60px 0; }
    .card-container { grid-template-columns: 1fr; }
    .store-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }  /* 태블릿 2열 */
    .event-gallery { grid-template-columns: repeat(2, 1fr); }
    .cards { grid-template-columns: repeat(2, 1fr); }  /* 태블릿 2열 */
    .split { grid-template-columns: 1fr; gap: 28px; }
    .split--reverse .split-media { order: 0; }
    .split-media img { max-height: 320px; }
    .beforeafter { grid-template-columns: 1fr; }
    .review-grid { grid-template-columns: 1fr; }
    .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero { min-height: 80vh; }
    .nav-links { gap: 2px; }
    .nav-link { padding: 6px 9px; font-size: 0.85rem; }
    .oc-banner { align-items: flex-start; flex-direction: column; padding: 24px 22px; }
    .oc-banner__button { width: 100%; }
}
@media (max-width: 960px) {
    .event-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .main-nav {
        height: auto;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        flex-wrap: nowrap;
    }
    .nav-links {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-end;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        column-gap: 2px;
    }
    .nav-links::-webkit-scrollbar { display: none; }
}
@media (max-width: 600px) {
    .event-grid { grid-template-columns: 1fr; }
    .cards { grid-template-columns: 1fr; gap: 14px; }
    .store-grid { grid-template-columns: 1fr; gap: 12px; }
    .beforeafter { gap: 20px; }
    .review-grid { gap: 10px; }
    .container { padding: 0 16px; }
    .vcard { padding: 22px 18px; }
    .proof-grid { grid-template-columns: 1fr; }
    .proof-card { min-height: 132px; padding: 20px 18px; }
    .kx-mobile .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kx-mobile .proof-card { min-height: 126px; padding: 17px 12px; }
    .final-cta { padding: 48px 20px; }
    .hero { min-height: 70vh; padding: 72px 0 52px; }
}
@media (max-width: 460px) {
    .nav-logo { font-size: 0.95rem; }
    .nav-brand { gap: 6px; }
    .nav-brand-sub { max-width: none; font-size: 0.68rem; flex-shrink: 0; }
    .nav-links { gap: 4px; }
    .nav-link { padding: 5px 8px; font-size: 0.82rem; }
    .nav-profile { max-width: 7.5rem; }
    .nav-space-switch { padding: 2px; }
    .nav-space-switch__item { padding: 5px 10px; font-size: 0.76rem; }
    .final-cta { padding: 40px 20px; }
    .btn { width: 100%; text-align: center; }
    .cta-row { flex-direction: column; }
    .event-gallery { grid-template-columns: 1fr; }
    .store-grid { grid-template-columns: 1fr; }  /* 모바일 1열 */
    .secondary-cta-box { padding: 40px 20px; }
    .oc-banner { padding: 22px 18px; }
    .oc-banner__button { font-size: 0.9rem; }
    .hero { min-height: 58vh; padding: 60px 0 40px; }
}

/* ==========================================================================
   video.html - 추천 영상 카드
   ========================================================================== */
.video-grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 800px;
    margin: 0 auto;
}

.video-card {
    display: flex;
    flex-direction: row;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: var(--transition);
    align-items: center;
}

.video-card:hover {
    transform: translateY(-4px);
    background: var(--border-subtle);
    border-color: var(--border-light);
}

.video-card .video-thumb {
    width: 40%;
    min-width: 40%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
/* 재생 아이콘 오버레이 (영상 썸네일) */
.vthumb { position: relative; display: block; }
.video-card .vthumb { width: 40%; min-width: 40%; flex-shrink: 0; }
.video-card .vthumb .video-thumb { width: 100%; min-width: 0; }
.vplay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(15, 13, 11, 0.55); color: #fff; font-size: 16px;
    display: flex; align-items: center; justify-content: center; padding-left: 3px;
    pointer-events: none; backdrop-filter: blur(2px); transition: var(--transition);
}
.video-card:hover .vplay { background: var(--point-gold); color: #1a1410; }
@media (max-width: 768px) {
    .video-card .vthumb { width: 100%; min-width: unset; }
}

.video-info {
    padding: 24px;
}

.video-desc {
    color: var(--text-main);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    word-break: keep-all;
}

@media (max-width: 768px) {
    .video-card {
        flex-direction: column;
    }
    .video-card .video-thumb {
        width: 100%;
        min-width: unset;
    }
    .video-info {
        padding: 16px;
    }
    .video-desc {
        font-size: 1rem;
    }
}

/* ==========================================================================
   mmbs.html - 입문 강의 영상 플레이어
   ========================================================================== */
.members-header {
    padding: 60px 24px 20px;
    text-align: center;
}

.members-logo {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--point-gold);
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.members-title {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 10px;
}

.members-sub {
    font-size: 1rem;
    color: var(--text-muted);
}

.members-divider {
    width: 48px;
    height: 2px;
    background: var(--point-gold);
    margin: 20px auto 0;
    border-radius: 2px;
}

.video-list {
    max-width: 780px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.video-item {
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    transition: var(--transition);
}

.video-item:hover {
    border-color: rgba(var(--point-gold-rgb), 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.video-meta {
    padding: 16px 20px 4px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.video-num {
    background: var(--point-gold);
    color: #1a1512;
    font-weight: 800;
    font-size: 0.85rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.video-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
}

.video-wrapper {
    position: relative;
    padding-top: 56.25%;
    margin: 12px 0 0;
    cursor: pointer;
}

.video-wrapper iframe,
.video-wrapper .video-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-wrapper iframe {
    border: none;
}

.video-wrapper .video-thumb {
    object-fit: cover;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.2s;
}

.video-wrapper:hover .play-btn {
    background: rgba(var(--point-gold-rgb), 0.85);
}

.play-btn svg {
    width: 28px;
    height: 28px;
    fill: #fff;
    margin-left: 4px;
}

.members-cta-box {
    max-width: 700px;
    margin: 0 auto;
    border-color: #8B0000;
    background: rgba(139, 0, 0, 0.05);
}

.members-cta-title {
    font-size: clamp(1.2rem, 4vw, 2rem);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 40px;
    word-break: keep-all;
}

.cta-button--red {
    background: #8B0000;
    color: #ffffff;
    box-shadow: 0 4px 24px rgba(139, 0, 0, 0.3);
}

@media (max-width: 480px) {
    .video-list {
        padding: 24px 16px 60px;
        gap: 28px;
    }
    .members-header {
        padding: 48px 20px 16px;
    }
}


/* === intro 디자인 신규 그리드(모바일) === */
@media (max-width: 820px) {
.intro-lessons { grid-template-columns: repeat(2, 1fr) !important; }
.intro-steps { grid-template-columns: 1fr !important; }
.intro-options, .intro-reviews { grid-template-columns: 1fr !important; }
}

/* === lesson 디자인 신규 그리드(모바일) === */
@media (max-width: 820px) {
.lesson-steps, .lesson-modes, .lesson-price, .lesson-reviews { grid-template-columns: 1fr !important; }
}

/* === video 디자인 신규 그리드(모바일) === */
@media (max-width: 820px) {
.free-gate { grid-template-columns: 1fr; }
}


/* === 직접 써본 사람들 실전 후기 === */
.field-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.kx-desktop .field-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.field-card {
    position: relative; display: flex; flex-direction: column; min-height: 176px;
    background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 10px;
    padding: 18px 20px; cursor: pointer; transition: var(--transition);
}
.field-card:hover,
.field-card:focus-visible {
    border-color: rgba(var(--point-gold-rgb), 0.42);
    background: #2a201b;
    transform: translateY(-2px);
}
.field-card:focus-visible { outline: 2px solid rgba(var(--point-gold-rgb), 0.75); outline-offset: 3px; }
.field-card::after { display: none; }
.field-card:has(.field-full)::after {
    content: '전문 보기 →'; display: block; align-self: flex-end; margin-top: 10px;
    color: var(--point-gold); font-size: 0.78rem; font-weight: 800;
}
.field-tag {
    display: inline-block; align-self: flex-start; font-size: 0.7rem; font-weight: 700;
    color: var(--point-gold); border: 1px solid rgba(var(--point-gold-rgb), 0.4);
    border-radius: 999px; padding: 3px 10px; margin-bottom: 12px;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.field-quote {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    color: #e7ded3; font-size: 0.92rem; line-height: 1.65; margin: 0 0 12px; white-space: pre-line;
}
.field-author { color: var(--text-muted); font-size: 0.82rem; font-weight: 600; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.field-quote.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.field-edited { display: block; color: var(--text-muted); font-size: 0.74rem; font-style: italic; margin-top: 6px; opacity: 0.85; }

body.field-modal-open { overflow: hidden; }
.field-modal-overlay {
    position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(10, 7, 5, 0.78); backdrop-filter: blur(6px);
}
.field-modal-overlay[hidden] { display: none; }
.field-modal {
    position: relative; width: min(680px, 100%); max-height: min(78vh, 760px); overflow-y: auto;
    background: #261d18; border: 1px solid rgba(var(--point-gold-rgb), 0.28); border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55); padding: 30px 30px 26px;
}
.field-modal:focus { outline: none; }
.field-modal-close {
    position: sticky; top: 0; float: right; width: 34px; height: 34px; margin: -12px -12px 8px 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #1f1815; border: 1px solid rgba(var(--point-gold-rgb), 0.28); border-radius: 50%;
    color: var(--point-gold); font-size: 1.45rem; line-height: 1; cursor: pointer; z-index: 1;
}
.field-modal-close:hover,
.field-modal-close:focus-visible { border-color: rgba(var(--point-gold-rgb), 0.68); background: #2d211b; outline: none; }
.field-modal-tag {
    display: inline-block; color: var(--point-gold); border: 1px solid rgba(var(--point-gold-rgb), 0.42);
    border-radius: 999px; padding: 5px 12px; font-size: 0.78rem; font-weight: 800; margin-bottom: 18px;
}
.field-modal-quote { clear: both; color: #f1e7dc; font-size: 1rem; line-height: 1.9; white-space: pre-line; margin: 0; }
.field-modal-footer {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border-subtle);
}
.field-modal-author { color: var(--text-muted); font-size: 0.88rem; font-weight: 700; }
.field-modal-edited { color: var(--text-muted); font-size: 0.78rem; font-style: italic; opacity: 0.9; }
@media (max-width: 820px) {
    .field-reviews { grid-template-columns: 1fr; }
    .field-card { min-height: 0; padding: 17px 18px; }
    .field-modal-overlay { padding: 14px; }
    .field-modal { max-height: 84vh; padding: 26px 22px 22px; }
}

/* ---------- index 전용 3열 그리드 ---------- */
.kx-cards3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 880px) { .kx-cards3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kx-cards3 { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- 모바일 store-card 가로 레이아웃 (컴팩트) ---------- */
@media (max-width: 600px) {
    .store-card { flex-direction: row; }
    .store-thumb { width: 90px; flex: 0 0 90px; aspect-ratio: 1/1; }
    .store-info { padding: 12px 14px; }
    .store-info h4 { font-size: 0.95rem; margin-bottom: 4px; }
    .store-info p { font-size: 0.85rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- solution 섹션 이미지 모바일 landscape ---------- */
@media (max-width: 880px) {
    .solution-img-wrap {
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
    }
}

/* ========== mobile.css 흡수 (듀얼 마크업 토글 + 모바일 전용 디자인) ========== */
/* ==========================================================================
   mobile.css - 듀얼 마크업 토글 + 모바일 전용 디자인 (색감통일 다크 톤)
   적용 규칙: 1024px 초과 = 데스크톱(기존) 그대로 / 1024px 이하 = 모바일 디자인
   모든 모바일 스타일은 .kx-mobile 하위로 스코프 → 데스크톱 CSS와 영구 격리
   ========================================================================== */

/* --- 토글: 기본(데스크톱) --- */
.kx-mobile { display: none; }

@media (max-width: 1024px) {
  .kx-desktop { display: none !important; }
  .kx-mobile  { display: block !important; }

  /* 모바일에서 바깥 배경(셸 양옆 여백)도 다크로 통일 */
  body { background: #0E0805 !important; }
}

/* --- 모바일 셸: 실제 폰 폭 컬럼(430px) 가운데 정렬 --- */
.kx-mobile .kx-shell {
  max-width: 430px;
  margin: 0 auto;
  background: #1A0F0A;
  min-height: 100vh;
  overflow: hidden;
}

/* --- 공유 컴포넌트 (.kx-mobile 스코프) --- */
.kx-mobile .kx-cta {
  display: flex; align-items: center; justify-content: center;
  height: 54px; border-radius: 13px;
  background: var(--kx-terra); color: #FBEFE6;
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(217,74,26,0.4);
}
.kx-mobile .kx-eye {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  color: var(--point-gold); font-weight: 700; font-size: 12px; letter-spacing: 0.16em;
  margin: 0 0 16px;
}
.kx-mobile .kx-eye span { width: 22px; height: 1px; background: var(--point-gold); display: block; }
.kx-mobile .kx-h2 {
  text-align: center;
  font-size: 27px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em;
  color: #F4E7DA; margin: 0 0 16px; word-break: keep-all;
}
.kx-mobile .kx-serif {
  font-family: 'Noto Serif KR', serif; font-weight: 500; font-style: italic; color: var(--point-gold);
}

/* ========== index.html 인라인 그리드 유틸리티 ========== */
/* grid 속성만 단독으로 있는 인라인 style → 클래스 이전 */
/* kx-scene: scene 카드 5열 그리드 */
.kx-scene {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 13px;
}

/* ========== 마술 놀이터 ========== */
.playground-shell {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  padding: 120px 0 80px;
}

.playground-header {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
}

.playground-eyebrow {
  color: var(--point-gold);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.playground-header h1 {
  font-size: clamp(2.1rem, 7vw, 4.4rem);
  line-height: 1.08;
}

.playground-header > p:not(.playground-eyebrow) {
  color: var(--text-muted);
  font-size: 1.08rem;
}

.playground-auth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}

.playground-auth__text {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.playground-button,
.playground-tabs button {
  appearance: none;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--kx-terra);
  color: var(--text-main);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-height: 42px;
  padding: 0 16px;
  transition: var(--transition);
}

.playground-button:hover,
.playground-tabs button:hover,
.playground-tabs button.is-active {
  background: var(--point-gold-hover);
  border-color: rgba(var(--point-gold-rgb), 0.55);
}

.playground-button--ghost {
  background: transparent;
  color: var(--text-muted);
}

.playground-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.playground-tabs button {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  min-height: 38px;
  padding: 0 13px;
}

.playground-tabs button.is-active {
  color: var(--text-main);
}

.playground-list {
  display: grid;
  gap: 12px;
}

.playground-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  gap: 16px;
  align-items: start;
}

.playground-compose {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  margin-bottom: 18px;
  padding: 18px;
}

.playground-compose h2 {
  font-size: 1.12rem;
  margin-bottom: 12px;
}

.playground-compose form {
  display: grid;
  gap: 12px;
}

.playground-compose label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.playground-compose input,
.playground-compose textarea,
.playground-compose select {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-main);
  font: inherit;
  min-height: 44px;
  padding: 10px 12px;
}

.playground-compose textarea {
  min-height: 128px;
  resize: vertical;
}

.playground-compose form.is-disabled {
  opacity: 0.72;
}

.playground-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.playground-form-status {
  color: var(--text-muted);
  min-height: 1.4em;
}

.playground-form-status.is-error {
  color: #ffb49d;
}

.playground-post,
.playground-empty,
.playground-detail {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(38, 29, 24, 0.78);
  padding: 20px;
}

.playground-detail {
  position: sticky;
  top: 92px;
  min-height: 240px;
}

.playground-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.playground-post__meta span {
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1;
  padding: 7px 9px;
}

.playground-post__title,
.playground-empty h2,
.playground-detail__title {
  font-size: 1.18rem;
  line-height: 1.4;
  margin-bottom: 8px;
}

.playground-post__body,
.playground-detail__body,
.playground-empty p,
.playground-loading {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.75;
}

.playground-post__body.is-locked {
  color: #d0bba8;
}

.mypage-profile__title {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.mypage-profile__title .kali-badge-img {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
}

.playground-link-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--point-gold);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  margin-top: 12px;
  padding: 0;
}

.playground-detail__section {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
}

.playground-detail__section h3 {
  font-size: 1rem;
}

.playground-answer,
.playground-comment {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  padding: 12px;
}

.playground-answer p,
.playground-comment p {
  color: var(--text-muted);
}

.playground-comment strong {
  display: block;
  margin-bottom: 4px;
}

.playground-comment.is-reply {
  margin-left: 18px;
}

.playground-comment-form {
  display: grid;
  gap: 8px;
}

.playground-comment-form textarea,
.playground-comment-form select,
.playground-comment-form input {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-main);
  font: inherit;
  padding: 10px 12px;
}

.admin-shell {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  padding: 120px 0 80px;
}

.admin-list {
  display: grid;
  gap: 12px;
}

.admin-card {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(38, 29, 24, 0.78);
  display: grid;
  gap: 8px;
  padding: 18px;
}
.admin-card[hidden] { display: none; }

.admin-card h2 {
  font-size: 1.08rem;
  line-height: 1.4;
}

.admin-card p,
.admin-card span {
  color: var(--text-muted);
}

.admin-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 12px;
}

.admin-stat {
  display: grid;
  gap: 4px;
}

.admin-stat__label {
  font-size: 0.85rem;
}

.admin-stat__value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary, inherit);
}

.admin-funnel {
  display: grid;
  gap: 6px;
}

.admin-funnel__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 6px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.9rem;
}

.mypage-badges {
  display: grid;
  gap: 12px;
  margin: 14px 0 18px;
}

.mypage-section-title {
  margin: 0;
  color: var(--text-main);
  font-size: 1.08rem;
  line-height: 1.4;
}

.mypage-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
}

.mypage-badge-tile {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 154px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(38, 29, 24, 0.78);
  color: var(--text-main);
  font: inherit;
  text-align: left;
}

button.mypage-badge-tile {
  cursor: pointer;
}

button.mypage-badge-tile:hover,
.mypage-badge-tile.is-active {
  border-color: rgba(var(--point-gold-rgb), 0.58);
  background: rgba(var(--point-gold-rgb), 0.11);
}

.mypage-badge-tile.is-active {
  box-shadow: inset 0 0 0 1px rgba(var(--point-gold-rgb), 0.22);
}

.mypage-badge-tile.is-unowned {
  opacity: 0.64;
}

.mypage-badge-tile__image {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.mypage-badge-tile.is-coming-soon .mypage-badge-tile__image {
  filter: blur(3px);
}

.mypage-badge-tile__text {
  display: grid;
  gap: 4px;
}

.mypage-badge-tile__text strong {
  color: var(--text-main);
  font-size: 0.94rem;
  line-height: 1.35;
}

.mypage-badge-tile__text span {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.mypage-badge-tile__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(9, 5, 3, 0.6);
  color: #f3ece3;
  font-size: 0.84rem;
  font-weight: 900;
}

.mypage-badge-tile__mark {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.mypage-quest-badges {
  display: grid;
  gap: 14px;
  margin: 14px 0 20px;
}

.mypage-quest-badges .quest-badge-group {
  display: grid;
  gap: 9px;
}

.mypage-quest-badges .quest-badge-group__title {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.mypage-quest-badges .quest-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
}

.mypage-quest-badges .quest-badge-tile {
  --quest-metal: #4a4d50;
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  min-height: 116px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--quest-metal) 54%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--quest-metal) 26%, transparent), rgba(26, 19, 15, 0.82)),
    rgba(22, 16, 13, 0.88);
  color: var(--text-main);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.mypage-quest-badges .quest-badge-tile--common { --quest-metal: #4a4d50; }
.mypage-quest-badges .quest-badge-tile--uncommon { --quest-metal: #5f7f92; }
.mypage-quest-badges .quest-badge-tile--rare { --quest-metal: #7c6d88; }
.mypage-quest-badges .quest-badge-tile--epic { --quest-metal: #8d9ca3; }
.mypage-quest-badges .quest-badge-tile--legendary { --quest-metal: #b7c9d9; }
.mypage-quest-badges .quest-badge-tile--locked { --quest-metal: #9a7a46; }
.mypage-quest-badges .quest-badge-tile--secret { --quest-metal: #7b6aa8; }

.mypage-quest-badges .quest-badge-tile.is-unowned {
  opacity: 0.78;
}

.mypage-quest-badges .quest-badge-tile__media {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--quest-metal) 58%, rgba(255, 255, 255, 0.16));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.18), color-mix(in srgb, var(--quest-metal) 34%, rgba(0, 0, 0, 0.42)));
}

.mypage-quest-badges .quest-badge-tile__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mypage-quest-badges .quest-badge-tile__placeholder {
  display: none;
  padding: 0 7px;
  color: #f4efe8;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.mypage-quest-badges .quest-badge-tile__media.is-placeholder .quest-badge-tile__placeholder {
  display: block;
}

.mypage-quest-badges .quest-badge-tile__body {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.mypage-quest-badges .quest-badge-tile__name {
  color: var(--text-main);
  font-size: 0.94rem;
  line-height: 1.35;
}

.mypage-quest-badges .quest-badge-tile__meta,
.mypage-quest-badges .quest-badge-tile__hint,
.mypage-quest-badges .quest-badge-progress__text {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.mypage-quest-badges .quest-badge-progress {
  display: grid;
  gap: 4px;
}

.mypage-quest-badges .quest-badge-progress__bar {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.mypage-quest-badges .quest-badge-progress__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--quest-metal), #f1eee8);
}

.mypage-quest-badges .quest-badge-tile__earned {
  justify-self: start;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--quest-metal) 58%, rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f4efe8;
  font-size: 0.72rem;
  font-weight: 900;
}

.mypage-quest-badges .quest-badge-tile--secret {
  background:
    radial-gradient(circle at 15% 8%, rgba(183, 166, 231, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(64, 49, 88, 0.76), rgba(20, 14, 24, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 0 18px rgba(123, 106, 168, 0.12);
}

.mypage-quest-badges .quest-badge-tile--locked {
  background:
    radial-gradient(circle at 15% 8%, rgba(214, 166, 92, 0.22), transparent 42%),
    linear-gradient(145deg, rgba(61, 46, 27, 0.78), rgba(21, 15, 11, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 16px rgba(154, 122, 70, 0.1);
}

.mypage-quest-badges .quest-badge-tile--locked .quest-badge-tile__name {
  color: #ead3a5;
}

.mypage-quest-badges .quest-badge-tile__media--locked {
  filter: blur(0.2px) brightness(0.82);
}

.mypage-quest-badges .quest-badge-tile__media--secret {
  filter: blur(0.2px);
}

.mypage-quest-badges .quest-badge-tile__unknown {
  color: #f3edf8;
  font-size: 0.86rem;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(206, 190, 255, 0.45);
}

.badge-celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(8, 5, 3, 0.72);
  backdrop-filter: blur(4px);
}

.badge-celebration-card {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(100%, 360px);
  padding: 28px 24px 24px;
  border: 1px solid rgba(var(--point-gold-rgb), 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--point-gold-rgb), 0.18), transparent 42%),
    rgba(29, 21, 16, 0.96);
  color: var(--text-main);
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  text-align: center;
}

.badge-celebration-close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.badge-celebration-close:hover,
.badge-celebration-close:focus-visible {
  border-color: rgba(var(--point-gold-rgb), 0.5);
  color: var(--text-main);
}

.badge-celebration-media {
  --quest-metal: #b7c9d9;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin-bottom: 14px;
}

.badge-celebration-media .quest-badge-tile__media,
.badge-celebration-sponsor-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  overflow: hidden;
  border: 1px solid rgba(var(--point-gold-rgb), 0.5);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), rgba(var(--point-gold-rgb), 0.12)),
    rgba(0, 0, 0, 0.24);
}

.badge-celebration-media .quest-badge-tile__image,
.badge-celebration-sponsor-media .mypage-badge-tile__image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.badge-celebration-media .quest-badge-tile__placeholder {
  display: none;
  padding: 0 8px;
  color: #f6efe5;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.badge-celebration-media .quest-badge-tile__media.is-placeholder .quest-badge-tile__placeholder {
  display: block;
}

.badge-celebration-title {
  margin: 0;
  color: var(--text-main);
  font-size: 1.28rem;
  line-height: 1.3;
}

.badge-celebration-meta {
  margin: 6px 0 0;
  color: rgba(var(--point-gold-rgb), 0.82);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.4;
}

.badge-celebration-message,
.badge-celebration-condition {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.badge-celebration-condition {
  margin-top: 6px;
  color: #e8d9c4;
}

.badge-celebration-confirm {
  margin-top: 18px;
}

@media (max-width: 640px) {
  .playground-shell {
    width: min(100% - 28px, 430px);
    padding: 96px 0 56px;
  }

  .playground-auth,
  .playground-tabs {
    align-items: stretch;
  }

  .playground-tabs button {
    flex: 1 1 calc(50% - 8px);
  }

  .playground-board,
  .playground-field-grid {
    grid-template-columns: 1fr;
  }

  .playground-detail {
    position: static;
  }

  .admin-shell {
    width: min(100% - 28px, 430px);
    padding: 96px 0 56px;
  }
}

/* ========== 모임 후기 작성 ========== */
.event-review-app {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(38, 29, 24, 0.72);
  padding: 22px;
}

.event-review-title {
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.35;
  margin-bottom: 8px;
}

.event-review-muted,
.event-review-status,
.event-review-count {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.75;
}

.event-review-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.event-review-field {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.event-review-field input,
.event-review-field textarea {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-main);
  font: inherit;
  min-height: 44px;
  padding: 10px 12px;
}

.event-review-field textarea {
  resize: vertical;
}

.event-review-photos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.event-review-photo {
  appearance: none;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  gap: 6px;
  padding: 6px;
  text-align: left;
}

.event-review-photo img {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  object-fit: cover;
  width: 100%;
}

.event-review-photo span {
  font-size: 0.78rem;
  line-height: 1.35;
}

.event-review-photo.is-selected {
  border-color: rgba(var(--point-gold-rgb), 0.75);
  box-shadow: 0 0 0 2px rgba(var(--point-gold-rgb), 0.18);
}

.event-review-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.event-review-card {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: 6px;
  padding-top: 12px;
}

.event-review-card a {
  color: var(--text-main);
  font-weight: 800;
}

.event-review-card p {
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.65;
  max-height: 5em;
  overflow: hidden;
}

.event-review-card span {
  color: var(--point-gold);
  font-size: 0.82rem;
  font-weight: 800;
}

.event-review-status.is-error {
  color: #ffb49d;
}

@media (max-width: 760px) {
  .event-review-photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Magic Playground — YouTube lite embed
   ========================================================================== */

.yt-lite {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #120d0a;
  border: 1px solid var(--border-light);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.yt-lite__button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  cursor: pointer;
  background-color: #120d0a;
  background-size: cover;
  background-position: center;
  color: var(--text-main);
  font: inherit;
}

.yt-lite__button::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.36)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.66));
}

.yt-lite__button:focus-visible {
  outline: 3px solid var(--point-gold);
  outline-offset: -3px;
}

.yt-lite__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66px;
  height: 66px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--point-gold);
  color: #1a1512;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42);
  transition:
    transform 0.18s ease,
    background-color 0.18s ease;
}

.yt-lite__button:hover .yt-lite__play {
  transform: translate(-50%, -50%) scale(1.06);
  background: var(--point-gold-hover);
}

.yt-lite__label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  color: var(--text-main);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: left;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.yt-lite__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.yt-lite--invalid {
  display: grid;
  place-items: center;
  padding: 18px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 640px) {
  .yt-lite {
    border-radius: 12px;
  }
  .yt-lite__play {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }
  .yt-lite__label {
    left: 14px;
    right: 14px;
    bottom: 12px;
    font-size: 0.88rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yt-lite__play {
    transition: none;
  }
  .yt-lite__button:hover .yt-lite__play {
    transform: translate(-50%, -50%);
  }
}

/* ---------- magic playground board v2 pg-prefix ---------- */
.pg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 auto 18px;
  max-width: var(--maxw);
}

.pg-tab,
.pg-prefix-filter-button,
.pg-write-button,
.pg-more,
.pg-submit,
.pg-compose-close,
.pg-like-button,
.pg-answer-helpful-button,
.pg-share-button,
.pg-delete-button,
.pg-compose-link {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-main);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}

.pg-tab,
.pg-prefix-filter-button {
  min-height: 38px;
  padding: 7px 12px;
  font-size: 0.9rem;
}

.pg-tab.is-active,
.pg-prefix-filter-button.is-active,
.pg-write-button,
.pg-submit,
.pg-like-button.is-active,
.pg-answer-helpful-button.is-active {
  border-color: rgba(var(--point-gold-rgb), 0.55);
  background: rgba(var(--point-gold-rgb), 0.16);
  color: var(--point-gold);
}

.pg-tab:hover,
.pg-prefix-filter-button:hover,
.pg-write-button:hover,
.pg-more:hover,
.pg-submit:hover,
.pg-compose-close:hover,
.pg-like-button:hover,
.pg-answer-helpful-button:hover,
.pg-share-button:hover,
.pg-delete-button:hover,
.pg-compose-link:hover {
  border-color: rgba(var(--point-gold-rgb), 0.55);
  color: var(--point-gold-hover);
}

.pg-prefix-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.pg-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(18, 13, 10, 0.62);
}

.pg-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.94rem;
}

.pg-table th,
.pg-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  vertical-align: middle;
}

.pg-table th {
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
}

.pg-table th:nth-child(1),
.pg-table td:nth-child(1) {
  width: 86px;
}

.pg-table th:nth-child(3),
.pg-table td:nth-child(3) {
  width: 116px;
}

.pg-table th:nth-child(4),
.pg-table td:nth-child(4),
.pg-table th:nth-child(5),
.pg-table td:nth-child(5),
.pg-table th:nth-child(6),
.pg-table td:nth-child(6) {
  width: 72px;
  text-align: center;
}

.pg-notice-row {
  background: linear-gradient(90deg, rgba(var(--point-gold-rgb), 0.14), rgba(var(--point-gold-rgb), 0.035));
}

.pg-notice-row .pg-title-button {
  color: #fff4e8;
  font-weight: 800;
}

.pg-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 24px;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(var(--point-gold-rgb), 0.28);
  background: rgba(var(--point-gold-rgb), 0.08);
  color: var(--point-gold);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.pg-prefix--question {
  color: color-mix(in srgb, var(--point-gold) 82%, #f4efe9);
  border-color: rgba(var(--point-gold-rgb), 0.38);
}

.pg-prefix--tool {
  color: color-mix(in srgb, var(--point-gold) 68%, #ffd7a8);
  border-color: rgba(var(--point-gold-rgb), 0.32);
}

.pg-prefix--meeting {
  color: color-mix(in srgb, var(--point-gold) 58%, #f4efe9);
  border-color: rgba(var(--point-gold-rgb), 0.25);
}

.pg-prefix--magazine {
  color: color-mix(in srgb, var(--point-gold) 76%, #ffe6bd);
  border-color: rgba(var(--point-gold-rgb), 0.45);
  background: rgba(var(--point-gold-rgb), 0.13);
}

.pg-title-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-main);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.pg-title-button:hover {
  color: var(--point-gold-hover);
}

.pg-pin,
.pg-comment-count,
.pg-lock {
  color: var(--point-gold);
  font-weight: 900;
}

.pg-author-cell,
.pg-date-cell,
.pg-count-cell {
  color: var(--text-muted);
  font-size: 0.86rem;
}

.pg-more,
.pg-write-button,
.pg-submit,
.pg-compose-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  margin-top: 14px;
}

.pg-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 180px;
  padding: 28px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(var(--point-gold-rgb), 0.08), rgba(255, 255, 255, 0.025)), var(--bg-alt);
  color: var(--text-muted);
  text-align: center;
}

.pg-empty strong {
  color: var(--text-main);
  font-size: 1rem;
}

.pg-empty p {
  max-width: 520px;
  margin: 0;
  line-height: 1.75;
}

.pg-empty-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--point-gold);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pg-loading,
.pg-detail-placeholder,
.pg-detail-status,
.pg-compose-status {
  color: var(--text-muted);
}

.pg-detail,
.pg-compose {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 18px;
}

.pg-detail-head h2,
.pg-compose-head h2 {
  margin: 8px 0 10px;
  color: var(--text-main);
  font-size: 1.24rem;
  line-height: 1.45;
}

.pg-detail-meta,
.pg-detail-actions,
.pg-compose-head,
.pg-compose-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.pg-detail-meta {
  color: var(--text-muted);
  font-size: 0.86rem;
}

.pg-detail-actions {
  margin-top: 14px;
}

.pg-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0 18px;
}

.pg-like-button,
.pg-share-button,
.pg-delete-button,
.pg-compose-close {
  min-height: 36px;
  padding: 6px 11px;
}

.pg-share-status {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.pg-delete-button {
  border-color: rgba(255, 130, 110, 0.35);
  color: #ffb49d;
}

.pg-answer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pg-answer-helpful-button {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 0.82rem;
}

.answer-role-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid rgba(var(--point-gold-rgb), 0.42);
  border-radius: 999px;
  color: var(--point-gold);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.45;
  vertical-align: middle;
}

.pg-report-button {
  min-height: 28px;
  margin-top: 8px;
  padding: 3px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.pg-report-button:hover {
  border-color: rgba(var(--point-gold-rgb), 0.55);
  color: var(--point-gold);
}

.pg-detail-body,
.pg-locked-body,
.pg-answer,
.pg-comment,
.pg-compose-guide {
  margin-top: 16px;
  color: #eadfd4;
  line-height: 1.85;
}

.pg-locked-body {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.025);
}

.pg-detail-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}

.pg-detail-section h3 {
  margin: 0 0 10px;
  color: var(--point-gold);
  font-size: 0.96rem;
}

.pg-answer,
.pg-comment {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.pg-compose-closed {
  display: flex;
  justify-content: flex-end;
}

.pg-compose-guide {
  border: 1px solid rgba(var(--point-gold-rgb), 0.2);
  border-radius: 8px;
  padding: 14px;
  background: rgba(var(--point-gold-rgb), 0.07);
}

.pg-compose-guide strong {
  display: block;
  margin-bottom: 8px;
  color: var(--point-gold);
}

.pg-compose-guide p,
.pg-compose-examples {
  margin: 5px 0 0;
  color: #e8dace;
  font-size: 0.92rem;
}

.pg-compose label {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.pg-compose input,
.pg-compose textarea,
.pg-compose select {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: #120d0a;
  color: var(--text-main);
  font: inherit;
  padding: 10px 11px;
}

.pg-compose textarea {
  resize: vertical;
}

.pg-compose-grid > label {
  flex: 1 1 220px;
}

.pg-compose-badge-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.pg-compose-badge-picker legend {
  padding: 0 4px;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.pg-compose .pg-compose-badge-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-main);
  cursor: pointer;
}

.pg-compose-badge-option:has(input:checked) {
  border-color: rgba(var(--point-gold-rgb), 0.58);
  background: rgba(var(--point-gold-rgb), 0.1);
}

.pg-compose .pg-compose-badge-option input {
  width: auto;
  margin: 0;
}

.pg-compose-badge-option img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

@media (max-width: 720px) {
  .pg-tabs,
  .pg-prefix-filter {
    gap: 6px;
  }

  .pg-tab,
  .pg-prefix-filter-button {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    padding: 7px 8px;
    font-size: 0.84rem;
  }

  .pg-table-wrap {
    overflow-x: visible;
  }

  .pg-table,
  .pg-table tbody,
  .pg-table tr,
  .pg-table td {
    display: block;
    width: 100%;
  }

  .pg-table thead {
    display: none;
  }

  .pg-table tr {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "prefix title"
      "meta meta";
    gap: 4px 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
  }

  .pg-table td {
    padding: 0;
    border-bottom: 0;
  }

  .pg-prefix-cell {
    grid-area: prefix;
  }

  .pg-title-cell {
    grid-area: title;
    min-width: 0;
  }

  .pg-title-button {
    width: 100%;
    justify-content: flex-start;
    line-height: 1.45;
  }

  .pg-author-cell,
  .pg-date-cell,
  .pg-count-cell {
    display: inline;
    width: auto;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: left;
  }

  .pg-author-cell {
    grid-area: meta;
  }

  .pg-date-cell,
  .pg-count-cell {
    grid-area: meta;
    padding-left: 0;
    margin-left: 0;
  }

  .pg-author-cell::after,
  .pg-date-cell::after,
  .pg-count-cell:first-of-type::after {
    content: " · ";
    color: var(--text-muted);
  }

  .pg-detail,
  .pg-compose {
    padding: 14px;
  }
}

/* ---------- pg aesthetic: cozy record cards ---------- */
:root {
  --brass-gold: #C99A5B;
  --brass-gold-rgb: 201, 154, 91;
  --brass-gold-soft: rgba(201, 154, 91, 0.16);
}

.pg-table-wrap:has(.pg-table--cards) {
  overflow-x: visible;
  border: 0;
  background: transparent;
}

.pg-table--cards,
.pg-table--cards tbody,
.pg-table--cards tr,
.pg-table--cards td {
  display: block;
  width: 100%;
}

.pg-table--cards {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  font-size: 0.94rem;
}

.pg-table--cards thead {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pg-table--cards tbody tr {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "prefix title title title title"
    ". author date views likes";
  gap: 10px 14px;
  margin-bottom: 12px;
  padding: 17px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background:
    linear-gradient(135deg, var(--brass-gold-soft), rgba(255, 255, 255, 0.025)),
    var(--card-bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.pg-table--cards tbody tr:last-child {
  margin-bottom: 0;
}

.pg-table--cards tbody tr:hover {
  border-color: rgba(var(--brass-gold-rgb), 0.34);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

.pg-table--cards tbody tr.pg-notice-row {
  border-left: 3px solid var(--brass-gold);
  background:
    linear-gradient(90deg, rgba(var(--point-gold-rgb), 0.14), rgba(var(--point-gold-rgb), 0.035)),
    linear-gradient(135deg, rgba(var(--brass-gold-rgb), 0.13), rgba(255, 255, 255, 0.025)),
    var(--card-bg);
}

.pg-table--cards td {
  min-width: 0;
  padding: 0;
  border-bottom: 0;
}

.pg-table--cards .pg-prefix-cell {
  grid-area: prefix;
}

.pg-table--cards .pg-title-cell {
  grid-area: title;
}

.pg-table--cards .pg-author-cell {
  grid-area: author;
}

.pg-table--cards .pg-date-cell {
  grid-area: date;
}

.pg-table--cards .pg-count-cell:nth-of-type(5) {
  grid-area: views;
}

.pg-table--cards .pg-count-cell:nth-of-type(6) {
  grid-area: likes;
}

.pg-table--cards .pg-title-button {
  width: 100%;
  color: var(--text-main);
  font-weight: 800;
  line-height: 1.45;
}

.pg-table--cards .pg-title-button:hover {
  color: var(--brass-gold);
}

.pg-table--cards .pg-prefix {
  border-radius: 999px;
  min-height: 26px;
  padding: 3px 9px;
}

.pg-table--cards .pg-author-cell,
.pg-table--cards .pg-date-cell,
.pg-table--cards .pg-count-cell {
  align-self: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: left;
}

@media (max-width: 720px) {
  .pg-table--cards tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 14px;
  }

  .pg-table--cards .pg-prefix-cell {
    flex: 0 0 auto;
  }

  .pg-table--cards .pg-title-cell {
    flex: 1 1 calc(100% - 86px);
  }

  .pg-table--cards .pg-author-cell,
  .pg-table--cards .pg-date-cell,
  .pg-table--cards .pg-count-cell {
    flex: 0 1 auto;
  }

  .pg-table--cards .pg-title-button {
    min-height: 44px;
  }
}

/* ---------- pg aesthetic: tabs, chips, empty ---------- */
.pg-tabs .pg-tab.is-active,
.pg-tabs .pg-tab[aria-selected="true"],
.pg-prefix-filter .pg-prefix-filter-button.is-active,
.pg-prefix-filter .pg-prefix-filter-button[aria-selected="true"] {
  border-color: var(--brass-gold);
  background: linear-gradient(135deg, var(--brass-gold), #e7bd7b);
  color: #1a1512;
  box-shadow: 0 10px 24px rgba(var(--brass-gold-rgb), 0.19);
}

.pg-tabs .pg-tab:not(.is-active):not([aria-selected="true"]):hover,
.pg-prefix-filter .pg-prefix-filter-button:not(.is-active):not([aria-selected="true"]):hover {
  border-color: rgba(var(--brass-gold-rgb), 0.42);
  color: var(--text-main);
}

.pg-empty.pg-empty {
  min-height: 190px;
  padding: 42px 20px;
  border: 1px dashed rgba(var(--brass-gold-rgb), 0.28);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(var(--brass-gold-rgb), 0.08), rgba(255, 255, 255, 0.02)),
    var(--bg-alt);
  color: var(--text-muted);
  text-align: center;
}

.pg-empty.pg-empty strong,
.pg-empty.pg-empty p {
  color: var(--text-muted);
}

.pg-tabs .pg-tab:focus-visible,
.pg-prefix-filter .pg-prefix-filter-button:focus-visible {
  outline: 2px solid rgba(var(--brass-gold-rgb), 0.55);
  outline-offset: 2px;
}

.pg-empty.pg-empty .pg-empty-icon {
  stroke: var(--brass-gold);
}

@media (max-width: 720px) {
  .pg-tabs,
  .pg-prefix-filter {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 2px 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pg-tabs::-webkit-scrollbar,
  .pg-prefix-filter::-webkit-scrollbar {
    display: none;
  }

  .pg-tabs .pg-tab,
  .pg-prefix-filter .pg-prefix-filter-button {
    flex: 0 0 auto;
    min-width: max-content;
    scroll-snap-align: start;
  }
}

/* ---------- pg badges: brass club pins ---------- */
.pg-badge {
  --badge-bg: rgba(var(--brass-gold-rgb), 0.14);
  --badge-border: rgba(var(--brass-gold-rgb), 0.42);
  --badge-text: #e6c28c;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--badge-border);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    var(--badge-bg);
  color: var(--badge-text);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}

.pg-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  flex: 0 0 auto;
}

.pg-detail-meta .pg-badge,
.pg-comment strong .pg-badge {
  margin-left: 6px;
}

/* ---------- pg mobile cta ---------- */
.pg-mobile-cta {
  display: none;
}

@media (max-width: 720px) {
  .pg-mobile-cta {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(400px, calc(100vw - 28px));
    min-height: 48px;
    border: 1px solid rgba(var(--point-gold-rgb), 0.24);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--point-gold), #ed8a4e);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
    color: #1a1512;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transform: translateX(-50%);
    transition: transform 120ms ease, box-shadow 120ms ease;
  }

  .pg-mobile-cta:active {
    transform: translateX(-50%) scale(0.985);
  }

  main[class$="-shell"] > div:has(> [data-post-list]) {
    padding-bottom: 80px;
  }
}

/* ---------- phm forum layout: PH-style archive ---------- */
.phm-forum-shell {
  width: min(1280px, calc(100% - 36px)); max-width: 1280px; display: grid; grid-template-columns: 250px minmax(0, 1fr) 320px; gap: 18px;
  align-items: start; margin: 0 auto; padding-top: 118px;
}
.phm-sidebar {
  position: sticky; top: 18px; height: fit-content; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(var(--brass-gold-rgb), 0.08), rgba(255, 255, 255, 0.018)),
    rgba(27, 19, 14, 0.92);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}
.phm-sidebar {
  display: grid; gap: 20px; padding: 22px;
}
.phm-sidebar > * {
  min-width: 0;
}
.phm-sidebar-brand {
  display: grid; gap: 10px;
}
.phm-sidebar-eyebrow,
.phm-feed-eyebrow {
  margin: 0; color: var(--brass-gold); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em;
}
.phm-sidebar-title {
  margin: 0; color: var(--text-main); font-size: clamp(1.82rem, 2.4vw, 2.45rem); line-height: 1.1;
}
.phm-sidebar-desc,
.phm-feed-header p {
  margin: 0; color: var(--text-muted); line-height: 1.68;
}
.phm-sidebar-tabs nav,
.phm-sidebar-tabs .pg-tabs {
  display: grid; max-width: none; gap: 8px; margin: 0;
}
.phm-sidebar-tabs nav button,
.phm-sidebar-tabs .pg-tab {
  display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: rgba(255, 255, 255, 0.035); color: var(--text-muted); text-align: left;
  font: inherit; font-size: 0.92rem; font-weight: 800; cursor: pointer; padding: 0 13px;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}
.phm-sidebar-tabs nav button:hover,
.phm-sidebar-tabs .pg-tab:hover {
  border-color: rgba(var(--brass-gold-rgb), 0.42); color: var(--text-main); transform: translateX(2px);
}
.phm-sidebar-tabs nav button.is-active,
.phm-sidebar-tabs .pg-tab.is-active,
.phm-sidebar-tabs .pg-tab[aria-selected="true"] {
  border-color: var(--brass-gold);
  background:
    linear-gradient(135deg, rgba(var(--brass-gold-rgb), 0.28), rgba(var(--point-gold-rgb), 0.18)),
    rgba(255, 255, 255, 0.045);
  color: #f8dfb9; box-shadow: inset 3px 0 0 var(--brass-gold);
}
.phm-feed {
  min-width: 0; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)),
    rgba(22, 16, 12, 0.72);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22); padding: 0 18px 18px;
}
.phm-feed-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 0 -18px 16px;
  padding: 20px 18px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.phm-feed-header > div:first-child {
  display: grid; gap: 8px; min-width: 0;
}
.phm-feed-header h2 {
  margin: 0; color: var(--text-main); font-size: clamp(1.32rem, 2.4vw, 2rem); line-height: 1.22;
}
.phm-feed-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
  min-width: min(100%, 280px);
}
.phm-feed-auth {
  justify-content: flex-end; padding-top: 0;
}
.phm-write-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border: 1px solid rgba(var(--point-gold-rgb), 0.32);
  border-radius: 999px; background: linear-gradient(135deg, var(--point-gold), #ed8a4e); color: #1a1512; box-shadow: 0 12px 24px rgba(var(--point-gold-rgb), 0.18); cursor: pointer;
  font: inherit; font-weight: 900; padding: 0 16px; white-space: nowrap;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    filter 140ms ease;
}
.phm-write-button:hover {
  filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 16px 28px rgba(var(--point-gold-rgb), 0.24);
}
.phm-write-button:focus-visible,
.phm-sidebar-tabs .pg-tab:focus-visible {
  outline: 2px solid rgba(var(--brass-gold-rgb), 0.62); outline-offset: 3px;
}
.phm-feed-compose {
  margin: 0 0 14px; padding: 0; border: 0; border-radius: 0; background: transparent;
}
.phm-feed-compose .pg-compose-closed {
  display: none;
}
.phm-feed-compose .pg-compose {
  border-color: rgba(255, 255, 255, 0.08); border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(var(--brass-gold-rgb), 0.07), rgba(255, 255, 255, 0.02)),
    var(--card-bg);
}
.phm-feed-list {
  display: grid; gap: 12px;
}
.phm-feed .pg-prefix-filter {
  gap: 7px; margin-bottom: 12px;
}
.phm-feed .pg-table-wrap:has(.pg-table--cards) {
  overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: rgba(18, 13, 10, 0.64);
}
.phm-feed .pg-table--cards,
.phm-feed .pg-table--cards tbody,
.phm-feed .pg-table--cards tr,
.phm-feed .pg-table--cards td {
  width: 100%;
}
.phm-feed .pg-table--cards {
  border-collapse: separate; border-spacing: 0; font-size: 0.94rem;
}
.phm-feed .pg-table--cards tbody tr {
  position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) 112px 68px 50px 50px;
  grid-template-areas: "prefix title author date views likes";
  align-items: center; gap: 12px; margin: 0; padding: 16px 18px; border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075); border-radius: 0; background: transparent; box-shadow: none;
  transition:
    background 160ms ease,
    border-color 160ms ease;
}
.phm-feed .pg-table--cards tbody tr:last-child {
  border-bottom: 0;
}
.phm-feed .pg-table--cards tbody tr:hover {
  border-color: rgba(var(--brass-gold-rgb), 0.22);
  background:
    linear-gradient(90deg, rgba(var(--brass-gold-rgb), 0.12), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.018);
  box-shadow: none; transform: none;
}
.phm-feed .pg-table--cards tbody tr.pg-notice-row {
  border-left: 3px solid var(--brass-gold);
  background:
    linear-gradient(90deg, rgba(var(--point-gold-rgb), 0.14), rgba(var(--brass-gold-rgb), 0.055)),
    rgba(255, 255, 255, 0.018);
}
.phm-feed .pg-table--cards td {
  min-width: 0; padding: 0; border-bottom: 0;
}
.phm-feed .pg-table--cards .pg-title-button {
  width: 100%; color: var(--text-main); font-weight: 800; line-height: 1.42;
}
.phm-feed .pg-table--cards .pg-title-button:hover {
  color: var(--brass-gold);
}
.phm-feed .pg-table--cards .pg-prefix {
  min-width: 56px; min-height: 25px; border-radius: 999px; background: rgba(var(--brass-gold-rgb), 0.09);
}
.phm-feed .pg-table--cards .pg-author-cell,
.phm-feed .pg-table--cards .pg-date-cell,
.phm-feed .pg-table--cards .pg-count-cell {
  color: var(--text-muted); font-size: 0.8rem; line-height: 1.35; text-align: left;
}
.phm-feed .pg-table--cards .pg-date-cell,
.phm-feed .pg-table--cards .pg-count-cell {
  text-align: center;
}
.phm-feed .pg-more {
  margin-top: 14px; border-radius: 999px;
}
.phm-guide-box {
  display: grid; gap: 7px; margin-top: 4px; border: 1px solid rgba(var(--brass-gold-rgb), 0.24); border-radius: 16px;
  background: rgba(var(--brass-gold-rgb), 0.08); padding: 14px;
}
.phm-guide-box strong {
  color: #f0c98d; font-size: 0.95rem; line-height: 1.35;
}
.phm-guide-box span {
  color: var(--text-muted); font-size: 0.9rem; line-height: 1.68;
}
@media (max-width: 1080px) {
.phm-forum-shell {
  grid-template-columns: 230px minmax(0, 1fr); max-width: 1040px;
}
}
@media (max-width: 760px) {
.phm-forum-shell {
  display: block; width: min(100% - 28px, 460px); padding-top: 96px;
}
  .phm-sidebar {
  position: static;
}
.phm-sidebar {
  gap: 14px; margin-bottom: 14px; padding: 16px;
}
.phm-sidebar-brand {
  gap: 6px;
}
.phm-sidebar-title {
  font-size: 1.58rem;
}
.phm-sidebar-desc {
  font-size: 0.92rem;
}
  .phm-sidebar-tabs nav,
.phm-sidebar-tabs .pg-tabs {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 1px 2px 4px;
}
  .phm-sidebar-tabs nav::-webkit-scrollbar,
.phm-sidebar-tabs .pg-tabs::-webkit-scrollbar {
  display: none;
}
  .phm-sidebar-tabs nav button,
.phm-sidebar-tabs .pg-tab {
  flex: 0 0 auto; width: auto; min-width: max-content; min-height: 38px; padding: 0 12px;
}
  .phm-sidebar-tabs nav button:hover,
.phm-sidebar-tabs .pg-tab:hover {
  transform: none;
}
.phm-feed {
  margin-bottom: 14px; padding: 0 12px 86px; border-radius: 18px;
}
.phm-feed-header {
  display: grid; margin: 0 -12px 14px; padding: 16px 12px;
}
.phm-feed-actions {
  justify-content: flex-start; min-width: 0;
}
.phm-feed-auth {
  justify-content: flex-start;
}
.phm-write-button {
  min-height: 38px;
}
.phm-feed .pg-table-wrap:has(.pg-table--cards) {
  border-radius: 14px;
}
.phm-feed .pg-table--cards tbody tr {
  display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 14px;
}
.phm-feed .pg-table--cards .pg-prefix-cell {
  flex: 0 0 auto;
}
.phm-feed .pg-table--cards .pg-title-cell {
  flex: 1 1 calc(100% - 86px);
}
  .phm-feed .pg-table--cards .pg-author-cell,
  .phm-feed .pg-table--cards .pg-date-cell,
.phm-feed .pg-table--cards .pg-count-cell {
  flex: 0 1 auto; text-align: left;
}
}

/* ---------- phm v3: two-column forum + write/post pages ---------- */
.phm-forum-shell {
  width: min(1120px, calc(100% - 36px)); max-width: 1120px; display: grid;
  grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start;
  margin: 0 auto; padding-top: 118px;
}

.phm-feed { min-width: 0; }
.phm-feed-header { align-items: center; }
.phm-feed-actions { min-width: min(100%, 360px); }
.phm-feed-auth {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 8px; color: var(--text-muted); font-size: 0.84rem; line-height: 1.3;
}

.phm-auth-name {
  max-width: 150px; overflow: hidden; color: var(--text-main); font-weight: 800;
  text-overflow: ellipsis; white-space: nowrap;
}

.phm-auth-button {
  display: inline-flex; min-height: 32px; align-items: center; justify-content: center;
  border: 1px solid rgba(var(--brass-gold-rgb), 0.34); border-radius: 999px;
  background: rgba(var(--brass-gold-rgb), 0.08); color: #f0c98d; cursor: pointer;
  font: inherit; font-size: 0.78rem; font-weight: 900; padding: 0 11px; white-space: nowrap;
}

.phm-auth-button:hover {
  border-color: rgba(var(--brass-gold-rgb), 0.58); background: rgba(var(--brass-gold-rgb), 0.14);
}

.phm-admin-link {
  color: var(--brass-gold); font-size: 0.78rem; font-weight: 900;
  text-decoration: underline; text-underline-offset: 4px; white-space: nowrap;
}

.phm-write-button,
.pg-mobile-cta {
  text-decoration: none;
}

.pg-row-preview {
  display: -webkit-box; margin: 5px 0 0; max-width: 720px; overflow: hidden;
  color: var(--text-muted); font-size: 0.72rem; line-height: 1.45;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}

.phm-feed .pg-table--cards .pg-title-cell { display: grid; gap: 2px; }

.phm-feed .pg-table--cards .pg-title-button {
  display: inline-flex; align-items: baseline; gap: 5px; text-decoration: none;
}

.pgw-shell {
  width: min(720px, calc(100% - 36px)); margin: 0 auto; padding: 118px 0 48px;
}

.pgw-shell--post { width: min(820px, calc(100% - 36px)); }
.pgw-back {
  display: inline-flex; align-items: center; min-height: 36px; color: var(--brass-gold);
  font-size: 0.9rem; font-weight: 900; text-decoration: none;
}

.pgw-back:hover {
  text-decoration: underline; text-underline-offset: 4px;
}

.pgw-title {
  margin: 12px 0 18px; color: var(--text-main);
  font-size: clamp(1.8rem, 4vw, 2.65rem); line-height: 1.08;
}

.pgw-compose,
.pgw-detail,
.pgw-login {
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(var(--brass-gold-rgb), 0.07), rgba(255, 255, 255, 0.018)),
    rgba(27, 19, 14, 0.9);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
}

.pgw-compose,
.pgw-detail {
  padding: 18px;
}

.pgw-login {
  display: grid; gap: 12px; margin: 0 0 18px; padding: 16px;
}

.pgw-login[hidden] { display: none; }
.pgw-login p {
  margin: 0; color: var(--text-muted); line-height: 1.65;
}

.pgw-login-button {
  justify-self: start; min-height: 38px; border: 1px solid rgba(var(--point-gold-rgb), 0.28);
  border-radius: 999px; background: linear-gradient(135deg, var(--point-gold), #ed8a4e);
  color: #1a1512; cursor: pointer; font: inherit; font-weight: 900; padding: 0 16px;
}

@media (max-width: 1080px) {
  .phm-forum-shell {
    width: min(1040px, calc(100% - 28px));
    max-width: 1040px;
    grid-template-columns: 250px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .phm-forum-shell {
    display: block;
    width: min(100% - 28px, 460px);
    padding-top: 96px;
  }

  .phm-feed-header {
    align-items: flex-start;
  }

  .phm-feed-actions,
  .phm-feed-auth {
    justify-content: flex-start;
  }

  .phm-auth-name {
    max-width: 180px;
  }

  .pg-row-preview {
    max-width: none;
  }

  .pgw-shell,
  .pgw-shell--post {
    width: min(100% - 28px, 460px);
    padding: 96px 0 32px;
  }

  .pgw-compose,
  .pgw-detail,
  .pgw-login {
    border-radius: 16px;
  }

  .pgw-compose,
  .pgw-detail {
    padding: 14px;
  }
}

/* ---------- pgw write page: dedicated-screen trims ---------- */
/* 전용 글쓰기 페이지: 가이드는 textarea placeholder로 충분 — 큰 가이드 박스·닫기 버튼·중복 제목 숨김 */
.pgw-compose .pg-compose-guide,
.pgw-compose .pg-compose-close,
.pgw-compose .pg-compose-head h2 {
  display: none;
}

.pgw-compose .pg-compose-head {
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---------- kali role badges: brass club pins ---------- */
.kali-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  margin-left: 6px;
  padding: 1px 6px 1px 5px;
  border: 1px solid rgba(201, 154, 91, 0.44);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 246, 218, 0.1), rgba(31, 22, 16, 0.18)),
    rgba(201, 154, 91, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #e8c68f;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: middle;
  white-space: nowrap;
}

.kali-badge::before {
  content: "";
  width: 4px;
  height: 7px;
  border: 1px solid rgba(232, 198, 143, 0.68);
  border-radius: 2px;
  background: rgba(201, 154, 91, 0.24);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.kali-badge--kali {
  border-color: rgba(201, 154, 91, 0.58);
  color: #f0d39c;
}

.kali-badge--god {
  border-color: rgba(224, 199, 132, 0.72);
  background:
    linear-gradient(180deg, rgba(229, 217, 255, 0.16), rgba(23, 15, 43, 0.3)),
    rgba(56, 45, 116, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(132, 156, 224, 0.18);
  color: #e7ddff;
}

.kali-badge--god::before {
  border-color: rgba(237, 218, 166, 0.76);
  background: rgba(102, 122, 190, 0.34);
}