/* =========================================================
   v0.4 리디자인 레이어
   방향: 국내 금융 앱(토스·뱅크샐러드 계열) 패턴 — 회색 바탕 위 흰 섹션 블록,
   굵고 큰 타이포, 테두리·그림자 최소화, 3D 느낌 일러스트 아이콘(BD.icon3d), 리스트 행 메뉴
   ※ uibowl.io는 로그인 필요로 직접 확인하지 못함(기획서 1장 레퍼런스 기준)
   ========================================================= */
:root { --r-card: 20px; --r-panel: 28px; }
body { letter-spacing: -0.02em; }
.t-display { font-weight: 800; letter-spacing: -0.04em; }
.t-h1, .sec__title, .dsec__t { font-weight: 800; letter-spacing: -0.035em; }
.t-num { letter-spacing: -0.04em; }

/* 버튼: 플랫, 큰 터치 영역 */
.btn { border-radius: 14px; }
.btn-lg { min-height: 56px; border-radius: 16px; font-size: 17px; font-weight: 700; }
.btn-primary { box-shadow: none; }
.btn:active { transform: scale(.96); }
.btn-soft { --_bg: var(--c-primary-soft); }

/* 카드: 테두리 제거, 아주 옅은 그림자 */
.card, .ocard, .rcard { border: 0; border-radius: var(--r-card); }
.ocard { box-shadow: 0 1px 2px rgba(17,24,39,.03); }
@media (hover: hover) { .ocard:hover { box-shadow: 0 14px 32px -14px rgba(17,24,39,.22); } }
.kpis { border: 0; border-radius: 14px; background: var(--c-bg); }
.kpis > div + div { border-left: 1px solid rgba(17,24,39,.06); }
.kpis dd { font-size: 16px; font-weight: 800; }
.tag { border: 0; background: var(--c-bg); }
.ocard__name { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }

/* 섹션: 모바일은 흰 블록 + 회색 간격, 태블릿부터 둥근 패널 */
.sec { background: var(--c-surface); padding: 32px 0; margin-top: 12px; }
.sec + .sec { padding-top: 32px; }
.sec .ocard, .sec .rcard, .sec .how__item { background: var(--c-bg); box-shadow: none; }
.sec .ocard .kpis { background: var(--c-surface); }
.sec .ocard .tag { background: var(--c-surface); }
.sec .acc--card .acc__item { background: var(--c-bg); border: 0; }
.sec .acc--card .acc__item:has([aria-expanded="true"]) { background: var(--c-bg); box-shadow: none; }
.sec .utabs { border-bottom-color: var(--c-line); }
@media (min-width: 768px) {
  .sec { background: transparent; padding: 12px 0; margin-top: 0; }
  .sec + .sec { padding-top: 12px; }
  .sec > .container { background: var(--c-surface); border-radius: var(--r-panel); padding: 36px; --gutter: 36px; }
  .faq-cta { background: var(--c-bg); }
}

/* 빠른 메뉴 (리스트 행) */
.quick-wrap { margin-top: 12px; }
.panel { background: var(--c-surface); padding: 28px var(--gutter) 16px; margin: 0 calc(var(--gutter) * -1); }
.panel__title { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.035em; margin-bottom: 8px; }
.rowlist { display: grid; }
.row { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 10px; margin: 0 -10px; border-radius: 18px; transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.row:hover { background: var(--c-bg); }
.row:active { transform: scale(.985); background: var(--c-bg); }
.row__ico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--c-bg); }
.row__ico svg { width: 40px; height: 40px; }
.row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row__txt b { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; }
.row__txt span { font-size: 14px; color: var(--c-sub); line-height: 20px; }
.row__tag { flex: none; font-size: 12px; font-weight: 700; color: var(--c-primary); background: var(--c-primary-soft); padding: 4px 8px; border-radius: 8px; }
.row__chev { color: var(--c-hint); flex: none; width: 18px; height: 18px; }
@media (min-width: 768px) {
  .quick-wrap .panel { margin: 0; border-radius: var(--r-panel); padding: 32px 36px 20px; }
  .rowlist { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}

/* 프로세스: 3D 아이콘 */
.how__item { border: 0; }
.how__ico--3d { background: none; width: 52px; height: 52px; margin-bottom: 6px; }
.how__ico--3d svg { width: 52px; height: 52px; }

/* 히어로: 3D 일러스트 + 떠다니는 보조 아이콘 */
.hero__art { right: -8px; top: -2px; width: 100px; height: 100px; }
.hero__art svg { width: 100%; height: 100%; }
.hero__orb { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff 0, color-mix(in srgb, var(--c-primary) 14%, #fff) 55%, transparent 71%); }
.hero__big { position: absolute; inset: 6%; }
.hero__float { position: absolute; display: none; animation: float 4.2s ease-in-out infinite; }
.hero__float.f1 { left: -4%; bottom: 2%; width: 28%; }
.hero__float.f2 { right: 0; top: 0; width: 22%; animation-delay: -2.1s; }
.hero__float svg { filter: drop-shadow(0 8px 10px rgba(17,24,39,.12)); }
.hero-slide.is-active .hero__big { animation: rise 700ms var(--ease-out) both; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .hero__float, .hero-slide.is-active .hero__big { animation: none; } }
@media (min-width: 768px) {
  .hero__art { right: auto; top: auto; width: 300px; height: 300px; }
  .hero__float { display: block; }
}
@media (min-width: 1024px) { .hero__art { width: 360px; height: 360px; } }

/* 신뢰 지표: 히어로 위로 떠오르는 카드 */
.trust { box-shadow: 0 12px 32px -14px rgba(17,24,39,.2); border-radius: 22px; }
.trust__cell .t-num { color: var(--c-text); font-weight: 800; }

/* 조건 체크 카드 */
.fitcard { border-radius: var(--r-panel); }
.sec:has(.fitcard) { background: transparent; padding-top: 12px; padding-bottom: 0; }
@media (min-width: 768px) { .sec:has(.fitcard) > .container { background: transparent; padding: 0; } }

/* 공적 지원 배너 */
.public-banner { border: 0; border-radius: var(--r-card); }

/* 리스트 화면 */
.chip--tool { border: 0; background: var(--c-surface); }
.sticky-tabs { border-bottom: 0; }
.ctabs [role="tab"] { border: 0; background: var(--c-surface-2); }
.ctabs [role="tab"][aria-selected="true"] { background: var(--c-text); color: #fff; }
.guide-inline { border: 0; background: var(--c-primary-soft); }

/* 상세·결과 */
.info-list { border: 0; }
.acc--card .acc__item { border: 0; }
.result__gauge, .result__money { box-shadow: none; }

/* 플로팅 바 */
.fab-bar { border-top: 0; box-shadow: 0 -8px 24px -12px rgba(17,24,39,.18); }
.fab-bar__sub { border: 0; background: var(--c-bg); }

/* ---------- v0.5 레퍼런스 반영 ---------- */
/* 안심 3종 알약 (뱅크샐러드 패턴) */
.assure { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.assure li { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; color: var(--c-sub); box-shadow: 0 1px 2px rgba(17,24,39,.05); }
.assure li::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--c-secondary-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* 상황 중심 타일 (로톡 패턴) */
.panel__sub { font-size: 14px; color: var(--c-sub); margin: -4px 0 16px; }
.sit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 12px; }
.sit { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 132px; padding: 16px; border-radius: 20px; background: var(--c-bg); transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.sit:active { transform: scale(.97); }
.sit:hover { background: var(--c-primary-softer); }
.sit b { font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: -0.03em; }
.sit__ico { width: 40px; height: 40px; }
.sit__go { margin-top: auto; font-size: 12px; font-weight: 700; color: var(--c-primary); }
@media (min-width: 768px) { .sit-grid { grid-template-columns: repeat(4, 1fr); } }
.quick-wrap + .quick-wrap { margin-top: 12px; }

/* 후기 카드: 제목 + 구조화 메타 (핀다 패턴) */
.rcard__title { font-size: 17px; font-weight: 800; letter-spacing: -0.03em; line-height: 24px; }
.rcard__text { font-size: 15px; line-height: 23px; font-weight: 400; color: var(--c-sub); }
.rcard__meta { display: flex; flex-wrap: wrap; gap: 0; font-size: 12px; color: var(--c-hint); margin-top: auto; }
.rcard__meta span + span::before { content: "|"; margin: 0 6px; color: var(--c-line-strong); }

/* 자가진단 남은 시간 (토스 패턴) */
.qstep__eta { color: var(--c-hint); font-weight: 600; }

/* 이미지 슬롯: 임시 일러스트 표시(시안 주석 켜짐일 때만 배지) */
.slot--pending:not(.hero__float):not(.hero__big) { position: relative; }
[data-slot-id] img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slot--pending::after { content: "IMG " attr(data-slot-id); position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); padding: 1px 5px; border-radius: 4px; background: #F6F1FF; border: 1px dashed #B08CFF; color: #6B46D6; font: 600 9px/14px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0; white-space: nowrap; pointer-events: none; }
html.no-annot .slot--pending::after { display: none; }
.hero__big.slot--pending::after { bottom: 6%; font-size: 10px; }

/* ---------- 여러 곳 체크 → 한 번에 문의 ---------- */
.ocard__name-row { min-width: 0; }
.ocard__name-row .badge-ad { flex: none; }
.ocard__pick { flex: none; width: 32px; height: 32px; margin: -4px -4px 0 0; border-radius: 50%; border: 2px solid var(--c-line-strong); background: var(--c-surface); color: transparent; display: grid; place-items: center; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); position: relative; }
.ocard__pick::before { content: ""; position: absolute; inset: -8px; }
.ocard__pick svg { width: 16px; height: 16px; }
.ocard__pick:hover { border-color: var(--c-primary); color: color-mix(in srgb, var(--c-primary) 35%, transparent); }
.ocard__pick:active { transform: scale(.9); }
.ocard__pick[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; animation: pickPop 260ms var(--ease); }
@keyframes pickPop { 50% { transform: scale(1.15); } }
.ocard.is-picked { box-shadow: 0 0 0 2px var(--c-primary), 0 10px 24px -14px color-mix(in srgb, var(--c-primary) 60%, transparent); }
.sec .ocard.is-picked { background: var(--c-primary-softer); }
.pick-guide { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 12px 14px; border-radius: 16px; background: var(--c-primary-soft); font-size: 13px; line-height: 19px; color: var(--c-sub); flex-wrap: wrap; }
.pick-guide b { color: var(--c-text); font-size: 14px; }
.pick-guide p { flex: 1; min-width: 180px; margin: 0; }
.pick-guide__ico { width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary); color: #fff; display: grid; place-items: center; flex: none; }
.pick-guide__ico svg { width: 14px; height: 14px; }
.pick-guide__all { background: #fff; }
.result__list .pick-guide { margin-bottom: 16px; }
.cmp-bar { gap: 8px; }
.cmp-bar__label { white-space: nowrap; }
.cmp-bar__ghost { margin-left: auto; min-height: 40px; padding: 0 12px; border-radius: 11px; background: rgba(255,255,255,.12); color: #fff; font-size: 14px; font-weight: 700; }
.cmp-bar__btn { margin-left: 0; white-space: nowrap; }

/* 생성 이미지가 들어간 히어로: 원형 플레이트로 배경을 의도된 형태로 */
.hero__big.slot--done { inset: 0; }
.hero__big.slot--done img { border-radius: 50%; box-shadow: 0 18px 40px -18px rgba(17,24,39,.28), inset 0 0 0 1px rgba(255,255,255,.6); }
.hero__art:has(.slot--done) .hero__orb { display: none; }

/* 생성 아이콘: 흰 배경을 타일 색에 녹임 */
.slot--done:not(.hero__big) img { mix-blend-mode: multiply; border-radius: 12px; }
.slot--done:not(.hero__big) { isolation: auto; }

/* 직접 연결(전화·카톡) 없는 플로팅 바 */
.fab-bar__check { flex: 0 0 34%; min-height: 48px; border: 0; background: var(--c-bg); font-size: 15px; }

/* ---------- S06 다중 신청: 사무소별 캠페인 신청폼 ---------- */
.multi { padding-top: 20px; padding-bottom: calc(100px + var(--safe-b)); }
.multi__eyebrow { font-size: 14px; font-weight: 700; color: var(--c-primary); margin-bottom: 6px; }
.multi__steps { display: flex; gap: 8px; margin: 20px 0 14px; overflow-x: auto; scrollbar-width: none; }
.mstep { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--c-surface); border: 1.5px solid var(--c-line); font-weight: 700; font-size: 15px; color: var(--c-sub); }
.mstep__n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--c-bg); font-size: 13px; }
.mstep.is-cur { border-color: var(--c-primary); color: var(--c-text); }
.mstep.is-cur .mstep__n { background: var(--c-primary); color: #fff; }
.mstep.is-done .mstep__n { background: var(--c-secondary-soft); color: var(--c-secondary-text); }
.multi__panel { background: var(--c-surface); border-radius: 22px; padding: 18px 16px; }
.mpanel__head { display: flex; gap: 10px; align-items: flex-start; }
.mpanel__head b { font-size: 17px; }
.mpanel__cond { display: flex; gap: 6px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--c-accent-soft); font-size: 13px; line-height: 19px; color: #7A4B00; }
.mpanel__frame { margin-top: 14px; border-radius: 16px; overflow: hidden; border: 1px solid var(--c-line); background: var(--c-surface-2); }
.mpanel__frame iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; }
.mpanel__annot { margin-top: 10px; white-space: normal; }
.multi__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 12px var(--gutter) calc(12px + var(--safe-b)); background: linear-gradient(180deg, rgba(255,255,255,0), #fff 28%); }
.multi__bar .btn:disabled { opacity: .4; }
@media (min-width: 768px) {
  .multi { max-width: calc(720px + var(--gutter) * 2); padding-top: 32px; }
  .multi__panel { padding: 24px; }
  .multi__bar { position: sticky; max-width: 720px; margin: 0 auto; padding-left: 0; padding-right: 0; }
}
/* 카드: 사실 정보 3칸, 신청 준비 중 */
.kpis--facts dd { font-size: 14px; }
.ocard__form { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--c-sub); line-height: 19px; }
.ocard__form svg { flex: none; margin-top: 1px; color: var(--c-hint); }
.ocard__soon { flex: none; }
.ocard.is-disabled .avatar { filter: saturate(.4); opacity: .75; }

/* ---------- S11 제휴 신청 ---------- */
.ptn-hero { background: linear-gradient(160deg, var(--c-primary-soft), var(--c-bg)); padding: 32px 0 28px; }
.ptn-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ptn-hero__art { flex: none; width: 96px; height: 96px; }
.ptn-hero__art svg, .ptn-hero__art img { width: 100%; height: 100%; }
.ptn-eyebrow { font-size: 13px; font-weight: 700; color: var(--c-primary); margin-bottom: 8px; }
.ptn-sub { margin-top: 10px; color: var(--c-sub); font-size: 15px; line-height: 23px; }
.ptn-grid { display: grid; gap: 10px; }
.ptn-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 20px; background: var(--c-bg); }
.ptn-card b { font-size: 16px; }
.ptn-card p { font-size: 14px; color: var(--c-sub); line-height: 21px; }
.ptn-steps { margin-top: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ptn-steps li { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: var(--c-bg); font-size: 14px; font-weight: 600; }
.ptn-steps b { width: 24px; height: 24px; border-radius: 50%; background: var(--c-primary); color: #fff; display: grid; place-items: center; font-size: 12px; flex: none; }
.ptn-form { max-width: 720px; }
.ptn-fs { border: 0; padding: 0; margin: 0 0 28px; }
.ptn-fs legend { font-size: 17px; font-weight: 800; margin-bottom: 14px; padding: 0; }
.ptn-2 { display: grid; gap: 0 16px; }
.ptn-2 .field + .field { margin-top: 22px; }
.ptn-fs .field + .ptn-2, .ptn-2 + .field, .ptn-2 + .ptn-2 { margin-top: 22px; }
.ptn-types { flex-wrap: wrap; }
.ptn-types .opt { flex: 1 1 30%; min-width: 96px; }
.ptn-file { height: auto; padding: 12px; font-size: 14px; }
.ptn-agree { padding: 16px; border-radius: 16px; background: var(--c-bg); }
.ptn-agree .check { align-items: flex-start; min-height: 44px; font-size: 15px; line-height: 22px; }
.ptn-agree .check__box { margin-top: 1px; }
.ptn-done { text-align: center; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto; }
@media (min-width: 768px) {
  .ptn-hero { padding: 56px 0 44px; }
  .ptn-hero__art { width: 180px; height: 180px; }
  .ptn-grid { grid-template-columns: repeat(3, 1fr); }
  .ptn-steps { grid-template-columns: repeat(4, 1fr); }
  .ptn-2 { grid-template-columns: 1fr 1fr; }
  .ptn-2 .field + .field { margin-top: 0; }
}
.list-grid > *, .result__cards > *, .ocard { min-width: 0; }
.kpis--facts dd { white-space: normal; word-break: keep-all; }
.mpanel__link { margin-top: 14px; padding: 18px; border-radius: 16px; background: var(--c-primary-softer); display: grid; gap: 14px; }
.mpanel__link b { font-size: 16px; }

/* 로고 v2(말풍선, 높이 약 37px) — 드로어 상단 여백 */
.drawer__head { height: auto; min-height: 76px; padding-top: 14px; padding-bottom: 12px; }

/* ===== HTML 우선(점진적 향상): JS가 없을 때도 내용이 모두 보이게 =====
   <html class="js">는 각 페이지 <head>의 한 줄 스크립트가 붙인다. 아래 규칙은 JS가 꺼졌을 때만 적용된다. */
html:not(.js) .reveal { opacity: 1; transform: none; }
html:not(.js) .acc__panel { grid-template-rows: 1fr; }
html:not(.js) .acc__body { opacity: 1; transform: none; }
html:not(.js) .acc__chev { display: none; }
html:not(.js) .car__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
html:not(.js) .car__slide { scroll-snap-align: start; }
html:not(.js) .car__ctrl { display: none; }
html:not(.js) .gpanel[hidden], html:not(.js) .qstep[hidden] { display: block !important; }
html:not(.js) .gpanel + .gpanel { margin-top: 40px; }
html:not(.js) .fab-bar, html:not(.js) .fab-stack, html:not(.js) .fab-spacer, html:not(.js) .cmp-bar,
html:not(.js) .hdr__search, html:not(.js) .hdr__menu-btn, html:not(.js) [data-js-only] { display: none !important; }
html:not(.js) .hdr--detail .hdr__title { opacity: 1; transform: none; }
html:not(.js) .ed-kbar, html:not(.js) .cm-cbar, html:not(.js) .cm-react, html:not(.js) .cm-tools, html:not(.js) .cm-more { display: none; }
/* 모바일에서 JS 없이도 주요 메뉴 링크가 보이게(드로어 대신 가로 스크롤 내비) */
@media (max-width: 767px) {
  html:not(.js) .hdr__nav { display: flex; gap: 14px; overflow-x: auto; font-size: 14px; white-space: nowrap; }
}
html:not(.js) .card-in, html:not(.js) .fade-in, html:not(.js) .in-next, html:not(.js) .in-prev { animation: none; }

/* ===== JS 향상 연출 ===== */
/* 같은 사이트 안 페이지 이동 시 부드러운 전환(지원 브라우저만, 미지원이면 그냥 이동) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* 공감 버튼 누름 반응 */
.cm-rbtn.is-pop svg { animation: cmPop 420ms var(--ease-out); }
@keyframes cmPop { 0% { transform: scale(1); } 35% { transform: scale(1.45) rotate(-8deg); } 100% { transform: scale(1); } }
/* 목록 새로 그릴 때 스켈레톤 반짝임 */
.is-refreshing { position: relative; }
.is-refreshing > * { opacity: .4; }
.is-refreshing::after { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%) 0 0 / 200% 100%; animation: shimmer 600ms linear infinite; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .cm-rbtn.is-pop svg, .is-refreshing::after { animation: none; } }


/* ===== 13장 수정(R1~R14) — 시인성·직관성 ===== */
/* R9 가독성: 모바일 본문 17px, 주 버튼 56px·18px, B안 그린 버튼은 AA 대비(#087F5B) */
:root { --fs-body: 17px; --lh-body: 28px; }
.btn-lg { min-height: 56px; font-size: 18px; }
[data-theme="green"] .btn-primary, [data-theme="green"] .cmp-bar__btn { background-color: #087F5B; border-color: #087F5B; }
[data-theme="green"] .btn-primary:hover { background-color: #066B4C; }

/* R1·R8 히어로: 배경·보조 카피만 회전, CTA·안심 3종은 고정 */
.hero-slide__inner { padding-bottom: 288px; min-height: 500px; justify-content: flex-start; padding-top: 28px; }
.hero__fixed { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 3; pointer-events: none; }
.hero__fixed .container > * { pointer-events: auto; }
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hero__actions .hero__cta { margin-top: 0; width: 100%; max-width: 360px; }
.hero__sublink { font-size: 16px; font-weight: 700; color: var(--c-primary); padding: 6px 2px; }
.assure3 { margin-top: 14px; display: grid; gap: 6px; font-size: 14px; color: var(--c-sub); }
.assure3 li { display: flex; align-items: center; gap: 6px; }
.assure3 li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--c-secondary-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/11px no-repeat; }
.assure3 b { color: var(--c-text); }
.assure3 a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hero__ctrl-wrap { bottom: 22px; }
@media (min-width: 768px) {
  .hero-slide__inner { padding-bottom: 200px; min-height: 480px; }
  .hero__actions { flex-direction: row; align-items: center; gap: 16px; }
  .hero__actions .hero__cta { width: auto; }
  .assure3 { grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 18px; }
}
html:not(.js) .hero__fixed { position: static; padding: 0 0 24px; background: var(--hero-1); }
html:not(.js) .hero-slide__inner { padding-bottom: 40px; min-height: 0; }

/* R4·R10 사무소 카드: 우상단 체크(탭 48px) + 이름·광고책임변호사·조건 배지·특징 1줄 */
.ocard { gap: 10px; }
.ocard__pick { width: 32px; height: 32px; margin: 0; }
.ocard__pick::before { inset: -8px; } /* 32 + 8×2 = 48px 탭 영역 */
.ocard__head .ocard__pick { align-self: flex-start; }
.ocard__match { display: flex; flex-wrap: wrap; gap: 6px; }
.ocard__feat { font-size: 15px; line-height: 22px; color: var(--c-sub); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mbadge { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 9px; border-radius: 7px; font-size: 13px; font-weight: 700; background: var(--c-surface-2); color: var(--c-sub); border: 1px solid var(--c-line); }
.mbadge .ico { width: 14px; height: 14px; }
.mbadge--ok { background: var(--c-secondary-soft); color: var(--c-secondary-text); border-color: transparent; }
.mbadge--no { background: #FFF4E5; color: #9A5B00; border-color: transparent; }
.mm-list { margin-top: 12px; display: grid; gap: 6px; font-size: 14px; color: var(--c-sub); }
.cmp-bar__label { background: none; border: 0; color: #fff; padding: 0 4px; min-height: 44px; }
.cmp-bar__btn { min-height: 44px; font-size: 15px; }

/* R7 용어 툴팁: 쉬운 말 + (용어) — 포커스·호버로 설명 */
.term { position: relative; border-bottom: 1.5px dotted currentColor; cursor: help; outline: none; }
.term::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); width: max-content; max-width: 240px; padding: 8px 10px; border-radius: 10px; background: #191F28; color: #fff; font-size: 13px; line-height: 19px; font-weight: 500; white-space: normal; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); z-index: 20; }
.term:hover::after, .term:focus::after { opacity: 1; transform: translateX(-50%); }
html:not(.js) .term::after { content: none; }

/* R3·R12 진단 결과: 문의 가능한 곳이 첫 화면 */
.result--v2 { padding-top: 16px; padding-bottom: 120px; }
.result--v2 .container { max-width: calc(720px + var(--gutter) * 2); }
.rhead__title { margin-top: 4px; }
.rhead__title b { font-weight: 900; }
.rhead__sub { margin-top: 8px; font-size: 15px; line-height: 23px; color: var(--c-sub); }
.rlist { margin-top: 16px; }
.rlist__tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rlist__meta { font-size: 13px; color: var(--c-hint); }
.rlist .result__cards { display: grid; gap: 12px; }
.rempty { padding: 24px 18px; border-radius: 18px; background: var(--c-surface); text-align: center; display: grid; gap: 8px; }
.rempty__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.rmore { margin-top: 14px; }
.rmore > summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--c-sub); padding: 10px 0; list-style: none; }
.rmore > summary::after { content: " ▾"; }
.rmore[open] > summary::after { content: " ▴"; }
.rmore .result__cards { display: grid; gap: 12px; opacity: .85; }
.rlink { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--c-primary); padding: 6px 0; }
.rfold { margin-top: 14px; border-radius: 18px; background: var(--c-surface); border: 1px solid var(--c-line); }
.rfold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px; min-height: 56px; }
.rfold > summary::-webkit-details-marker { display: none; }
.rfold > summary > span { display: grid; gap: 2px; }
.rfold > summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 2px solid var(--c-hint); border-bottom: 2px solid var(--c-hint); transform: rotate(45deg) translateY(-3px); transition: transform var(--dur-fast) var(--ease); }
.rfold[open] > summary::after { transform: rotate(-135deg); }
.rfold__body { padding: 0 16px 16px; display: grid; gap: 12px; }
.rfold .card { box-shadow: none; border: 1px solid var(--c-line); }
.result__num#mText { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.calc { margin-top: 8px; display: grid; gap: 2px; list-style: disc; padding-left: 18px; }
.rq { display: grid; gap: 8px; }
.stepper--sm .stepper__btn { width: 44px; height: 44px; font-size: 20px; }
.stepper--sm .stepper__val { font-size: 22px; min-width: 64px; }

/* R6·R12 신청서 집중 모드 */
.multi--focus { padding-top: 12px; }
.multi__h1 { font-size: 17px; font-weight: 700; color: var(--c-sub); }
.multi__h1 b { color: var(--c-primary); }
.multi--focus .multi__steps { margin: 10px 0 12px; }
.mpanel__name { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mpanel__law { font-size: 14px; color: var(--c-sub); margin-top: 2px; }
.mpanel__notice { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--c-sub); }
.mpanel__notice svg { flex: none; margin-top: 2px; color: var(--c-hint); }
.mpanel__frame { position: relative; }
.mpanel__frame.is-loading iframe { opacity: 0; }
.mpanel__skel { position: absolute; inset: 16px; display: none; gap: 14px; align-content: start; }
.mpanel__frame.is-loading .mpanel__skel { display: grid; }
.mpanel__skel i { display: block; height: 48px; border-radius: 10px; background: linear-gradient(100deg, var(--c-line) 20%, var(--c-surface) 50%, var(--c-line) 80%) 0 0 / 200% 100%; animation: shimmer 1.1s linear infinite; }
.mpanel__skel i:nth-child(4) { height: 56px; width: 60%; }
.mpanel__fail { margin-top: 14px; padding: 18px; border-radius: 16px; background: #FFF4E5; display: grid; gap: 14px; }
.mpanel__alt { margin-top: 10px; font-size: 14px; color: var(--c-sub); text-align: center; }
.mpanel__alt a { font-weight: 700; color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
details.mpanel__cond { display: block; }
details.mpanel__cond summary { cursor: pointer; font-weight: 700; }
details.mpanel__cond p { margin-top: 6px; }
.mpanel__done { margin-top: 16px; display: grid; gap: 8px; text-align: center; }
.copybox { font-size: 15px; line-height: 23px; padding: 12px 14px; border-radius: 12px; background: var(--c-surface-2); }
.multi__fold { margin-top: 14px; }

/* S30 내 마.성.사 */
.my { padding-top: 20px; padding-bottom: 60px; max-width: calc(720px + var(--gutter) * 2); }
.my__head p { margin-top: 6px; }
.my__sec { margin-top: 28px; }
.my__sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.my__t { font-size: 19px; font-weight: 800; margin-bottom: 10px; }
.my__card { padding: 18px; display: grid; gap: 10px; }
.my__empty { color: var(--c-sub); font-size: 15px; }
.my__big { font-size: 18px; font-weight: 700; }
.my__big b { color: var(--c-primary); }
.my__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.my__store { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--c-sub); }
.my__switch { font-size: 13px; gap: 8px; }
.my__apps { display: grid; gap: 8px; margin-bottom: 10px; }
.my__apps li { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: var(--c-surface); }
.my__apps li > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.my__apps small { font-size: 13px; color: var(--c-hint); }
.my__ok, .my__wait { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; }
.my__ok { background: var(--c-secondary-soft); color: var(--c-secondary-text); }
.my__wait { background: var(--c-surface-2); color: var(--c-hint); }
.my__cnt { font-size: 14px; font-weight: 700; color: var(--c-primary); }
.my__chk { background: var(--c-surface); border-radius: 16px; padding: 4px 14px; }
.my__cm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.my__cm a { display: grid; gap: 2px; padding: 14px 8px; border-radius: 14px; background: var(--c-surface); text-align: center; font-size: 13px; color: var(--c-sub); }
.my__cm b { font-size: 20px; color: var(--c-text); }

/* 사무소 로고 아바타 · 카드 특징 1·2·3 · 접는 면책 문구 */
.avatar--img { background: #fff; border: 1px solid var(--c-line); overflow: hidden; padding: 0; }
.avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ocard__feats { display: grid; gap: 4px; counter-reset: f; }
.ocard__feats li { counter-increment: f; display: flex; gap: 8px; align-items: baseline; font-size: 15px; line-height: 22px; color: var(--c-sub); min-width: 0; }
.ocard__feats li::before { content: counter(f); flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--c-primary-soft); color: var(--c-primary); font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; transform: translateY(-1px); }
.ocard__tagline { font-size: 13px; color: var(--c-hint); }
.ocard__pick[aria-pressed="true"] { font-size: 0; }
details.footer__disc { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(127,127,127,.2); font-size: 12px; line-height: 18px; opacity: .85; }
details.footer__disc summary { cursor: pointer; list-style: none; }
details.footer__disc summary::-webkit-details-marker { display: none; }
.footer__more { text-decoration: underline; text-underline-offset: 2px; margin-left: 2px; }
details.footer__disc[open] .footer__more { display: none; }
details.footer__disc p { margin-top: 6px; }

/* 가독성: 한국어 단어 단위 줄바꿈 + 짧은 문구는 줄 길이 균형, 본문은 외톨이 단어 방지 */
html { word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3, h4, .t-display, .t-h1, .t-h2, .t-h3, .sec__title, .hero__title, .hero__sub, .rhead__title, .cm-post__title, .cm-row__title, figcaption, .t-caption, .step-card p, .sit p, .row__txt span, .assure3 li, .mpanel__notice, .notice, .ocard__feats li, .my__empty, .cm-state__d, .rhead__sub, .sec__sub, .footer__slogan, .how__desc, .how__item b, .tile__desc, .quick__desc { text-wrap: balance; }
p, li, dd, .acc__body { text-wrap: pretty; }
a[href^="http"], code, .copybox, .cm-cmt__text, .cm-post__body, .cm-row__text { word-break: normal; overflow-wrap: anywhere; }
details.footer__disc { background: none; border: 0; border-top: 1px solid rgba(127,127,127,.2); border-radius: 0; padding: 12px 0 0; margin-bottom: 0; }

/* S06 한 번에 작성 */
.once { padding-bottom: 40px; }
.once__head { padding: 4px 0 8px; }
.once__head .t-h1 { margin-top: 4px; }
.once__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.once__chips li { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 4px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-line); font-size: 14px; font-weight: 700; }
.once__chips .avatar { width: 28px; height: 28px; font-size: 13px; }
.once__card { margin-top: 14px; padding: 18px 16px; border-radius: 20px; background: var(--c-surface); display: grid; gap: 14px; }
.once__t { font-size: 18px; font-weight: 800; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.once__f .field__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.once__who { font-size: 12px; font-weight: 600; color: var(--c-hint); }
.once__f textarea.input { height: auto; padding: 12px 16px; line-height: 24px; resize: vertical; }
.once__agree { border: 1px solid var(--c-line); border-radius: 14px; padding: 4px 14px 10px; }
.once__agree--own { background: var(--c-surface-2); }
.once__agree .check { min-height: 48px; font-size: 15px; align-items: center; }
.once__agree details summary { cursor: pointer; font-size: 13px; color: var(--c-sub); text-decoration: underline; text-underline-offset: 2px; margin-left: 36px; width: max-content; }
.once__terms { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 6px 36px; font-size: 13px; line-height: 19px; color: var(--c-sub); }
.once__terms dt { font-weight: 700; color: var(--c-text); }
.once__agree details > p { margin-left: 36px; }
.once__note { margin-top: -2px; }
.once__card--link { background: #FFF8EC; }
.once__linkrow { display: flex; gap: 10px; align-items: center; }
.once__linkrow span { display: grid; } .once__linkrow small { font-size: 13px; color: var(--c-sub); }
.once__bar { position: sticky; bottom: 0; margin: 16px calc(var(--gutter) * -1) 0; padding: 12px var(--gutter) calc(12px + var(--safe-b, 0px)); background: linear-gradient(transparent, var(--c-bg) 22%); display: grid; gap: 6px; text-align: center; z-index: 5; }
.once__alt { text-align: center; margin-top: 10px; font-size: 14px; } .once__alt a { color: var(--c-sub); text-decoration: underline; text-underline-offset: 2px; }
.once__done { padding: 24px 0; display: grid; gap: 10px; text-align: center; }
.once__done-ico { width: 64px; height: 64px; margin: 0 auto 4px; border-radius: 50%; background: var(--c-secondary-soft); color: var(--c-secondary-text); display: grid; place-items: center; }
.once__done-ico .ico { width: 32px; height: 32px; }
.once__res { display: grid; gap: 8px; margin: 10px 0 6px; text-align: left; }
.once__res li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--c-surface); }
.once__res li > span:nth-child(2) { flex: 1; min-width: 0; display: grid; } .once__res small { font-size: 12px; color: var(--c-hint); }
.once__ok { font-size: 13px; font-weight: 800; color: var(--c-secondary-text); }
@media (min-width: 768px) { .once { max-width: 640px; margin: 0 auto; } }
.assure3 li { display: block; position: relative; padding-left: 24px; line-height: 22px; }
.assure3 li::before { position: absolute; left: 0; top: 3px; }

/* 비교 강조: 하단 바 '비교하기' + 비교표 특징 */
.cmp-bar__cmp { min-height: 44px; padding: 0 12px; border-radius: 11px; background: rgba(255,255,255,.14); color: #fff; font-size: 15px; font-weight: 700; margin-left: auto; white-space: nowrap; }
.cmp-bar__cmp + .cmp-bar__btn { margin-left: 0; }
.cmp-feats { display: grid; gap: 4px; padding-left: 16px; list-style: decimal; font-size: 13px; line-height: 18px; text-align: left; }
.cmp-table td .mbadge { font-size: 12px; height: 24px; }
.once__agree-t { display: grid; line-height: 21px; } .once__agree-t small { font-size: 14px; color: var(--c-sub); }
.ptn-steps li span { text-wrap: balance; line-height: 20px; }

/* S06 공통 신청서 v2 */
.once__test { position: sticky; top: var(--header-h-sm, 56px); z-index: 6; margin: 0 calc(var(--gutter) * -1) 10px; padding: 8px var(--gutter); background: #FFF4E5; color: #8A5300; font-size: 13px; font-weight: 700; text-align: center; }
.once__safe { display: flex; gap: 6px; align-items: flex-start; margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--c-sub); }
.once__safe svg { flex: none; margin-top: 2px; color: var(--c-secondary-text); }
.once__f .field__err, .once__agree-err { display: none; }
.once__f.is-error .field__err, #agreeBox.is-error .once__agree-err { display: flex; }
.once__f.is-error .input { border-color: var(--c-error); }
#agreeBox.is-error { box-shadow: 0 0 0 2px var(--c-error); }
.once__more { border-top: 1px solid var(--c-line); padding-top: 10px; }
.once__more > summary { cursor: pointer; font-weight: 700; display: flex; align-items: baseline; gap: 8px; min-height: 40px; align-items: center; }
.once__more-body { display: grid; gap: 14px; margin-top: 8px; }
.once__fill { justify-self: start; margin-top: 4px; }
.once__orig { margin: 4px 0 2px 36px; font-size: 13px; } .once__orig a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.once__r { flex-wrap: wrap; }
.once__r-main { flex: 1; min-width: 0; display: grid; }
.once__st { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.once__st--ok { background: var(--c-secondary-soft); color: var(--c-secondary-text); }
.once__st--fail { background: #FEECEC; color: #B42318; }
.once__st--dup { background: var(--c-surface-2); color: var(--c-sub); }
.once__st--link { background: #FFF4E5; color: #8A5300; }
.once__acts { flex-basis: 100%; display: flex; gap: 6px; justify-content: flex-end; }
.my__fail { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; background: #FEECEC; color: #B42318; }
.footer__biz a { text-decoration: underline; text-underline-offset: 2px; margin-left: 4px; }

/* E안: 내 정보 한 번 입력 + 복사 버튼 */
.me { display: grid; gap: 14px; }
.mebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding: 10px; border-radius: 14px; background: var(--c-primary-softer); }
.mebar__t { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--c-primary); }
.mebar__chip { display: grid; text-align: left; min-height: 44px; padding: 4px 12px; border-radius: 10px; background: var(--c-surface); border: 1px solid var(--c-line); font-size: 15px; font-weight: 700; }
.mebar__chip small { font-size: 11px; font-weight: 600; color: var(--c-hint); }
.mebar__chip.is-copied { border-color: var(--c-secondary-text); background: var(--c-secondary-soft); }
.mebar__edit { margin-left: auto; font-size: 13px; color: var(--c-sub); text-decoration: underline; min-height: 44px; padding: 0 6px; }