/* ===== 화면별 배치 (공통 부품 위에 얹는 것만) ===== */

/* 인증·폼 화면 — 베이비핑크 바탕 위에 흰 카드(1px 선·12px 모서리·그림자 없음) */
.auth-page { background: transparent; padding: var(--s-10) 0 var(--s-16); }
.auth-card { background: #fff; border: var(--border); border-radius: var(--r-lg); box-shadow: none; padding: var(--s-8); }
.auth-head { margin-bottom: var(--s-5); }
.auth-head h1 { font-family: var(--f-display); font-weight: 700; font-size: var(--t-2xl); line-height: 1.25; letter-spacing: -.02em; color: var(--c-plum); }
.auth-head p { color: var(--c-muted); margin-top: var(--s-2); font-size: var(--t-sm); line-height: 1.6; }
.auth-links { display: flex; justify-content: center; gap: var(--s-1) var(--s-4); flex-wrap: wrap; margin-top: var(--s-4); font-size: var(--t-sm); font-weight: 600; color: var(--c-muted); }
.auth-links a { display: inline-flex; align-items: center; min-height: 44px; }
.auth-links a:hover { color: var(--c-berry); text-decoration: underline; }
.privacy-note { display: flex; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-5); padding: var(--s-3) var(--s-4); background: var(--c-milk); border-radius: var(--r-md); font-size: var(--t-xs); line-height: 1.6; color: var(--c-muted); }
.privacy-note .ico { color: var(--c-berry); margin-top: 1px; flex: none; width: 18px; height: 18px; }
.agree-box { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.agree-box > legend { padding: 0; margin-bottom: var(--s-2); }
.agree-all { padding: var(--s-3) var(--s-4); border: var(--border); border-radius: var(--r-md); background: var(--c-milk); font-weight: 700; }
.agree-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); border-bottom: var(--border-soft); }
.agree-row a { font-size: var(--t-sm); color: var(--c-muted); display: inline-flex; align-items: center; min-height: 44px; }
.result-card { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding: var(--s-5); border: 1px solid #f6c6d0; border-radius: var(--r-md); background: var(--c-milk-2); text-align: center; }
.result-card strong { font-family: var(--f-display); font-weight: 700; font-size: var(--t-xl); color: var(--c-plum); overflow-wrap: anywhere; }
.summary-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-6); padding: var(--s-4) var(--s-5); border: var(--border-soft); border-radius: var(--r-md); background: var(--c-milk); font-size: var(--t-sm); }
.summary-list dt { color: var(--c-muted); }
.summary-list dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.auth-done-title { font-family: var(--f-display); font-weight: 700; font-size: var(--t-2xl); color: var(--c-plum); }

/* 안내 카드(로그인 필요·오류) — 공통 .status-page 를 흰 카드로 띄운다 */
.status-page.status-card { min-height: 0; width: calc(100% - 2 * var(--gutter)); max-width: 560px; margin: var(--s-10) auto var(--s-16); padding: var(--s-10) var(--s-8); gap: var(--s-3); background: #fff; border: var(--border); border-radius: var(--r-lg); }
.status-card .ico-tile { width: 64px; height: 64px; border-radius: var(--r-lg); }
.status-card .ico-tile .ico { width: 32px; height: 32px; }
.status-card h1 { font-size: var(--t-2xl); color: var(--c-plum); letter-spacing: -.02em; }
.status-card p { font-size: var(--t-sm); line-height: 1.6; }
.status-card .btn-group { margin-top: var(--s-2); }
.status-card .privacy-note { text-align: left; }
.status-card > .link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-sm); }

@media (max-width: 720px) {
  .auth-page { padding: var(--s-5) 0 var(--s-10); }
  .auth-card { padding: var(--s-5) var(--s-4); }
  .auth-head h1 { font-size: var(--t-xl); }
  .status-page.status-card { margin: var(--s-5) auto var(--s-10); padding: var(--s-8) var(--s-4); }
  .status-card h1 { font-size: var(--t-xl); }
}

/* 온보딩·소개 */
/* ===== 소개(/about) — 2026-11-06 개편: 자두 톤 히어로 · 신뢰 띠 · 대상 카드 · 탭 이용법 · 실제 인기글·자료 · 마지막 행동 유도 =====
   사진은 Gemini 생성 heads/about.webp. 덮개는 머리 띠와 같은 자두 톤(47,42,54).
   흰 사진 위 최악 대비: 덮개 .72 → 흰 글자 5.65:1, 보조 글자(--c-banner-ink) 4.77:1 */
#main:has(> .about-page) { padding-bottom: 0; }
.about-page { padding-bottom: var(--s-16); }
.about-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #2f2a36; }
.about-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(47, 42, 54, .84) 0%, rgba(47, 42, 54, .72) 50%, rgba(47, 42, 54, .3) 70%, rgba(47, 42, 54, .1) 100%), url("/assets/heads/about-08377b7e.webp") right center / cover no-repeat;
  animation: about-zoom 1.6s var(--ease) both; }
.about-hero-inner { min-height: 460px; display: flex; flex-direction: column; justify-content: center; padding-block: var(--s-16); }
.about-hero-inner > * { max-width: 36em; animation: about-rise var(--m-slow) var(--ease) both; }
.about-hero-inner > :nth-child(2) { animation-delay: 60ms; }
.about-hero-inner > :nth-child(3) { animation-delay: 120ms; }
.about-hero-inner > :nth-child(n + 4) { animation-delay: 180ms; }
.about-eyebrow { font-size: var(--t-md); font-weight: 700; letter-spacing: -.01em; color: #fff; }
.about-hero h1 { margin-top: var(--s-3); max-width: 13em; font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.3; letter-spacing: -.04em; color: #fff; }
.about-lead { margin-top: var(--s-4); font-size: var(--t-lg); line-height: 1.65; color: var(--c-banner-ink); }
.about-hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-8); }
.about-hero-actions .btn, .about-cta-actions .btn { min-height: 52px; padding: 0 26px; }
.about-hero .btn-outline { background: transparent; color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.about-hero .btn-outline:hover { background: rgba(255, 255, 255, .12); }
.about-login { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--c-banner-ink); }
.about-login a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-1); color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.about-hero :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes about-zoom { from { transform: scale(1.06); } to { transform: none; } }
.about-hero-inner > h1 { animation-name: about-rise-y; } /* 제목은 처음부터 보이고 움직임만 — 첫 화면 표시를 늦추지 않게 */
@keyframes about-rise-y { from { transform: translateY(16px); } to { transform: none; } }
@keyframes about-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* 신뢰 띠 — 히어로 바로 아래, 화면 끝까지 옅은 포인트 면 */
.about-trust { background: var(--c-milk-2); border-bottom: var(--border-soft); }
.about-trust-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); padding-block: var(--s-6); }
.about-trust-list li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-sm); line-height: 1.55; color: var(--c-muted); }
.about-trust-list strong { display: block; font-size: var(--t-md); color: var(--c-ink); }
.about-trust-list .ico { width: 24px; height: 24px; margin-top: 1px; color: var(--c-berry); flex: none; }

.about-page .section-head { flex-wrap: wrap; row-gap: var(--s-1); }
.about-page .section-title { font-size: var(--t-2xl); letter-spacing: -.04em; }
.about-sub { width: 100%; color: var(--c-muted); font-size: var(--t-sm); }
.about-sub strong { color: var(--c-ink); font-weight: 700; }
/* 이용 방법 영상(Remotion·HyperFrames로 만든 소리 없는 자막 영상) */
.about-video { position: relative; max-width: 70%; margin-inline: auto; overflow: hidden; border: var(--border); border-radius: var(--r-lg); background: var(--c-milk-2); aspect-ratio: 16 / 9; } /* 크게 보려면 전체 화면 버튼 */
.about-play { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); width: 100%; border: 0; background: rgba(25, 31, 40, .12); cursor: pointer; }
.about-play[hidden] { display: none; }
.about-play-btn { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--c-accent); color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 12px 30px rgba(201, 43, 80, .35); transition: transform var(--m-fast) var(--ease); }
.about-play-label { padding: 4px 12px; border-radius: var(--r-pill); background: rgba(25, 31, 40, .72); color: #fff; font-size: var(--t-sm); font-weight: 700; }
.about-play:hover .about-play-btn { transform: scale(1.06); }
.about-play:focus-visible { outline: none; }
.about-play:focus-visible .about-play-btn { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--c-accent); }
@media (prefers-reduced-motion: reduce) { .about-play-btn { transition: none; } .about-play:hover .about-play-btn { transform: none; } }
@media (max-width: 720px) {
  .about-video { max-width: none; }
  .about-play-btn { width: 64px; height: 64px; }
  .about-play-btn svg { width: 28px; height: 28px; }
}
.about-video video { display: block; width: 100%; height: 100%; }

/* 대상 카드 — 세로(아이콘 위), 아래 줄에 바로 가는 곳 */
.about-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.about-who-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); background: #fff; border: var(--border); border-radius: var(--r-md); color: inherit; transition: border-color var(--m-fast), box-shadow var(--m-fast); }
.about-who-card:hover { border-color: var(--c-berry); box-shadow: var(--shadow-3); }
.about-who-card h3 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.02em; color: var(--c-plum); }
.about-who-card p { color: var(--c-muted); font-size: var(--t-sm); line-height: 1.65; }
.about-who-use { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: var(--s-1); color: var(--c-berry); font-weight: 700; font-size: var(--t-sm); }

/* 탭 이용법 — 2×2, 카드 대신 위 굵은 선으로 나눈 글 묶음 */
.about-tabs { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-12); }
.about-tab { padding-top: var(--s-5); border-top: var(--border); }
.about-tab-head { display: flex; align-items: center; gap: var(--s-3); }
.about-tab-head .ico { width: 24px; height: 24px; color: var(--c-berry); flex: none; }
.about-tab-head h3 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.03em; color: var(--c-plum); }
.about-tab > p { margin-top: var(--s-2); max-width: 36em; font-size: var(--t-sm); color: var(--c-muted); line-height: 1.65; }
.about-tab .more-link { min-height: 44px; margin-top: var(--s-1); margin-left: -12px; color: var(--c-berry); font-weight: 700; }

/* 실제 모습 — 홈 인기글 목록 · 자료 카드를 그대로 쓴다 */
.about-live { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-6); align-items: stretch; }
.about-live .home-popular { display: flex; flex-direction: column; padding-bottom: var(--s-3); }
.about-live .pop-list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.about-res-strip .res-thumb { background: var(--c-milk-2); }
.about-live.is-single { grid-template-columns: 1fr; }
.about-panel-res { background: #fff; border: var(--border); border-radius: var(--r-md); padding: var(--s-2) var(--s-4) var(--s-4); }
.about-res-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }

/* 마지막 행동 유도 */
.about-cta { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-8) var(--s-10); border-radius: var(--r-lg); background: var(--c-milk-2); }
.about-cta h2 { font-size: var(--t-2xl); font-weight: 700; line-height: 1.35; letter-spacing: -.04em; color: var(--c-plum); }
.about-cta-text { flex: 1; }
.about-cta-text p { margin-top: var(--s-2); max-width: 36em; color: var(--c-muted); line-height: 1.6; }
.about-cta-actions { display: grid; gap: var(--s-1); justify-items: end; flex: none; }
.about-cta-actions .btn { min-width: 200px; }
.about-cta .about-login { margin-top: 0; color: var(--c-muted); }
.about-cta .about-login a { min-height: 44px; padding: 0; color: var(--c-berry); }
.about-who-card:hover .about-who-use .ico { transform: translateX(2px); }
.about-who-use .ico { transition: transform var(--m-fast); }
@media (min-width: 721px) { .about-login-m { display: none; } }

@media (prefers-reduced-motion: reduce) { .about-hero::before, .about-hero-inner > * { animation: none; } }
@media (max-width: 1024px) {
  .about-who { gap: var(--s-4); }
  .about-live { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .about-page { padding-bottom: var(--s-10); }
  .about-hero::before { background: linear-gradient(rgba(47, 42, 54, .76), rgba(47, 42, 54, .76)), url("/assets/heads/about-m-98baafba.webp") 70% center / cover no-repeat; } /* 흰 6.4:1, 보조 5.1:1. 휴대폰은 800px 사진 */
  .about-hero-inner { min-height: 0; padding-block: var(--s-8) var(--s-6); }
  .about-hero h1 { font-size: 28px; }
  .about-lead { margin-top: var(--s-3); font-size: 15px; }
  .about-hero-actions { display: grid; grid-template-columns: 1fr; margin-top: var(--s-5); }
  .about-hero-actions .btn { padding: 0 var(--s-3); }
  .about-trust-list { grid-template-columns: 1fr; gap: var(--s-4); padding-block: var(--s-5); }
  .about-page .section-title { font-size: var(--t-xl); }
  .about-who { grid-template-columns: 1fr; gap: var(--s-3); }
  .about-who-card { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); row-gap: var(--s-1); padding: var(--s-4); }
  .about-who-card > :not(.ico-tile) { grid-column: 2; }
  .about-who-card .ico-tile { grid-row: 1 / span 3; }
  .about-tabs { grid-template-columns: 1fr; gap: var(--s-6); }
  .about-tab-head h3 { font-size: var(--t-md); }
  .about-tab { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); padding-top: var(--s-4); }
  .about-tab-head { display: contents; }
  .about-tab-head .ico { grid-row: 1 / span 3; margin-top: 2px; }
  .about-tab-head h3, .about-tab > p, .about-tab .more-link { grid-column: 2; }
  .about-tab .more-link { justify-self: start; }
  .about-cta-actions { justify-items: stretch; }
  .about-cta .about-login { text-align: center; }
  .about-res-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 자료실 모바일과 같은 2칸, 세 번째는 숨김 */
  .about-res-strip > :nth-child(n + 3) { display: none; }
  .about-res-strip .rs-desc { display: none; }
  .about-res-strip .rs-card-foot { flex-wrap: wrap; row-gap: 2px; }
  .about-cta { flex-direction: column; align-items: stretch; padding: var(--s-6); gap: var(--s-5); }
  .about-cta h2 { font-size: var(--t-xl); }
  .about-cta-actions .btn { width: 100%; }
}
.feature-card { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5); background: #fff; border: var(--border); border-radius: var(--r-md); box-shadow: none; }
.feature-card h3 { font-size: var(--t-md); font-weight: 700; margin-bottom: 4px; color: var(--c-plum); }
.feature-card .ico-tile { width: 44px; height: 44px; border-radius: var(--r-md); }
.feature-card .ico-tile .ico { width: 22px; height: 22px; }
.feature-card.card-link:hover { box-shadow: var(--shadow-3); }
.notice-box.notice-box-card { background: #fff; border: var(--border); }
.notice-box.notice-box-card > .ico { color: var(--c-berry); flex: none; }
@media (max-width: 720px) {
  .feature-card { padding: var(--s-4); gap: var(--s-3); }
}

/* 설정 */
.settings-menu .list-item { min-height: 60px; }
.withdraw-notes { list-style: none; display: grid; gap: var(--s-4); }
.withdraw-notes li { display: flex; gap: var(--s-3); align-items: flex-start; }
.withdraw-notes .ico { color: var(--c-berry); margin-top: 3px; }

/* 고객센터·약관 — 띠 배너 아래 흰 카드 본문 */
.guide-steps { list-style: none; display: grid; gap: var(--s-4); }
.guide-steps li { display: flex; gap: var(--s-3); align-items: flex-start; }
.step-num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-milk-2); color: var(--c-berry); font-weight: 700; font-size: var(--t-sm); flex: none; }
.attach-card { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: var(--border); border-radius: var(--r-md); background: var(--c-milk); overflow-wrap: anywhere; }
.attach-card > .grow { min-width: 0; }
.notice-body { line-height: 1.8; }
.notice-body p + p { margin-top: var(--s-3); }
.notice-article h1 { color: var(--c-plum); letter-spacing: -.02em; }
.doc { line-height: 1.75; font-size: var(--t-sm); }
.doc > :first-child { margin-top: 0; }
.doc h2 { font-size: var(--t-md); font-weight: 700; margin: var(--s-6) 0 var(--s-2); padding-top: var(--s-5); border-top: var(--border-soft); color: var(--c-plum); }
.doc p, .doc li { color: var(--c-ink); }
.doc ol, .doc ul { padding-left: 1.4em; display: grid; gap: 4px; margin-top: var(--s-2); }
.doc .todo { background: var(--c-warn-bg); color: var(--c-warn); font-weight: 700; padding: 0 6px; border-radius: var(--r-sm); }
.doc table { width: 100%; border-collapse: collapse; margin-top: var(--s-3); font-size: var(--t-sm); }
.doc th, .doc td { border: 1px solid var(--c-line-2); padding: 8px 10px; text-align: left; }
.doc th { background: var(--c-milk); }
.doc table + p { margin-top: var(--s-3); }
.page-head .back-link { display: inline-flex; min-height: 44px; align-items: center; margin: calc(-1 * var(--s-3)) 0 calc(-1 * var(--s-2)); }

/* 검색 — 띠 배너 안에 검색칸, 흰 결과 목록 행 */
.search-head .page-desc { margin-top: var(--s-1); }
.search-head .c-search-form { margin-top: var(--s-4); }
.search-head .subbar { padding: 0; }
.search-head .subbar .c-search-form { margin-top: 0; }
.search-head .subbar > .icon-btn { background: rgba(255, 255, 255, .14); color: #fff; width: 44px; height: 44px; flex: none; }
.search-head .subbar > .icon-btn:hover { background: rgba(255, 255, 255, .24); }
.search-head .c-search-box { border-color: transparent; color: var(--c-ink); }
.search-head .c-search-box a.icon-btn { color: var(--c-muted); }
.search-head .c-search-box a.icon-btn:hover { color: var(--c-ink); }
.search-head .field-error { color: #ffc2c6; }
.search-head :focus-visible { outline-color: #fff; }
.search-head .c-search-box :focus-visible { outline-color: var(--c-accent); }
.search-page .c-summary { margin-top: 0; font-size: var(--t-md); }
.search-page .c-section-title { font-size: var(--t-lg); }
.search-page .c-recent { background: #fff; border: var(--border); border-radius: var(--r-md); padding: 0 var(--s-4); }
.search-page .c-recent li:last-child { border-bottom: 0; }
.search-page .c-results { gap: 0; background: #fff; border: var(--border); border-radius: var(--r-md); overflow: hidden; }
.search-page .c-results > * + * { border-top: var(--border-soft); }
.search-page .c-results .c-row { padding: var(--s-4) var(--s-5); border-radius: 0; gap: 6px; }
.search-page .c-results .c-row:hover { box-shadow: none; transform: none; background: var(--c-surface-2); }
.search-page .c-results .c-row-title { font-size: var(--t-md); }
.search-page .c-results .c-row-excerpt { font-size: var(--t-sm); }
.search-page .c-result-res .res-card { border: 0; border-radius: 0; box-shadow: none; padding: var(--s-4) var(--s-5); gap: var(--s-4); align-items: flex-start; }
.search-page .c-result-res .res-card:hover { box-shadow: none; background: var(--c-surface-2); }
.search-page .c-result-res .res-thumb { width: 72px; border: var(--border-soft); border-radius: var(--r-sm); overflow: hidden; }
.search-page .c-result-res .res-thumb .badge { top: 4px; left: 4px; height: 20px; padding: 0 6px; font-size: 11px; }
.search-page .c-result-res .res-body { padding: 0; min-width: 0; }
.search-page .empty { padding: var(--s-10) var(--s-5); }
@media (max-width: 720px) {
  .search-page .c-results .c-row, .search-page .c-result-res .res-card { padding: var(--s-4); }
  .search-page .c-result-res .res-thumb { width: 60px; }
}