/* ============================================================
   멍코치 — Screen styles (Landing + F10)
   ============================================================ */

/* ---- screen routing ---- */
.screen { display: block; }
.screen[hidden] { display: none; }

/* ============================================================
   Header (sticky)
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60; height: 80px;
  background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(16px);
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled { border-bottom-color: var(--border); }
.header-inner {
  height: 80px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; flex-shrink: 0; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px; background: var(--primary);
  display: grid; place-items: center; box-shadow: 0 4px 10px rgba(61,90,251,0.28);
}
.brand-name {
  font-family: var(--font-brand);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--heading);
  white-space: nowrap;
}
.header-right { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 12px; }
.login-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding-inline: 18px;
  border-radius: var(--r-pill); background: var(--primary); color: #fff;
  font-size: 14px; font-weight: 700; white-space: nowrap; transition: background var(--t-fast);
}
.login-pill:hover { background: var(--primary-hover); }
.login-icon { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; filter: brightness(0) invert(1); opacity: 0.94; }
.login-pill[hidden], .acct-menu[hidden] { display: none; }

/* account menu (logged-in) */
.acct-menu { position: relative; }
.acct-trigger { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 8px;
  border-radius: var(--r-pill); background: var(--off-white); border: 1px solid var(--border);
  font-size: 14px; font-weight: 600; color: var(--heading); white-space: nowrap; transition: border-color var(--t-fast), background var(--t-fast); }
.acct-trigger:hover { border-color: var(--primary); }
.acct-ava { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.acct-caret { color: var(--stone); font-size: 12px; display: inline-block; transform: translateY(-6px); }
.acct-drop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 184px; z-index: 60;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 32px rgba(15,30,51,0.12); display: flex; flex-direction: column; gap: 2px; }
.acct-drop[hidden] { display: none; }
.acct-drop button { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 12px;
  border-radius: 10px; background: transparent; font-size: 14px; font-weight: 500; color: var(--ink); text-align: left;
  transition: background var(--t-fast); }
.acct-drop button:hover { background: var(--pale-blue); color: var(--primary-hover); }
.acct-drop button svg { color: var(--stone); flex: 0 0 auto; }
.acct-drop button:hover svg { color: var(--primary); }
.acct-drop #acctLogout:hover { background: var(--red-tint, #FEF2F2); color: var(--red); }
.acct-drop #acctLogout:hover svg { color: var(--red); }
.nav-center { justify-self: center; }

@media (max-width: 980px) {
  .nav-center { display: none; }
}

/* ============================================================
   랜딩 섹션 스냅 + 임팩트 등장 (.snap-landing 일 때만)
   ============================================================ */
html.snap-landing { scroll-snap-type: y proximity; scroll-padding-top: 80px; }
.snap-landing .snap-section { scroll-snap-align: start; scroll-snap-stop: normal; }
/* 히어로 외 섹션도 히어로와 동일한 풀스크린 높이 + 세로 중앙 정렬 → 스냅 지점이 고르게 */
.snap-landing .snap-section:not(.hero) {
  min-height: calc(100svh - 80px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 16px;   /* 큰 기본 패딩 제거 → 콘텐츠가 한 화면에 맞는 섹션은 정확히 풀스크린 */
}

/* 1·2·3·4 화면 크로스페이드 스테이지 (--cf1:1→2, --cf2:2→3, --cf3:3→4) */
/* 높이 4.3화면 = sticky(1) + [크로스페이드0.6 + 머무름0.5] ×3 */
.cf-stage { position: relative; height: calc((100svh - 80px) * 4.3); }
.cf-sticky { position: sticky; top: 80px; height: calc(100svh - 80px); overflow: hidden; }
.cf-layer { position: absolute; inset: 0; will-change: opacity, transform; transform-origin: 50% 44%; }
/* 1번째: phase1에 먼저 옅어지며 살짝 줌아웃 */
.cf-hero { opacity: clamp(0, calc((0.62 - var(--cf1, 0)) / 0.42), 1);
  transform: scale(calc(1 + var(--cf1, 0) * 0.05)); }
/* 2번째: phase1에 진해지고 phase2에 다시 옅어짐 (min으로 결합) */
.cf-intro { background: var(--white); display: flex; flex-direction: column; justify-content: center;
  opacity: min(clamp(0, calc((var(--cf1, 0) - 0.42) / 0.42), 1), clamp(0, calc((0.62 - var(--cf2, 0)) / 0.42), 1));
  transform: scale(calc(1.03 - var(--cf1, 0) * 0.03 + var(--cf2, 0) * 0.05)); }
/* 3번째: phase2에 진해지고 phase3에 다시 옅어짐 */
.cf-step { background: var(--pale-blue); display: flex; flex-direction: column; justify-content: center;
  opacity: min(clamp(0, calc((var(--cf2, 0) - 0.42) / 0.42), 1), clamp(0, calc((0.62 - var(--cf3, 0)) / 0.42), 1));
  transform: scale(calc(1.03 - var(--cf2, 0) * 0.03 + var(--cf3, 0) * 0.05)); }
/* 4번째: phase3에 진해지며 자리잡음 */
.cf-feat { background: var(--white); display: flex; flex-direction: column; justify-content: center;
  opacity: clamp(0, calc((var(--cf3, 0) - 0.42) / 0.42), 1);
  transform: scale(calc(1.03 - var(--cf3, 0) * 0.03)); }
/* 기능 탭 내용 전환: 느리고 부드럽게 페이드 */
.fd-body { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.fd-body.fd-fading { opacity: 0; transform: translateY(14px); }
/* 2번째 화면 글자·캐릭터 크게 (화면 꽉 차게, 줄바꿈 안 깨지게) */
.cf-intro .intro-row { grid-template-columns: max-content auto max-content; justify-content: center; gap: 40px; }
.cf-intro .t-display2 { font-size: 60px; white-space: nowrap; }   /* <br> 만 줄바꿈 → 2줄 유지 */
.cf-intro .intro-char { width: 350px; height: 350px; }

/* 섹션 등장/퇴장: 아래에서 부드럽게 올라오며 살짝 확대 (스크롤 위·아래로 재생) */
.sec-rise { opacity: 0; transform: translateY(56px) scale(.97);
  transition: opacity .8s var(--ease), transform .9s cubic-bezier(.22, 1, .36, 1); }
.sec-rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.snap-landing { scroll-snap-type: none; }
  .snap-landing .snap-section:not(.hero) { min-height: 0; display: block; }
  .sec-rise { opacity: 1; transform: none; transition: none; }
  /* 크로스페이드 비활성화 → 두 화면을 일반 스택으로 */
  .cf-stage { height: auto; }
  .cf-sticky { position: static; height: auto; }
  .cf-layer { position: static; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   S2 · Hero
   ============================================================ */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100svh - 80px);
  background: var(--pale-blue);
}
.hero-wm {
  position: absolute; top: clamp(14px, 5vw, 70px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-num); font-weight: 900; font-size: clamp(120px, 22vw, 330px);
  letter-spacing: 0; color: rgba(255,255,255,0.9); pointer-events: none; z-index: 0; user-select: none;
  white-space: nowrap;
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(24px, 4vw, 72px); align-items: center;
  min-height: calc(100svh - 80px); padding-block: clamp(32px, 6vh, 72px);
}
.hero-visual {
  width: min(100%, 780px);
  justify-self: center;
  border-radius: 28px; overflow: hidden; position: relative;
  box-shadow: none;
  aspect-ratio: 1.02 / 1; background: transparent;
}
.hero-visual img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.hero-visual .float-chip {
  position: absolute; background: #fff; border-radius: 14px; box-shadow: 0 10px 26px rgba(15,30,51,0.12);
  padding: 12px 16px; display: flex; align-items: center; gap: 10px;
}
.hero-visual .float-chip.fc-1 { top: 24px; right: 24px; }
.hero-visual .float-chip.fc-2 { bottom: 28px; left: 24px; }
.float-chip .fc-score { font-family: var(--font-num); font-weight: 700; font-size: 22px; }

.hero-copy { max-width: 720px; position: relative; z-index: 2; }
.hero-copy h1 { margin-bottom: 24px; }
.hero-copy h1 .kw { font-size: 0.96em; }
.hero-ask { display: inline-block; margin-top: 4px; white-space: nowrap; }
@media (max-width: 520px) { .hero-ask { white-space: normal; } }
@media (max-width: 900px) {
  .hero {
    min-height: calc(100svh - 80px);
  }
  .hero-wm {
    top: 18px;
    font-size: clamp(82px, 26vw, 170px);
  }
  .hero-grid {
    display: block;
    min-height: calc(100svh - 80px);
    padding-block: 0;
    text-align: left;
  }
  .hero-copy {
    max-width: 560px;
    margin-inline: 0;
    padding-top: clamp(128px, 23svh, 178px);
  }
  .hero-copy h1 {
    margin-bottom: 14px;
    text-wrap: balance;
  }
  .hero-copy .muted {
    max-width: 310px;
    color: rgba(19,29,63,0.72);
  }
  .hero-visual {
    position: absolute;
    left: 52%;
    bottom: clamp(-92px, -9vw, -42px);
    width: min(118vw, 660px);
    max-width: none;
    height: min(70svh, 620px);
    margin: 0;
    transform: translateX(-50%);
    border-radius: 0;
    opacity: .98;
  }
  .hero-visual img {
    object-fit: contain;
    object-position: center bottom;
  }
}

/* ============================================================
   S3 · Intro band  ("멍코치와 함께하는 …")
   ============================================================ */
.intro-band { text-align: center; }
.intro-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px;
}
.intro-row .it-left { justify-self: end; text-align: center; }
.intro-row .it-right { justify-self: start; text-align: left; }
.intro-row .it-right .kw.text-font { display: inline-block; margin-bottom: 7px; }
.intro-char {
  width: 320px; height: 320px; border-radius: 28px; overflow: hidden; background: transparent;
  box-shadow: none;
}
.intro-char img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .intro-row { grid-template-columns: 1fr; gap: 20px; }
  .intro-row .it-left, .intro-row .it-right { justify-self: center; text-align: center; }
  .intro-char { width: 240px; height: 240px; }
}

/* ============================================================
   S4 · 4-step cards (fanning)
   ============================================================ */
.steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: var(--s-6); }
.step-card {
  border-radius: var(--r-step); padding: 28px; min-height: 380px;
  display: flex; flex-direction: column;
  transition: transform var(--t-med), box-shadow var(--t-med);
  transform-origin: center;
}
/* 마우스 호버 시 카드 크게 확대 (내용이 잘 보이도록, 자연스럽게) */
.step-card:hover {
  transform: scale(1.16);
  box-shadow: 0 30px 60px rgba(15, 30, 51, 0.22);
  position: relative; z-index: 3;
}
.step-card .step-illus {
  width: 100%; height: 150px; border-radius: 16px; overflow: hidden; margin-bottom: 20px;
  display: grid; place-items: center; background: transparent; box-shadow: none;
}
.step-card .step-illus img { width: 100%; height: 100%; object-fit: cover; }
.step-card .step-illus.img-illus { background: transparent; }
.step-card .step-illus.img-illus img { object-fit: contain; }
.step-card .step-illus.tinted { background: transparent; }
.step-card .step-illus.tinted-dark { background: transparent; }
.step-card h3 { font-size: 21px; font-weight: 700; margin: auto 0 10px; letter-spacing: -0.01em; }
.step-card p { font-size: 15px; line-height: 1.55; min-height: calc(1.55em * 2); }
.step-1 { background: var(--primary); color: #fff; }
.step-2 { background: var(--primary-hover); color: #fff; }
.step-3 { background: var(--light-blue); color: var(--ink); }
.step-3 h3 { color: var(--heading); }
.step-4 { background: var(--navy); color: #fff; }
.step-1 p, .step-2 p, .step-4 p { color: rgba(255,255,255,0.82); }
.step-1 h3, .step-2 h3, .step-4 h3 { color: #fff; }
.step-card .stepno {
  align-self: flex-start; display: inline-flex; height: 28px; align-items: center; padding-inline: 14px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 700; letter-spacing: .08em;
}
.step-1 .stepno, .step-2 .stepno, .step-4 .stepno { background: #fff; color: var(--navy); }
.step-3 .stepno { background: var(--primary); color: #fff; }

/* fanning (applied when revealed) */
.steps-grid.fan .step-card { box-shadow: 0 16px 36px rgba(15,30,51,0.12); }
.steps-grid.fan .step-card:nth-child(1) { transform: rotate(-2deg); }
.steps-grid.fan .step-card:nth-child(2) { transform: rotate(-1deg); }
.steps-grid.fan .step-card:nth-child(3) { transform: rotate(1deg); }
.steps-grid.fan .step-card:nth-child(4) { transform: rotate(2deg); }
.steps-grid.fan .step-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 26px 50px rgba(15,30,51,0.20); z-index: 2; }

.step-link { cursor: pointer; }
.step-link:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.step-link .stepno::after { content: " · 바로가기 →"; opacity: .8; }

@media (max-width: 980px) { .steps-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .steps-grid { grid-template-columns: 1fr; } .steps-grid.fan .step-card { transform: none !important; } }

/* ============================================================
   S5 · 3-up core features
   ============================================================ */
.feature-row { display: grid; grid-template-columns: 3fr 4fr 4fr; gap: 28px; align-items: stretch; }
.feat-menu { display: flex; flex-direction: column; gap: 14px; }
.feat-tab {
  text-align: left; border-radius: var(--r-card); padding: 22px 24px; transition: all var(--t-fast);
  border: 1px solid transparent; display: flex; flex-direction: column; justify-content: space-between;
}
.feat-tab .ft-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.feat-tab .ft-title { font-size: 18px; font-weight: 700; margin-top: 8px; }
.feat-tab[aria-selected="true"] { background: var(--primary); color: #fff; min-height: 200px; box-shadow: 0 16px 36px rgba(61,90,251,0.24); }
.feat-tab[aria-selected="false"].light { background: var(--light-blue); color: var(--ink); }
.feat-tab[aria-selected="false"].navy  { background: var(--navy); color: #fff; }
.feat-tab[aria-selected="false"] { min-height: 92px; }
.feat-tab:not([aria-selected="true"]):hover { transform: translateY(-2px); }

.feat-center { display: grid; place-items: center; position: relative; }
.feat-char {
  width: 86%; max-width: 320px; aspect-ratio: 1/1; border-radius: 26px; overflow: hidden;
  background: transparent; box-shadow: none;
}
.feat-char img { width: 100%; height: 100%; object-fit: cover; }
.feat-center .spark { position: absolute; color: var(--yellow); font-size: 26px; }
.feat-center .spark.s1 { top: 6%; right: 12%; }
.feat-center .spark.s2 { bottom: 12%; left: 8%; color: var(--primary); font-size: 18px; }

.feat-desc { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.feat-desc .fd-body { font-size: 18px; line-height: 1.6; color: var(--ink); }
.feat-desc .fd-body .kw { padding-left: 7px; padding-right: 7px; }

@media (max-width: 980px) {
  .feature-row { grid-template-columns: 1fr; }
  .feat-menu { flex-direction: row; flex-wrap: wrap; }
  .feat-tab { flex: 1; min-width: 160px; }
  .feat-tab[aria-selected="true"] { min-height: 120px; }
}

/* ============================================================
   S6 · Result preview mockup
   ============================================================ */
.preview-card { max-width: 1240px; margin: var(--s-6) auto 0; padding: 42px; }
.preview-grid { display: grid; grid-template-columns: 360px 1fr; gap: 34px; align-items: stretch; }
.preview-score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--pale-blue); border-radius: 20px; padding: 34px; text-align: center;
}
.preview-score .pc-char {
  width: 240px; height: 240px; margin: 0 auto 22px; border-radius: 22px; overflow: hidden; background: transparent;
}
.preview-score .pc-char img { width: 100%; height: 100%; object-fit: cover; }
.preview-score .big { font-size: 96px; color: var(--stone); }
.preview-score .big small { font-size: 0.4em; color: var(--stone); font-weight: 500; }
.preview-result { display: grid; gap: 20px; min-width: 0; }
.preview-alert {
  border: 1px solid var(--border); border-left: 5px solid var(--primary); border-radius: 18px;
  padding: 24px 28px; background: #fff; box-shadow: 0 1px 3px rgba(15,30,51,0.03);
}
.preview-alert h3 { font-size: 22px; line-height: 1.35; font-weight: 800; color: var(--heading); }
.preview-alert p { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--ink); }
.preview-alert .kw { padding-left: 7px; padding-right: 7px; }
.pr-kicker {
  margin-bottom: 12px; font-family: var(--font-num); font-size: 12px; line-height: 1.2;
  font-weight: 800; letter-spacing: .08em; color: var(--primary);
}
.muted-kicker { color: var(--stone); }
.preview-nutrients { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.preview-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pr-card {
  min-width: 0; min-height: 156px; padding: 22px 24px;
  border: 1px solid var(--border); border-radius: 18px; background: #fff;
  box-shadow: 0 1px 3px rgba(15,30,51,0.03);
}
.pr-label { font-size: 15px; line-height: 1.3; font-weight: 800; color: var(--heading); }
.pr-value {
  display: flex; align-items: baseline; gap: 5px; margin-top: 8px; margin-bottom: 0; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-num); font-size: 30px; line-height: 1; font-weight: 800; color: var(--heading);
}
.pr-value span { font-family: var(--font-ko); font-size: 13px; font-weight: 700; color: var(--stone); }
.pr-status {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; margin-top: 3px; padding-inline: 12px;
  border-radius: var(--r-pill); font-size: 12px; line-height: 1; font-weight: 800;
}
.pr-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pr-status.ok { border: 1px solid var(--emerald); color: var(--emerald); background: var(--emerald-bg); }
.pr-status.bad { border: 1px solid var(--red); color: var(--red); background: var(--red-bg); }
.pr-rule { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--stone); }
.pr-ratio {
  margin-top: 4px; font-family: var(--font-num); font-size: 44px; line-height: 1; font-weight: 700;
  color: var(--red);
}
.pr-rule + .pr-status { margin-top: 3px; }
.pr-title { margin-top: 8px; font-size: 21px; line-height: 1.35; font-weight: 800; color: var(--heading); }
.pr-desc { margin-top: 14px; font-size: 15px; line-height: 1.65; color: var(--ink); }
.preview-foot { text-align: center; margin-top: 32px; }
@media (max-width: 1060px) {
  .preview-grid { grid-template-columns: 1fr; }
  .preview-score { max-width: 430px; width: 100%; min-height: 460px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .preview-card { padding: 24px; }
  .preview-nutrients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .preview-nutrients { grid-template-columns: 1fr; }
  .preview-score { min-height: 410px; }
  .preview-score .pc-char { width: 210px; height: 210px; }
  .preview-score .big { font-size: 78px; }
}

/* ============================================================
   S7 · Reviews
   ============================================================ */
.review-marquee { margin-top: var(--s-6); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.review-track { display: flex; width: max-content; animation: review-scroll 36s linear infinite; }
.review-marquee:hover .review-track { animation-play-state: paused; }
.review-track .review-card { flex: 0 0 min(360px, 78vw); margin-right: 24px; }
@keyframes review-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .review-track { animation: none; transform: none; } }
.review-card { overflow: hidden; padding: 0; }
.review-card .rv-photo { aspect-ratio: 1/1; overflow: hidden; }
.review-card .rv-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med); }
.review-card:hover .rv-photo img { transform: scale(1.04); }
.review-card .rv-body { padding: 24px; }
.review-card .rv-quote { font-size: 16px; font-style: italic; line-height: 1.6; color: var(--ink); }
.review-card .rv-meta { font-size: 13px; font-weight: 500; letter-spacing: .03em; color: var(--stone); margin-top: 16px; }
@media (max-width: 860px) { .review-track { animation-duration: 28s; } }

/* ============================================================
   S8 · FAQ
   ============================================================ */
.faq-list { margin-top: var(--s-6); max-width: 920px; }
.faq-item { border-top: 1px solid var(--border); }
.faq-list .faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 0; text-align: left; font-size: 18px; font-weight: 600; color: var(--heading);
}
.faq-q .chev { color: var(--primary); transition: transform var(--t-fast); flex: 0 0 auto; font-size: 20px; line-height: 1; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t-med); }
.faq-item.open .faq-a { max-height: 180px; }
.faq-a-inner { padding-bottom: 24px; font-size: 16px; line-height: 1.6; color: var(--stone); max-width: 760px; }

/* ============================================================
   S9 · Final CTA (Primary full-bleed)
   ============================================================ */
.cta-band { background: var(--primary); color: #fff; text-align: center; padding-block: var(--s-20); position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; }
.cta-pill {
  display: inline-flex; align-items: center; height: 64px; padding-inline: 36px; margin-top: 28px;
  border-radius: var(--r-pill); background: #fff; color: var(--primary);
  font-size: 26px; font-weight: 800; letter-spacing: -0.01em;
}
.cta-cta { margin-top: 36px; }
.cta-login { height: 62px; padding-inline: 40px; font-size: 19px; font-weight: 800; min-width: 280px; box-shadow: 0 14px 30px rgba(15,30,51,0.22); }
/* 발바닥 아이콘 — 버튼 글씨 색(currentColor)에 맞춰 마스크로 렌더 */
.cta-paw { width: 22px; height: 22px; flex: 0 0 auto; display: inline-block; background: currentColor;
  -webkit-mask: url(/logo/login-paw.png) center / contain no-repeat;
          mask: url(/logo/login-paw.png) center / contain no-repeat; }
.cta-wm { margin-top: 40px; font-size: clamp(80px, 16vw, 240px); color: rgba(255,255,255,0.16); }
.cta-char {
  width: min(540px, 80vw); margin: 28px auto 0; border-radius: 32px; overflow: hidden;
  background: transparent; box-shadow: none;
}
.cta-char img { width: 100%; display: block; }

/* ============================================================
   S10 · Footer
   ============================================================ */
.site-footer { background: #fff; padding-top: var(--s-10); overflow: hidden; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 40px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: var(--stone); transition: all var(--t-fast); }
.footer-social a:hover { border-color: var(--primary); color: var(--primary); }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { font-size: 13px; font-weight: 500; color: var(--stone); }
.footer-links a:hover { color: var(--primary); }
.footer-legal { font-size: 13px; color: var(--disclaimer); line-height: 1.6; padding-top: 28px; border-top: 1px solid var(--border); }
.footer-wm-wrap { margin-top: 16px; height: 180px; position: relative; }
.footer-wm {
  position: absolute; right: -10px; bottom: -52px; font-size: clamp(120px, 23vw, 320px);
  color: var(--primary); line-height: .8;
}
@media (max-width: 720px) { .footer-wm-wrap { height: 90px; } }

/* ============================================================
   F10 · Diagnosis result
   ============================================================ */
.f10-title { padding-top: var(--s-8); }
.f10-chiprow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.f10-score-row { display: grid; grid-template-columns: 4fr 8fr; gap: 28px; margin-top: var(--s-8); align-items: stretch; }
.score-panel { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; }
.score-panel .sp-char { width: 220px; height: 220px; border-radius: 24px; overflow: hidden; background: var(--light-blue); margin-bottom: 22px; }
.score-panel .sp-char img { width: 100%; height: 100%; object-fit: cover; }
.score-num { color: var(--red); display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.score-num .denom { font-size: 0.42em; color: var(--stone); font-weight: 500; }
.score-panel .sp-label { margin-top: 10px; }
.score-panel .sp-sub { margin-top: 4px; }

.msg-card { padding: 32px 32px 32px 40px; display: flex; flex-direction: column; justify-content: center; }
.msg-card h2 { margin-bottom: 16px; }
.msg-card p { font-size: 18px; line-height: 1.65; }

.nutri-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: var(--s-3); }
.nutri-card { padding: 24px; }
.nutri-card .nc-name { font-size: 16px; font-weight: 600; color: var(--heading); }
.nutri-card .nc-val { margin-top: 10px; color: var(--heading); }
.nutri-card .nc-val .unit { font-size: 0.5em; color: var(--stone); font-weight: 500; margin-left: 2px; }
.nutri-card hr { margin: 16px 0; }
.nutri-card .nc-range-meta { font-size: 14px; color: var(--stone); margin-top: 12px; }
.nutri-card .nc-sul { font-size: 13px; color: var(--stone); margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.nutri-card .range { margin-top: 16px; }

.f10-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: var(--s-3); }
.cap-card { padding: 28px; }
.cap-card .cp-num { margin: 6px 0 14px; }
.cap-card .cp-meta { font-size: 14px; color: var(--stone); margin-bottom: 12px; }
.cap-card .range { margin-bottom: 14px; }
.age-card { padding: 28px 28px 28px 36px; }
.age-card h2 { margin-bottom: 14px; }
.age-card p { font-size: 16px; line-height: 1.6; }

.portion-body { font-size: 18px; line-height: 1.65; max-width: 880px; margin: 18px 0 28px; }

.f10-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: var(--s-3); }
.f10-cta .is-saved { background: var(--emerald-tint, #ECFDF5); border-color: var(--emerald); color: var(--emerald); }
.f10-savenote { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--emerald); }
.f10-disc { font-size: 14px; font-style: italic; color: var(--disclaimer); line-height: 1.6; margin-top: 28px; display: flex; gap: 8px; }

.back-link { display: inline-flex; align-items: center; gap: 8px; padding-top: var(--s-6); }

@media (max-width: 920px) {
  .f10-score-row { grid-template-columns: 1fr; }
  .nutri-grid { grid-template-columns: repeat(2,1fr); }
  .f10-two { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .nutri-grid { grid-template-columns: 1fr; } }

/* ============================================================
   F11 · Diet recommendation
   ============================================================ */
.divider-xs { width: 28px; height: 2px; background: var(--border); border-radius: 2px; margin: 10px 0 12px; }

.rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: var(--s-8); }
.rec-card { padding: 32px; }
.rec-card .rec-cat { color: var(--heading); }
.rec-item .t-h3 { color: var(--heading); }
.rec-item p { color: var(--ink); }
.rec-sep { margin: 24px 0; }

.rec-reason { display: grid; grid-template-columns: 8fr 4fr; gap: 40px; align-items: center; margin-top: var(--s-12); }
.reason-text .t-bodyL { max-width: 620px; }
.reason-char-box { display: flex; align-items: center; justify-content: center; padding: 32px; min-height: 320px; }
.reason-char-box .rc-char { width: 240px; height: 240px; }
.reason-char-box .rc-char img { width: 100%; height: 100%; object-fit: contain; }

.rec-excluded { margin-top: var(--s-12); }
.excl-cloud { display: flex; flex-wrap: wrap; gap: 12px; }
.excl-cloud .chip { height: 36px; padding-inline: 16px; font-size: 14px; }

@media (max-width: 920px) {
  .rec-grid { grid-template-columns: 1fr; }
  .rec-reason { grid-template-columns: 1fr; gap: 28px; }
  .reason-char-box { order: -1; min-height: 0; padding: 24px; }
  .reason-char-box .rc-char { width: 180px; height: 180px; }
}

/* ============================================================
   F08 · Label upload & review
   ============================================================ */
.f08-top { display: grid; grid-template-columns: 4fr 8fr; gap: 32px; margin-top: var(--s-8); align-items: start; }

/* photo carousel */
.f08-photo { padding: 0; overflow: hidden; position: relative; aspect-ratio: 1 / 1; display: flex; }
.lbl-scan { position: relative; flex: 1; background: var(--off-white); padding: 28px; display: flex; flex-direction: column; overflow: hidden; }
.lbl-scan-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 2px solid var(--border); }
.lbl-brand { font-family: var(--font-num); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; color: var(--navy); }
.lbl-kind { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--stone); }
.lbl-scan-rows { margin-top: 18px; display: flex; flex-direction: column; gap: 0; }
.lbl-row { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; font-family: var(--font-num); font-size: 15px; font-weight: 500; color: var(--ink); padding: 9px 0; border-bottom: 1px dashed var(--border); }
.lbl-row.dim { color: var(--disclaimer); }
.lbl-scanline { position: absolute; left: 0; right: 0; height: 40px; top: 0;
  background: linear-gradient(180deg, transparent, rgba(61,90,251,0.14), transparent);
  border-top: 2px solid rgba(61,90,251,0.5); animation: lblscan 3.4s var(--ease) infinite; }
@keyframes lblscan { 0% { top: 0; } 50% { top: calc(100% - 40px); } 100% { top: 0; } }
@media (prefers-reduced-motion: reduce) { .lbl-scanline { animation: none; opacity: .4; } }
.f08-count { position: absolute; left: 14px; bottom: 14px; background: rgba(255,255,255,0.92); }

.f08-thumbs { display: flex; gap: 12px; margin-top: 14px; }
.f08-thumb { flex: 1; aspect-ratio: 1 / 1; border-radius: var(--r-input); background: var(--off-white);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--stone); transition: border-color var(--t-fast), color var(--t-fast); }
.f08-thumb:hover { border-color: var(--primary); color: var(--primary); }
.f08-thumb.active { border: 2px solid var(--primary); color: var(--primary); background: var(--pale-blue); }
.f08-exif { margin-top: 14px; display: flex; gap: 6px; }

/* form */
.f08-form { padding-top: 4px; }
.f08-fields { margin-top: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-card); background: #fff; }
.f08-field { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.f08-field:last-child { border-bottom: none; }
.f08-label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone); }
.f08-input { width: 100%; height: 48px; padding-inline: 16px; border-radius: var(--r-input);
  border: 1px solid var(--border); background: #fff; font-family: var(--font-ko); font-size: 16px; color: var(--ink);
  outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.f08-input:focus { border-color: var(--primary); border-width: 2px; }
select.f08-input { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.f08-field.need-review .f08-input { border-color: var(--red); border-width: 2px; }
.conf { flex: 0 0 auto; justify-self: end; }

/* core nutrients */
.f08-core { margin-top: var(--s-8); }
.f08-core-box { padding: 8px 28px; margin-top: var(--s-3); }
.core-row { display: grid; grid-template-columns: 1.4fr 120px auto; align-items: center; gap: 18px; padding: 16px 0; }
.core-name { font-size: 16px; font-weight: 600; color: var(--heading); }
.core-unit { font-weight: 400; font-size: 13px; }
.core-input { height: 44px; text-align: center; font-family: var(--font-num); font-weight: 600; }
.core-row.need-review .core-input { border-color: var(--red); border-width: 2px; }
.core-input.miss::placeholder { color: var(--red); letter-spacing: 2px; }
.core-check { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding-inline: 14px;
  border-radius: var(--r-pill); border: 1px solid var(--border); background: #fff; color: var(--stone);
  font-size: 13px; font-weight: 600; transition: all var(--t-fast); }
.core-check .ck { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor;
  align-items: center; justify-content: center; font-size: 10px; opacity: .4; }
.core-check.checked { border-color: var(--primary); background: var(--light-blue); color: var(--primary-hover); }
.core-check.checked .ck { background: var(--primary); border-color: var(--primary); color: #fff; opacity: 1; }
.f08-more { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; }

/* review status */
.f08-review { margin-top: var(--s-8); }
.f08-progress { max-width: 520px; height: 8px; }
.f08-progress-label { margin-top: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--primary); }
.f08-progress-label.under { color: var(--red); }

@media (max-width: 920px) {
  .f08-top { grid-template-columns: 1fr; }
  .f08-photo { max-width: 420px; }
  .core-row { grid-template-columns: 1fr auto; grid-template-areas: "name conf" "input input"; gap: 10px 12px; }
  .core-name { grid-area: name; } .core-input { grid-area: input; } .conf { grid-area: conf; justify-self: end; }
}

/* F08 upload + analyzing views */
.f08-drop { margin-top: var(--s-6); border: 2px dashed var(--border); border-radius: var(--r-card);
  background: var(--off-white); padding: 48px 32px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 12px; transition: border-color var(--t-fast), background var(--t-fast); }
.f08-drop.over { border-color: var(--primary); background: var(--pale-blue); }
.f08-drop-char { width: 160px; height: 160px; }
.f08-drop-char img { width: 100%; height: 100%; object-fit: contain; }
.f08-drop-title { color: var(--heading); margin-top: 4px; }
.f08-drop .btn { margin-top: 10px; }
.f08-drop-meta { margin-top: 2px; }
#f08Upload .f08-exif { margin-top: 16px; display: flex; gap: 6px; justify-content: center; }

.f08-analyzing-box { max-width: 540px; margin: var(--s-12) auto 0; display: flex; flex-direction: column;
  align-items: center; gap: 16px; text-align: center; }
.f08-fail-box { max-width: 540px; margin: var(--s-10) auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.f08-fail-char { width: 180px; height: 180px; }
.f08-fail-char img { width: 100%; height: 100%; object-fit: contain; }
.f08-fail-box .t-h1 { color: var(--heading); }
.f08-fail-cta { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.f08-fail-note { display: flex; gap: 6px; margin-top: 8px; }
.f11-fail { max-width: 540px; margin: var(--s-8) auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.f11-fail .t-h1 { color: var(--heading); }
.f11-fail[hidden] { display: none; }
.f08-analyzing-char { width: 200px; height: 200px; }
.f08-analyzing-char img { width: 100%; height: 100%; object-fit: contain; }
.f08-analyzing-box .t-h1 { color: var(--heading); }
.f08-indeterminate { width: 100%; max-width: 380px; height: 6px; overflow: hidden; margin-top: 8px; }
.f08-indeterminate .bar { width: 40%; border-radius: inherit; animation: f08slide 1.3s ease-in-out infinite; }
@keyframes f08slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .f08-indeterminate .bar { animation: none; width: 60%; margin-left: 20%; } }
.f08-anal-thumbs { display: flex; gap: 10px; margin-top: 6px; }
.f08-anal-thumb { padding: 7px 16px; border-radius: var(--r-pill); background: var(--light-blue);
  color: var(--primary-hover); font-size: 13px; font-weight: 600; }

/* ============================================================
   F09 · Food search
   ============================================================ */
.f09-searchrow { display: grid; grid-template-columns: 1fr 260px; gap: 16px; margin-top: var(--s-8); }
.f09-sort .f08-input { height: 64px; border-radius: var(--r-pill); border-color: var(--border); font-weight: 600; padding-left: 24px; }

.f09-filters { display: flex; flex-wrap: wrap; gap: 28px; margin-top: var(--s-3); }
.f09-filter-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.f09-filter-label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--stone); }
.fchip { cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }

.f09-fit-panel { display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px; border-radius: var(--r-card); margin-top: var(--s-5); flex-wrap: wrap; transition: opacity var(--t-fast); }
.f09-fit-panel.off { opacity: .55; }
.f09-fit-panel .fp-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.fp-portion { font-size: 15px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.fp-portion input { width: 56px; height: 38px; text-align: center; border-radius: 10px; border: 1px solid var(--primary);
  background: #fff; font-family: var(--font-num); font-weight: 700; font-size: 15px; color: var(--primary-hover); outline: none; }
.fp-toggle { cursor: pointer; height: 40px; }

.f09-count { margin-top: var(--s-5); color: var(--stone); font-size: 15px; }
.f09-count strong { color: var(--heading); font-family: var(--font-num); }
.f09-prompt { margin-top: var(--s-8); padding: 48px 32px; text-align: center; border: 1px dashed var(--border); border-radius: var(--r-card); background: var(--off-white); }
.f09-prompt strong { color: var(--primary); }

.f09-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: var(--s-3); }
.f09-card { width: calc((100% - 48px) / 3); padding: 20px; position: relative; display: flex; flex-direction: column; cursor: pointer; transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.f09-card:hover { border-color: var(--primary); background: var(--pale-blue); }
.f09-tag { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.94); }
.f09-pkg { aspect-ratio: 4 / 3; border-radius: var(--r-input); background: var(--off-white);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; border: 1px solid var(--border); }
.f09-pkg span { font-family: var(--font-num); font-weight: 800; letter-spacing: 0.12em; font-size: 18px; color: #C7CEDB; }
.f09-prod { margin-top: 2px; font-size: 14px; }
.f09-chips { display: flex; gap: 8px; margin-top: 12px; }
.f09-fit { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; }
.fit-score { line-height: 1; }
.score-emerald { color: var(--emerald); }
.score-primary { color: var(--primary); }
.score-red { color: var(--red); }
.f09-fit-unit { font-size: 12px; color: var(--stone); }

.mini-bars { display: flex; gap: 10px; margin-top: 16px; }
.mini-bars .mb { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.mini-bars .mb i { display: block; height: 4px; border-radius: 2px; background: var(--border); }
.mini-bars .mb em { font-style: normal; font-size: 11px; color: var(--stone); text-align: center; }

.f09-diag { margin-top: 18px; align-self: flex-start; }

/* empty state */
.f09-empty { text-align: center; max-width: 520px; margin: var(--s-10) auto 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.f09-empty-char { width: 240px; height: 240px; }
.f09-empty-char img { width: 100%; height: 100%; object-fit: contain; }
.f09-empty .btn { margin-top: 8px; }
.f09-empty-note { font-size: 14px; color: var(--stone); line-height: 1.6; display: flex; gap: 6px; justify-content: center; }

@media (max-width: 980px) {
  .f09-card { width: calc((100% - 24px) / 2); }
  .f09-searchrow { grid-template-columns: 1fr; }
  .f09-sort .f08-input { height: 56px; }
}
@media (max-width: 560px) { .f09-card { width: 100%; } }

/* dog switcher (Step 1) */
.f09-dogswitch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: var(--s-6); }
.f09-switch-label { font-size: 14px; font-weight: 600; color: var(--stone); }
.f09-dogchips { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.dogchip { cursor: pointer; }

/* portion modal (Step 3) */
.f09-modal-card { max-width: 460px; text-align: left; }
.f09-modal-food { display: flex; gap: 16px; align-items: center; background: var(--off-white);
  border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px; margin: 22px 0 20px; }
.f09-pkg.sm { width: 64px; height: 64px; aspect-ratio: auto; margin: 0; border-radius: 14px; flex: 0 0 auto; }
.f09-pkg.sm span { font-size: 13px; }
.f09-modal-brand { font-size: 17px; font-weight: 700; color: var(--heading); }
.f09-modal-food .f09-chips { margin-top: 8px; }
.f09-portion-field { display: flex; flex-direction: column; gap: 8px; }
.f09-portion-field input { height: 56px; border: 1px solid var(--primary); border-radius: var(--r-input);
  padding-inline: 18px; font-family: var(--font-num); font-weight: 700; font-size: 22px; color: var(--primary-hover);
  background: #fff; outline: none; }
.f09-portion-field input:focus { border-width: 2px; }
.f09-portion-hint { margin: 12px 0 22px; line-height: 1.6; }

/* 카드 박스 전체 클릭 → 상세 모달 (.f09-card cursor:pointer) */

/* food detail modal */
.f09-detail-card { max-width: 480px; text-align: left; }
.f09-det-head { display: flex; gap: 16px; align-items: center; margin: 18px 0 22px; }
.f09-det-head .f09-chips { margin-top: 8px; }
.f09-det-section { padding-top: 18px; padding-bottom: 18px; border-top: 1px solid var(--border); }
.f09-det-label { margin-bottom: 12px; }
.f09-ingredients { display: flex; flex-wrap: wrap; gap: 8px; }
.f09-ing { font-size: 14px; font-weight: 500; color: var(--ink); background: var(--off-white);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 14px; }
.f09-ing-more { font-size: 14px; font-weight: 600; color: var(--primary); border-radius: var(--r-pill);
  padding: 6px 14px; background: var(--light-blue); }
.f09-ing-more:hover { color: var(--primary-hover); }
.f09-nutri-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.f09-nutri-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.f09-nutri-name { font-size: 14px; color: var(--stone); }
.f09-nutri-val { font-family: var(--font-num); font-weight: 600; font-size: 14px; color: var(--heading); }
.f09-det-source { margin: 18px 0 22px; display: flex; gap: 6px; }

/* food reviews */
.f09-review-section { margin-top: 4px; }
.f09-review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.f09-rating-summary { display: flex; align-items: center; gap: 8px; }
.f09-rating-stars { color: var(--yellow); font-size: 15px; letter-spacing: 1px; }
.f09-rating-num { font-size: 13px; color: var(--stone); }
.f09-rating-num strong { font-family: var(--font-num); color: var(--heading); }
.f09-review-list { display: flex; flex-direction: column; gap: 14px; }
.f09-review-item { background: var(--off-white); border-radius: var(--r-input); padding: 14px 16px; }
.f09-review-itemhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.f09-review-name { font-size: 14px; font-weight: 700; color: var(--heading); }
.f09-review-stars { color: var(--yellow); font-size: 13px; letter-spacing: 1px; }
.f09-review-body { font-size: 14px; line-height: 1.55; color: var(--ink); margin-top: 6px; }
.f09-review-empty { padding: 10px 0; font-size: 14px; }
.f09-review-form { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.f09-star-input { display: flex; gap: 4px; }
.f09-star { font-size: 26px; line-height: 1; color: var(--border); background: none; padding: 0; transition: color var(--t-fast); }
.f09-star:hover, .f09-star.on { color: var(--yellow); }
.f09-review-text { border: 1px solid var(--border); border-radius: var(--r-input); padding: 12px 14px;
  font-family: var(--font-ko); font-size: 14px; line-height: 1.5; color: var(--ink); resize: vertical; outline: none; }
.f09-review-text:focus { border-color: var(--primary); border-width: 2px; }
.f09-review-submit { align-self: flex-end; height: 42px; }
.f09-review-actions { display: flex; gap: 10px; margin-top: 8px; }
.f09-rev-editbox { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.f09-rev-editcta { display: flex; align-items: center; gap: 10px; }
@media (max-width: 480px) { .f09-nutri-rows { grid-template-columns: 1fr; } }

/* ============================================================
   F03 + F05 · Registration & auth modal
   ============================================================ */
.container-narrow { max-width: 760px; }

.f03-photo-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: var(--s-8); position: relative; }
.f03-photo { width: 200px; height: 200px; border-radius: 50%; border: 2px dashed var(--stone); position: relative;
  background: var(--off-white); display: flex; align-items: center; justify-content: center;
  color: var(--stone); transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); overflow: hidden; }
.f03-photo:hover { border-color: var(--primary); color: var(--primary); }
.f03-photo-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; text-align: center; }
.f03-photo.filled { border-style: solid; border-color: var(--primary); background: var(--light-blue); }
.f03-photo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.f03-photo-pop { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); z-index: 30;
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px; width: 260px;
  box-shadow: 0 12px 32px rgba(15,30,51,0.16); }
.f03-photo-pop[hidden] { display: none; }
.f03-photo-pop-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone); margin-bottom: 10px; }
.f03-photo-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.f03-preset { width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 2px solid transparent; transition: border-color var(--t-fast); }
.f03-preset:hover { border-color: var(--primary); }
.f03-preset img { width: 100%; height: 100%; object-fit: cover; }
.f03-photo-file { width: 100%; height: 40px; }
.f03-photo.filled .f03-photo-empty { display: none; }

.f03-form { margin-top: var(--s-6); padding: 8px 32px; }
.f03-field { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 20px; padding: 20px 0; }
.f03-label { font-size: 15px; font-weight: 600; color: var(--heading); }
.f03-sublabel { font-size: 13px; font-weight: 400; }
.f03-control { min-width: 0; }
.f03-control.inline-hint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hint-pill { white-space: nowrap; font-size: 13px; }
.age-num { width: 100px; flex: 0 0 auto; }
.age-unit { width: 90px; flex: 0 0 auto; }

/* custom radio */
.radio-row { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-row.vert { flex-direction: column; gap: 10px; }
.radio-opt { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding-inline: 18px; white-space: nowrap;
  border-radius: var(--r-input); border: 1px solid var(--border); background: #fff; color: var(--ink);
  font-size: 15px; font-weight: 500; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.radio-opt .rdot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--stone); flex: 0 0 auto; transition: all var(--t-fast); position: relative; }
.radio-opt.selected { border-color: var(--primary); background: var(--pale-blue); color: var(--primary-hover); font-weight: 600; }
.radio-opt.selected .rdot { border-color: var(--primary); }
.radio-opt.selected .rdot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); }
.radio-opt:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* modal */
.modal-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(11,27,54,0.55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; transition: opacity var(--t-med); overflow-y: auto; }
.modal-scrim[hidden] { display: none; }
.modal-scrim.show { opacity: 1; }
.modal-card { position: relative; width: 100%; max-width: 560px; background: #fff; border-radius: var(--r-step);
  padding: 40px; margin: auto; transform: translateY(16px) scale(0.98); transition: transform var(--t-med); box-shadow: 0 30px 80px rgba(11,27,54,0.35); }
.modal-scrim.show .modal-card { transform: none; }

/* confirm dialog */
.confirm-card { max-width: 420px; text-align: left; }
.confirm-title { color: var(--heading); }
.confirm-sub { margin-top: 10px; line-height: 1.6; }
.confirm-cta { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 26px; }
.confirm-ok.confirm-danger { background: var(--red); }
.confirm-ok.confirm-danger:hover { background: #D63B3B; }
.modal-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--stone); font-size: 16px; transition: background var(--t-fast); }
.modal-close:hover { background: var(--off-white); }
.modal-char { width: 110px; height: 110px; margin: 0 auto 20px; }
.modal-char img { width: 100%; height: 100%; object-fit: contain; }
.modal-sub { text-align: center; margin-top: 12px; }
.modal-note { margin-top: 16px; line-height: 1.6; display: flex; gap: 6px; }
.modal-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 28px; }
.modal-badge { margin: 0 auto; display: flex; width: fit-content; }
.modal-info { border-radius: var(--r-stat); padding: 22px 24px; margin: 22px 0 16px; display: flex; flex-direction: column; gap: 12px; }
.mi-row { display: flex; justify-content: space-between; font-size: 15px; }
.mi-row span:last-child { font-family: var(--font-num); font-weight: 600; color: var(--heading); }
#f05SuccessPanel { text-align: center; }
.btn.loading { position: relative; color: transparent; }
.btn.loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .f03-field { grid-template-columns: 1fr; gap: 10px; }
  .modal-card { padding: 28px 22px; }
}

/* ============================================================
   F17 · MBTI survey
   ============================================================ */
/* intro */
.f17-intro { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; padding-bottom: 24px; }
.f17-intro-char { width: 280px; height: 280px; }
.f17-intro-char img { width: 100%; height: 100%; object-fit: contain; }
.f17-intro-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.f17-intro .btn { margin-top: 10px; }
.f17-dogpick { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.f17-dogpick-label { font-size: 14px; font-weight: 600; color: var(--stone); }
.f17-dogpick-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.dogchip { cursor: pointer; }
.f17-saved-chip { display: flex; justify-content: center; margin-top: 14px; }
/* compose dog picker */
.co-compose-dogpick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; }
.co-compose-doglabel { font-size: 13px; font-weight: 600; color: var(--stone); width: 100%; }
/* myfeed dog list */
.mf-dog-item { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--stone); }
.mf-dog-item:not(:last-child)::after { content: "·"; margin-left: 6px; color: var(--border); }

/* survey */
.f17-grid { display: grid; grid-template-columns: 8fr 4fr; gap: 24px; margin-top: var(--s-4); align-items: start; }
.f17-qcard { padding: 48px; }
.f17-question { font-size: 20px; line-height: 1.55; color: var(--heading); font-weight: 500; min-height: 62px; }

/* horizontal circle scale (큰·중간·작은·중간·큰) */
.f17-scale-wrap { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 40px; }
.f17-pole { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--stone); text-align: center; line-height: 1.3; }
.f17-circles { display: flex; align-items: center; justify-content: center; gap: 18px; flex: 1; }
.f17-circle { flex: 0 0 auto; border-radius: 50%; background: #fff; border: 2px solid var(--border);
  cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); position: relative; }
.f17-circle.sz-lg { width: 64px; height: 64px; }
.f17-circle.sz-md { width: 50px; height: 50px; }
.f17-circle.sz-sm { width: 38px; height: 38px; }
.f17-circle.tone-agree { border-color: var(--primary); }
.f17-circle.tone-disagree { border-color: var(--stone); }
.f17-circle.tone-center { border-color: var(--border); }
.f17-circle:hover { transform: scale(1.08); }
.f17-circle.tone-agree:hover { background: var(--pale-blue); }
.f17-circle.selected.tone-agree { background: var(--primary); border-color: var(--primary); }
.f17-circle.selected.tone-disagree { background: var(--stone); border-color: var(--stone); }
.f17-circle.selected.tone-center { background: var(--heading); border-color: var(--heading); }
.f17-circle.selected::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 4px rgba(61,90,251,0.16); }
.f17-circle.selected.tone-disagree::after { box-shadow: 0 0 0 4px rgba(107,114,128,0.16); }
.f17-circle:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.f17-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; gap: 16px; }

/* focused survey top bar */
.f17-survey-top { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) 0 var(--s-4); }
.f17-exit { color: var(--stone); }
.f17-qprogress { display: flex; align-items: center; gap: 16px; margin-bottom: var(--s-5); }
.f17-qprogress .progress { flex: 1; height: 8px; }
.f17-qcount { font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.f17-survey .f17-qcard { max-width: 720px; margin: 0 auto; }
.f17-survey .f17-panel-note { display: flex; gap: 6px; margin-top: var(--s-6); }
@media (max-width: 520px) {
  .f17-scale-wrap { gap: 8px; }
  .f17-circles { gap: 10px; }
  .f17-circle.sz-lg { width: 52px; height: 52px; }
  .f17-circle.sz-md { width: 42px; height: 42px; }
  .f17-circle.sz-sm { width: 32px; height: 32px; }
  .f17-pole { font-size: 11px; }
}

/* progress panel */
.f17-progress-panel { padding: 28px; position: sticky; top: 100px; }
.f17-overall { color: var(--heading); margin-top: 10px; }
.f17-of { font-size: 24px; color: var(--stone); }
.f17-axes { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.f17-axis { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.ax-name { font-size: 13px; color: var(--stone); }
.ax-name b { color: var(--heading); font-weight: 700; margin-left: 4px; }
.ax-bar { grid-column: 1 / 2; }
.ax-count { font-family: var(--font-num); font-size: 12px; font-weight: 600; color: var(--primary); grid-row: 1; grid-column: 2; }
.f17-panel-note { margin-top: 22px; line-height: 1.6; display: flex; gap: 6px; }

/* result */
.f17-result { padding-top: var(--s-10); }
.f17-code { font-family: var(--font-num); font-weight: 800; font-size: 80px; letter-spacing: 0.16em;
  color: var(--heading); text-align: center; padding-left: 0.16em; }
.f17-nick-sub { text-align: center; font-size: 18px; margin-top: 6px; }
.f17-result-axes { display: flex; flex-direction: column; gap: 20px; }
.r-axis { display: grid; grid-template-columns: 64px 24px 1fr 38px; grid-template-areas: "label letter track raw" "meta meta meta meta"; align-items: center; gap: 8px 14px; }
.ra-label { font-size: 14px; font-weight: 600; color: var(--heading); grid-area: label; }
.ra-letter { font-family: var(--font-num); font-weight: 800; font-size: 20px; color: var(--primary); text-align: center; grid-area: letter; }
.r-track { position: relative; height: 8px; border-radius: 4px; grid-area: track;
  background: linear-gradient(90deg, var(--light-blue), var(--border) 50%, var(--light-blue)); }
.r-track::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--stone); opacity: .4; }
.r-fill { position: absolute; top: 0; height: 8px; background: var(--primary); border-radius: 4px; opacity: .35; }
.r-mark { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--primary);
  transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(61,90,251,0.18); }
.ra-raw { font-family: var(--font-num); font-weight: 700; font-size: 15px; color: var(--heading); text-align: right; grid-area: raw; }
.ra-meta { font-family: var(--font-num); font-size: 12px; font-weight: 600; color: var(--stone); white-space: nowrap; grid-area: meta; }
.f17-result-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: var(--s-6); text-align: center; }

@media (max-width: 920px) {
  .f17-grid { grid-template-columns: 1fr; }
  .f17-progress-panel { position: static; }
  .f17-qcard { padding: 32px; }
}
@media (max-width: 560px) {
  .f17-code { font-size: 54px; }
  .r-axis { grid-template-columns: 56px 22px 1fr 34px; }
  .ra-meta { text-align: left; }
}

/* ============================================================
   F01 · Login / Signup
   ============================================================ */
.f01-screen { min-height: 100vh; }
.f01-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

/* brand panel */
.f01-brand { background: var(--primary); color: #fff; padding: 48px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; }
.f01-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: #fff; z-index: 2; }
.f01-logo .brand-mark { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.16);
  display: inline-flex; align-items: center; justify-content: center; }
.f01-brand-mid { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; z-index: 2; max-width: 440px; transform: translateY(-24px); }
.f01-brand-char { width: 200px; height: 200px; margin-bottom: 4px; }
.f01-brand-char img { width: 100%; height: 100%; object-fit: contain; }
.f01-brand-head { color: #fff; }
.f01-brand-sub { color: rgba(255,255,255,0.86); }
.f01-wm { font-size: 120px; color: rgba(255,255,255,0.10); position: absolute; bottom: -22px; left: 40px; z-index: 1; }

/* form panel */
.f01-form-panel { display: flex; align-items: center; justify-content: center; padding: 48px; background: #fff; }
.f01-form { width: 100%; max-width: 420px; position: relative; }
.f01-back { position: absolute; top: -28px; left: 0; padding-top: 0; white-space: nowrap; }
.f01-head { margin-bottom: 28px; }
.f01-head .t-h1 { color: var(--heading); }
.f01-switch { margin-top: 26px; font-size: 15px; color: var(--stone); text-align: center; }
.f01-switch-link { color: var(--primary); font-weight: 600; }
.f01-switch-link:hover { color: var(--primary-hover); text-decoration: underline; }
.f01-error { color: var(--red); font-size: 13px; margin-top: 6px; display: flex; gap: 5px; }
.f01-error::before { content: "•"; }
.input-err { border-color: var(--red) !important; border-width: 2px !important; }
.f01-tabs { display: flex; gap: 8px; background: var(--off-white); padding: 6px; border-radius: var(--r-pill); margin-bottom: 32px; }
.f01-tab { flex: 1; height: 44px; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; color: var(--stone); transition: background var(--t-fast), color var(--t-fast); }
.f01-tab.active { background: #fff; color: var(--primary); box-shadow: var(--sh-card); }
.f01-fields { display: flex; flex-direction: column; gap: 18px; }
.f01-field { display: flex; flex-direction: column; gap: 8px; }
.f01-field .f08-label { color: var(--stone); }
.f01-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.req { color: var(--red); font-size: 11px; font-weight: 700; margin-left: 4px; }
.f01-hint { font-size: 13px; color: var(--stone); display: flex; gap: 6px; line-height: 1.5; }
.f01-agree { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink); cursor: pointer; line-height: 1.5; }
.f01-agree input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--primary); margin-top: 1px; }
.f01-fields .btn-lg { margin-top: 8px; }

.f01-divider { display: flex; align-items: center; gap: 14px; color: var(--stone); font-size: 13px; margin: 4px 0; }
.f01-divider span { white-space: nowrap; }
.f01-divider::before, .f01-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.f01-social { display: flex; flex-direction: column; gap: 12px; }
.f01-social-btn { width: 100%; justify-content: center; gap: 10px; font-weight: 600; border: 1px solid var(--border); background: #fff; color: var(--ink); }
.f01-social-btn:hover { background: var(--off-white); }
.f01-social-btn .ss { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.f01-naver .ss { background: #03C75A; color: #fff; }
.f01-kakao .ss { background: #FEE500; color: #3A1D1D; font-size: 10px; }

@media (max-width: 860px) {
  .f01-split { grid-template-columns: 1fr; }
  .f01-brand { display: none; }
  .f01-form-panel { min-height: 100vh; }
  .f01-back { position: static; margin-bottom: 16px; }
}

/* ============================================================
   Community (F13~F16)
   ============================================================ */
.co-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: var(--s-8); max-width: 720px; margin-left: auto; margin-right: auto; }
.co-emd { margin-top: 14px; }
.co-region { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--primary);
  background: var(--light-blue); border-radius: var(--r-pill); padding: 6px 14px 6px 16px; }
.co-region-pin { flex: 0 0 auto; }
.co-region-sel { appearance: none; -webkit-appearance: none; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-ko); font-size: 14px; font-weight: 700; color: var(--primary-hover); padding-right: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%232548D5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; outline: none; }
.co-vmark { display: inline-flex; vertical-align: -1px; }
.co-author-name { display: inline-flex; align-items: center; gap: 4px; }
.co-head-actions { display: flex; align-items: center; gap: 14px; }
.co-sort { display: flex; gap: 4px; background: var(--off-white); padding: 5px; border-radius: var(--r-pill); }
.co-sort-btn { height: 36px; padding: 0 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--stone); transition: background var(--t-fast), color var(--t-fast); }
.co-sort-btn.active { background: #fff; color: var(--primary); box-shadow: var(--sh-card); }

.co-posts { display: flex; flex-direction: column; gap: 18px; margin: var(--s-6) auto 0; max-width: 720px; }
.co-card { padding: 24px; cursor: pointer; }
.co-author { display: flex; align-items: center; gap: 12px; }
.co-ava { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--off-white); }
.co-ava.lg { width: 52px; height: 52px; }
.co-ava img { width: 100%; height: 100%; object-fit: cover; }
.co-author-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-author-name { font-size: 16px; font-weight: 700; color: var(--heading); }
.co-author-dog { font-size: 13px; color: var(--stone); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.co-dog-sep { color: var(--border); margin: 0 1px; }
.co-dog-vmark { display: inline-flex; vertical-align: -2px; }
.co-body { font-size: 16px; line-height: 1.6; color: var(--ink); margin-top: 14px; }
.co-photos { display: grid; gap: 8px; margin-top: 14px; border-radius: 16px; overflow: hidden; }
.co-photos.one { grid-template-columns: 1fr; }
.co-photos.two { grid-template-columns: 1fr 1fr; }
.co-photos.three { grid-template-columns: 1fr 1fr 1fr; }
.co-photo { aspect-ratio: 1 / 1; background: var(--off-white); }
.co-photos.one .co-photo { aspect-ratio: 16 / 10; }
.co-photo img { width: 100%; height: 100%; object-fit: cover; }
.co-meta { font-size: 13px; color: var(--stone); margin-top: 14px; }

.co-empty { text-align: center; max-width: 460px; margin: var(--s-10) auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.co-empty-char { width: 180px; height: 180px; }
.co-empty-char img { width: 100%; height: 100%; object-fit: contain; }
.co-empty .btn { margin-top: 8px; }

/* detail */
.co-detail-card { margin-top: var(--s-5); }
.co-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.co-follow-btn { height: 40px; }
.co-owner-menu { display: flex; gap: 12px; }
.co-detail-bodytext { font-size: 17px; line-height: 1.7; color: var(--ink); margin-top: 20px; white-space: pre-wrap; }
.co-detail-meta { margin-top: 16px; }
.co-comments { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.co-comment-empty { padding: 16px 0; }
.co-comment-row { display: flex; gap: 12px; align-items: flex-start; }
.co-comment-ava { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--light-blue); }
.co-comment-ava img { width: 100%; height: 100%; object-fit: cover; }
.co-comment-main { flex: 1; min-width: 0; }
.co-comment-head { display: flex; align-items: baseline; gap: 10px; }
.co-comment-name { font-size: 14px; font-weight: 700; color: var(--heading); }
.co-comment-time { font-size: 12px; color: var(--stone); }
.co-comment-body { font-size: 15px; line-height: 1.55; color: var(--ink); margin-top: 5px; }
.co-comment-actions { display: flex; gap: 10px; margin-top: 6px; }
.co-comment-form { display: flex; gap: 10px; margin-top: 24px; }
.co-comment-form input { flex: 1; height: 48px; padding-inline: 16px; border-radius: var(--r-input); border: 1px solid var(--border); background: #fff; font-family: var(--font-ko); font-size: 15px; outline: none; }
.co-comment-form input:focus { border-color: var(--primary); border-width: 2px; }
.co-comment-form .btn { height: 48px; flex: 0 0 auto; }
.co-edit-box { margin-top: 18px; }
.co-edit-area { width: 100%; }
.co-edit-cta { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.co-cmt-editbox { margin-top: 8px; }
.co-cmt-editinput { width: 100%; height: 44px; padding-inline: 14px; border-radius: var(--r-input); border: 1px solid var(--primary); background: #fff; font-family: var(--font-ko); font-size: 15px; outline: none; }
.co-cmt-editinput:focus { border-width: 2px; }

/* compose modal */
.co-compose-card { max-width: 540px; }
.co-textarea { width: 100%; margin-top: 20px; border: 1px solid var(--border); border-radius: var(--r-input); padding: 16px; font-family: var(--font-ko); font-size: 16px; line-height: 1.6; color: var(--ink); resize: vertical; outline: none; }
.co-textarea:focus { border-color: var(--primary); border-width: 2px; }
.co-photo-area { margin-top: 16px; }
.co-photo-slots { display: flex; gap: 10px; flex-wrap: wrap; }
.co-photo-slots:not(:empty) { margin-bottom: 12px; }
.co-slot { position: relative; width: 88px; height: 88px; border-radius: 12px; overflow: hidden; }
.co-slot img { width: 100%; height: 100%; object-fit: cover; }
.co-slot-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(11,27,54,0.7); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.co-photo-add { height: 44px; padding: 0 18px; border-radius: var(--r-input); border: 1px dashed var(--stone); background: transparent; font-size: 14px; font-weight: 600; color: var(--primary); }
.co-photo-add:disabled { color: var(--stone); border-color: var(--border); cursor: default; }
.co-compose-note { margin: 14px 0 4px; display: flex; gap: 6px; }
.co-compose-cta { display: flex; align-items: center; gap: 14px; margin-top: 20px; }

/* follow list */
.co-follow-tabs { display: flex; gap: 8px; background: var(--off-white); padding: 6px; border-radius: var(--r-pill); margin: var(--s-6) 0 var(--s-5); max-width: 320px; }
.co-follow-tab { flex: 1; height: 44px; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; color: var(--stone); }
.co-follow-tab.active { background: #fff; color: var(--primary); box-shadow: var(--sh-card); }
.co-follow-list { display: flex; flex-direction: column; gap: 12px; }
.co-fl-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--r-card); background: #fff; }
.co-fl-row .co-author-info { flex: 1; }
.co-fl-btn { height: 40px; flex: 0 0 auto; }

/* mypage follow links */
.mp-follow-links { display: flex; gap: 24px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.mp-follow-link { font-size: 14px; color: var(--stone); }
.mp-follow-link strong { font-family: var(--font-num); color: var(--heading); margin-right: 4px; }
.mp-follow-link:hover { color: var(--primary); }

@media (max-width: 560px) {
  .co-head { align-items: flex-start; }
  .co-photos.three { grid-template-columns: 1fr 1fr; }
}

/* feed card follow + clickable name */
.co-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.co-name-link { cursor: pointer; }
.co-name-link:hover { color: var(--primary); }
.co-feed-follow { flex: 0 0 auto; height: 32px; padding: 0 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600;
  border: 1px solid var(--primary); background: #fff; color: var(--primary); transition: background var(--t-fast), color var(--t-fast); }
.co-feed-follow:hover { background: var(--pale-blue); }
.co-feed-follow.on { border-color: transparent; background: transparent; color: var(--stone); }
.co-feed-follow.on:hover { color: var(--ink); }

/* post thumbnail grid (mypage / profile) */
.co-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.co-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--off-white); cursor: pointer; display: block; }
.co-thumb img { width: 100%; height: 100%; object-fit: cover; }
.co-thumb.no-photo { background: var(--light-blue); display: flex; align-items: center; justify-content: center; padding: 14px; }
.co-thumb-text { font-size: 13px; line-height: 1.5; color: var(--primary-hover); font-weight: 500; text-align: left; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.co-thumb-overlay { position: absolute; inset: 0; background: rgba(11,27,54,0.5); display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; font-weight: 600; opacity: 0; transition: opacity var(--t-fast); }
.co-thumb:hover .co-thumb-overlay { opacity: 1; }

/* other-user profile */
.co-prof-head { display: flex; gap: 28px; align-items: center; margin-top: var(--s-5); }
.co-prof-photo { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--off-white); }
.co-prof-photo img { width: 100%; height: 100%; object-fit: cover; }
.co-prof-main { flex: 1; min-width: 0; }
.co-prof-namerow { display: flex; align-items: center; gap: 14px; }
.co-prof-namerow .t-h1 { color: var(--heading); display: inline-flex; align-items: center; gap: 8px; }
.co-prof-dog { margin-top: 6px; }
.co-prof-stats { display: flex; gap: 24px; margin: 16px 0 18px; }
.co-prof-stats span, .co-prof-stat { font-size: 14px; color: var(--stone); }
.co-prof-stat:hover { color: var(--primary); }
.co-prof-stats strong { font-family: var(--font-num); color: var(--heading); margin-right: 4px; }
.co-prof-follow { height: 44px; }
.co-prof-empty { padding: var(--s-8) 0; text-align: center; font-size: 17px; }

/* mypage tabs + my posts */
.mp-tabs { display: flex; gap: 8px; background: var(--off-white); padding: 6px; border-radius: var(--r-pill); margin-bottom: 18px; max-width: 320px; }
.mp-tab { flex: 1; height: 42px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--stone); }
.mp-tab.active { background: #fff; color: var(--primary); box-shadow: var(--sh-card); }
.mp-posts-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: var(--s-6) 0; }
.mp-posts-char { width: 150px; height: 150px; }
.mp-posts-char img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 560px) {
  .co-prof-head { flex-direction: column; text-align: center; gap: 16px; }
  .co-prof-stats { justify-content: center; }
  .co-prof-namerow { justify-content: center; }
}

/* MBTI badge on author dog line */
.co-mbti { display: inline-block; font-family: var(--font-num); font-weight: 700; font-size: 11px; letter-spacing: 0.04em;
  color: var(--primary-hover); background: var(--light-blue); border-radius: 5px; padding: 1px 6px; }

/* My Feed (내 게시글) */
.mf-head { display: flex; gap: 32px; align-items: center; margin-top: var(--s-6); }
.mf-photo { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--light-blue); position: relative; cursor: pointer; }
.mf-photo img { width: 100%; height: 100%; object-fit: cover; }
.mf-photo-edit { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: flex; align-items: center; justify-content: center;
  background: rgba(11,27,54,0.6); color: #fff; font-size: 12px; font-weight: 700; opacity: 0; transition: opacity var(--t-fast); }
.mf-photo:hover .mf-photo-edit { opacity: 1; }
.mp-photo-edit { display: flex; align-items: center; gap: 16px; margin: 22px 0 6px; }
.mp-photo-preview { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--light-blue); }
.mp-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.mp-photo-edit-text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mp-photo-btn { height: 40px; }
.mf-main { flex: 1; min-width: 0; }
.mf-namerow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mf-namerow .t-h1 { color: var(--heading); }
.mf-edit { height: 40px; }
.mf-dog { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mf-stats { display: flex; gap: 36px; margin-top: 18px; }
.mf-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; }
.mf-stat strong { font-family: var(--font-num); font-size: 22px; font-weight: 700; color: var(--heading); }
.mf-stat span { font-size: 13px; color: var(--stone); }
button.mf-stat { cursor: pointer; }
button.mf-stat:hover strong { color: var(--primary); }
.mf-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: var(--s-8) 0; }
.mf-empty-char { width: 150px; height: 150px; }
.mf-empty-char img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 560px) {
  .mf-head { flex-direction: column; text-align: center; gap: 18px; }
  .mf-namerow, .mf-stats, .mf-dog { justify-content: center; }
}

/* toast */
#appToast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); z-index: 200;
  background: var(--ink); color: #fff; padding: 13px 22px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 32px rgba(11,27,54,0.3); opacity: 0; pointer-events: none; transition: opacity var(--t-med), transform var(--t-med); }
#appToast.show { opacity: 1; transform: translate(-50%, 0); }
.mp-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; margin-top: var(--s-8); align-items: start; }

/* left · dog list */
.mp-doglist { display: flex; flex-direction: column; gap: 14px; }
.mp-dogcards { display: flex; flex-direction: column; gap: 12px; }
.mp-dogcard { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: var(--r-card);
  border: 1px solid var(--border); background: #fff; text-align: left; width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.mp-dogcard:hover { border-color: var(--primary); }
.mp-dogcard.active { border: 2px solid var(--primary); background: var(--pale-blue); }
.mp-dog-photo { width: 56px; height: 56px; border-radius: 16px; overflow: hidden; flex: 0 0 auto; background: var(--off-white); }
.mp-dog-photo img { width: 100%; height: 100%; object-fit: cover; }
.mp-dog-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.mp-dog-name { font-size: 18px; font-weight: 700; color: var(--heading); }
.mp-dog-meta { font-size: 13px; color: var(--stone); }
.mp-dog-menu { color: var(--stone); font-size: 20px; font-weight: 700; letter-spacing: 1px; align-self: flex-start; }
.mp-add { display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px;
  border-radius: var(--r-card); border: 1px dashed var(--stone); background: transparent;
  font-size: 15px; font-weight: 600; color: var(--primary); transition: border-color var(--t-fast), background var(--t-fast); }
.mp-add:hover { border-color: var(--primary); background: var(--pale-blue); }

/* right */
.mp-right { display: flex; flex-direction: column; gap: 24px; }
.mp-profile { padding: 28px 32px; }
.mp-prof-head { display: flex; align-items: center; justify-content: space-between; }
.mp-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--light-blue); color: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.mp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mp-prof-rows { margin: 20px 0; border-top: 1px solid var(--border); }
.mp-prof-row { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.mp-prof-row dt { font-size: 13px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--stone); }
.mp-prof-row dd { font-size: 16px; color: var(--ink); font-weight: 500; }
.mp-prof-actions { display: flex; gap: 12px; align-items: center; }
.mp-prof-actions .btn { height: 44px; }
.mp-danger { color: var(--red); }
.mp-danger:hover { color: var(--red); text-decoration: underline; }

/* selected dog detail */
.mp-detail { padding: 32px; }
.mp-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mp-detail-name { color: var(--heading); margin-top: 6px; }
.mp-verified { flex: 0 0 auto; }
.mp-detail-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px 16px; margin: 26px 0; }
.mp-detail-grid div { display: flex; flex-direction: column; gap: 5px; }
.mp-detail-grid dt { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone); }
.mp-detail-grid dd { font-size: 17px; font-weight: 600; color: var(--heading); }
.mp-detail-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.mp-detail-cta .btn { flex: 1; min-width: 180px; height: 50px; }
.mp-detail-actions { display: flex; gap: 18px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }

/* verify mark + chip-button */
.mp-check { vertical-align: -2px; flex: 0 0 auto; }
.mp-dog-name { display: inline-flex; align-items: center; gap: 5px; }
.mp-detail-name { display: inline-flex; align-items: center; gap: 8px; }
button.mp-verify-open { cursor: pointer; }

/* mypage modal fields */
.mp-modal-fields { display: flex; flex-direction: column; gap: 16px; margin: 22px 0 8px; }
.mp-field { display: flex; flex-direction: column; gap: 7px; }
.mp-field .f08-label { color: var(--stone); }
.mp-field-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mp-field-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.mp-modal-note { margin: 4px 0 10px; display: flex; gap: 6px; }
.mp-modal-cta { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.mp-modal-cta .btn { flex: 0 0 auto; }
@media (max-width: 560px) { .mp-field-row3, .mp-field-row2 { grid-template-columns: 1fr; } }

@media (max-width: 920px) {
  .mp-grid { grid-template-columns: 1fr; }
  .mp-detail-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .mp-detail-grid { grid-template-columns: 1fr 1fr; }
  .mp-detail-cta .btn { min-width: 0; }
}

/* ============================================================
   F12 · Diagnosis history (My Page)
   ============================================================ */
.f12-top { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; margin-top: var(--s-8); align-items: stretch; }

.f12-profile { padding: 32px; display: flex; gap: 22px; align-items: center; }
.f12-prof-char { width: 96px; height: 96px; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,0.12); flex: 0 0 auto; }
.f12-prof-char img { width: 100%; height: 100%; object-fit: contain; }
.f12-prof-name { font-size: 24px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.f12-prof-meta { color: rgba(255,255,255,0.78); font-size: 14px; margin-top: 8px; }
.f12-prof-chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.f12-trend { padding: 24px 28px; display: flex; flex-direction: column; }
.f12-trend-head { display: flex; justify-content: space-between; align-items: center; }
.f12-chart { width: 100%; height: 150px; margin-top: 14px; overflow: visible; }
.f12-chart .grid { stroke: var(--border); stroke-width: 1; }
.f12-chart .trend-line { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.f12-chart .pt { stroke: #fff; stroke-width: 3; }
.f12-chart .pt-emerald { fill: var(--emerald); }
.f12-chart .pt-red { fill: var(--red); }
.f12-chart .pt-primary { fill: var(--primary); }
.f12-chart .pt-val { font-family: var(--font-num); font-weight: 700; font-size: 18px; fill: var(--heading); text-anchor: middle; }
.f12-chart-x { display: flex; justify-content: space-between; padding: 8px 30px 0; }
.f12-chart-x span { font-family: var(--font-num); font-size: 12px; font-weight: 600; color: var(--stone); text-align: center; flex: 1; }
.f12-chart-x em { font-style: normal; font-family: var(--font-ko); font-size: 11px; font-weight: 500; color: var(--disclaimer); display: block; margin-top: 3px; }

.f12-reminder { display: flex; align-items: center; gap: 20px; padding: 24px 28px; border-radius: var(--r-card); margin-top: 24px; }
.f12-rem-icon { width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--primary); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.f12-rem-text { flex: 1; min-width: 0; }
.f12-rem-text .t-h3 { color: var(--heading); }
.f12-reminder .btn { flex: 0 0 auto; }

.f12-history { margin-top: var(--s-8); }
/* F03 family code entry */
.f03-family { padding: 24px; border-radius: var(--r-card); margin-top: 5px; margin-bottom: 24px; }
.f03-family-head .t-h3 { color: var(--heading); }
.f03-family-head .t-bodyS { margin-top: 6px; line-height: 1.55; }
.f03-family-input { display: flex; gap: 10px; margin-top: 16px; }
.f03-family-input input { flex: 1; }
.f03-family-input .btn { flex: 0 0 auto; }
.f03-family-msg { margin-top: 12px; font-size: 14px; font-weight: 600; display: flex; gap: 6px; }
.f03-family-msg.err { color: var(--red); }
.f03-family-msg.ok { color: var(--emerald); }
/* mypage family code row */
.mp-family { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--light-blue); border-radius: var(--r-card); padding: 16px 20px; margin-bottom: 10px; }
.mp-family-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mp-family-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary); }
.mp-family-code { font-family: var(--font-num); font-weight: 700; font-size: 19px; letter-spacing: 0.06em; color: var(--heading); }
.mp-family-copy { flex: 0 0 auto; height: 42px; }
.mp-family-hint { font-size: 13px; color: var(--stone); margin-bottom: 18px; line-height: 1.5; }
.f12-empty, .mp-dog-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: var(--s-10) 0; }
.f12-empty-char, .mp-dog-empty-char { width: 200px; height: 200px; }
.f12-empty-char img, .mp-dog-empty-char img { width: 100%; height: 100%; object-fit: contain; }
.f12-empty .btn, .mp-dog-empty .btn { margin-top: 8px; }
.mp-dog-empty { padding: var(--s-8); }
.mp-dog-empty-char { width: 150px; height: 150px; }
.mp-doglist-empty { padding: 24px 16px; border: 1px dashed var(--border); border-radius: var(--r-card); text-align: center; }
.f12-timeline { display: flex; flex-direction: column; gap: 16px; margin-top: var(--s-3); }
.f12-entry { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 24px; padding: 22px 28px; }
.f12-entry-current { box-shadow: inset 0 0 0 2px var(--light-blue), var(--sh-card); }
.f12-entry-date { display: flex; flex-direction: column; }
.ed-day { font-family: var(--font-num); font-weight: 700; font-size: 20px; color: var(--heading); }
.ed-year { font-family: var(--font-num); font-size: 12px; color: var(--stone); }
.f12-entry-main .t-h3 { color: var(--heading); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.f12-cur-tag { font-weight: 500; }
.f12-entry-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.f12-entry-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-left: 8px; }
.f12-entry-score .muted { font-size: 11px; }

@media (max-width: 920px) {
  .f12-top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .f12-reminder { flex-direction: column; align-items: flex-start; }
  .f12-entry { grid-template-columns: 64px 1fr; grid-template-areas: "date main" "score score"; gap: 14px 18px; }
  .f12-entry-date { grid-area: date; } .f12-entry-main { grid-area: main; }
  .f12-entry-score { grid-area: score; flex-direction: row; align-items: baseline; justify-content: flex-end; gap: 8px; }
}

/* ============================================================
   F18 · MBTI matching results
   ============================================================ */
.f18-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: var(--s-8); }
.f18-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.f18-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.f18-photo img { width: 100%; height: 100%; object-fit: cover; }
.f18-match { position: absolute; top: 14px; right: 14px; background: var(--primary); color: #fff;
  width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: baseline; justify-content: center;
  box-shadow: 0 6px 18px rgba(61,90,251,0.35); }
.f18-match-num { font-family: var(--font-num); font-weight: 800; font-size: 22px; line-height: 1.4; }
.f18-match-pct { font-family: var(--font-num); font-weight: 600; font-size: 12px; }
.f18-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.f18-namerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.f18-namerow .t-h3 { color: var(--heading); white-space: nowrap; }
.f18-code-line { margin-top: 6px; font-size: 15px; color: var(--ink); }
.f18-code-line b { font-family: var(--font-num); font-weight: 800; letter-spacing: 0.06em; color: var(--primary); margin-right: 6px; }
.f18-nick { font-size: 13px; margin-top: 4px; }
.f18-reason { margin-top: 14px; color: var(--ink); line-height: 1.6; flex: 1; }
.f18-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.f18-dist { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--stone); }
.f18-dist .pin { flex: 0 0 auto; }
.f18-note { padding: 24px 28px; border-radius: var(--r-card); margin-top: 24px; }

/* F18 dog picker + profile modal */
.f18-dogpick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.f18-dogpick-label { font-size: 14px; font-weight: 600; color: var(--stone); }
.f11-dogpick, .f12-dogpick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.f11-dogpick-label, .f12-dogpick-label { font-size: 14px; font-weight: 600; color: var(--stone); }
.f18-modal-card { max-width: 420px; text-align: center; }
.f18-modal-photo { position: relative; width: 140px; height: 140px; margin: 8px auto 0; border-radius: 50%; overflow: hidden; }
.f18-modal-photo img { width: 100%; height: 100%; object-fit: cover; }
.f18-modal-photo .f18-match { top: auto; bottom: 0; right: 8px; width: 46px; height: 46px; }
.f18-modal-photo .f18-match-num { font-size: 18px; }
.f18-modal-card .f18-code-line { justify-content: center; margin-top: 8px; }
.f18-modal-rows { display: flex; flex-direction: column; gap: 0; text-align: left; margin: 22px 0; border-top: 1px solid var(--border); }
.f18-modal-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 4px; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--ink); }
.f18-modal-row strong { color: var(--primary); }
.f18-modal-greet { background: var(--emerald-tint, #ECFDF5); color: var(--emerald); border-radius: 12px; padding: 14px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }

@media (max-width: 920px) { .f18-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .f18-grid { grid-template-columns: 1fr; } }

/* ============================================================
   C2 · 회원가입 사는 곳 select 3개 (시·도·시·군·구·행정동)
   ============================================================ */
.f01-region-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.f01-region-row select { width: 100%; }
@media (max-width: 600px) {
  .f01-region-row { grid-template-columns: 1fr; }
}

/* ============================================================
   C3 · F09 리뷰 작성 폼 비활성 (본인 리뷰 존재 시)
   ============================================================ */
.f09-review-form.is-disabled .f09-star-input,
.f09-review-form.is-disabled .f09-review-text,
.f09-review-form.is-disabled .f09-review-submit {
  opacity: 0.45;
  pointer-events: none;
}
.f09-review-form.is-disabled .f09-review-text {
  background: var(--off-white);
}
.f09-rev-disabled-hint {
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--stone);
}