@charset "utf-8";
/* ============================================================
   모바일 재난안전 진단교육 — 공통 디자인 시스템
   컨셉: SAFE SIGNAL — 안전 표지의 신호 체계를 다듬은 시각 언어
   기준: 폰 세로 / 태블릿 가로 / PC 세로 (지침)
   ============================================================ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root{
  /* 잉크 — 어두운 면 */
  --ink-900:#070C16;
  --ink-800:#0C1424;
  --ink-700:#131E33;
  --ink-600:#1C2B47;

  /* 페이퍼 — 밝은 면 */
  --paper:#F4F7FB;
  --card:#FFFFFF;
  --line:#E4EAF2;

  /* 텍스트 */
  /* 흰 배경 대비 — text 15.9:1 / text-sub 5.75:1 / text-dim 4.76:1
     모두 WCAG AA(4.5:1) 이상. 위계는 색이 아니라 크기·굵기로 만든다. */
  --text:#0E1726;
  --text-sub:#5A6779;
  --text-dim:#64748B;
  --on-dark:#F2F6FC;
  --on-dark-sub:rgba(242,246,252,.68);

  /* 시그널 — 안전 표지 색 체계 */
  --signal-blue:#2563EB;   /* 안내 */
  --signal-green:#00B37E;  /* 안전 */
  --signal-amber:#F59E0B;  /* 주의 */
  --signal-red:#EF4444;    /* 위험 */
  --signal-violet:#7C5CFF; /* 심화 */

  --grad-blue:linear-gradient(135deg,#3B82F6,#1D4ED8);
  --grad-green:linear-gradient(135deg,#22D3A5,#059669);
  --grad-amber:linear-gradient(135deg,#FBBF24,#EA8C00);
  --grad-violet:linear-gradient(135deg,#8B7BFF,#5B3DF5);

  /* 형태 */
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --shadow-sm:0 2px 8px rgba(14,23,38,.06);
  --shadow-md:0 10px 30px -12px rgba(14,23,38,.18);
  --shadow-lg:0 24px 60px -24px rgba(14,23,38,.32);
  --shadow-glow:0 18px 40px -18px rgba(37,99,235,.55);

  --ease:cubic-bezier(.22,.68,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* 레이어 */
  --z-bg:0; --z-body:1; --z-header:20; --z-dock:30; --z-toast:40; --z-modal:50;

  /* 전체화면에서 윈도우 작업표시줄이 뷰포트를 덮을 때 JS 가 넣는다 */
  --taskbar:0px;
  --safe-bottom:calc(env(safe-area-inset-bottom, 0px) + var(--taskbar));


  /* 글자 크기 — 용도별 토큰
     --fs-skin : 대상군 스킨 배율(어르신 1.15)
     --fs-user : 이용자가 화면에서 조절한 배율
     두 배율을 곱한 --fs-k 를 모든 크기에 적용한다. */
  --fs-skin:1;
  --fs-user:1;
  --fs-k:calc(var(--fs-skin) * var(--fs-user));
  --fs-h1:calc(1.66rem   * var(--fs-k));  /* 화면 제목      26.6px */
  --fs-h2:calc(1.42rem   * var(--fs-k));  /* 섹션 제목      22.7px */
  --fs-card:calc(1.25rem * var(--fs-k));  /* 카드 제목      20px   */
  --fs-stem:calc(1.125rem* var(--fs-k));  /* 문항 지문      18px   */
  --fs-choice:calc(1.0625rem*var(--fs-k));/* 보기·버튼      17px   */
  --fs-body:calc(1rem    * var(--fs-k));  /* 본문·해설      16px   */
  --fs-sub:calc(.875rem  * var(--fs-k));  /* 보조 설명      14px   */
  --fs-label:calc(.8125rem*var(--fs-k));  /* 라벨·태그      13px   */

  --shell:480px;   /* 폰·PC 세로 기준 폭 */
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  background:var(--paper);color:var(--text);
  /* 기본은 낱말 단위 줄바꿈. 단, 양쪽 맞춤(text-align:justify)을 쓰는 본문은 글자 단위(word-break:normal)로 둔다 —
     둘이 만나면 낱말 사이가 크게 벌어진다. 본문 규칙마다 justify 옆에 함께 적어 두었다. */
  line-height:1.6;word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100dvh;
  min-height:calc(100dvh - var(--taskbar));
}
img{max-width:100%;display:block}
button,a{font-family:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{text-decoration:none}
ul{list-style:none}

/* 접근성 */
.skip{position:fixed;left:16px;top:-60px;z-index:var(--z-modal);
  background:var(--ink-900);color:#fff;padding:12px 18px;border-radius:var(--r-sm);font-weight:600}
.skip:focus{top:16px}
:focus-visible{outline:3px solid var(--signal-amber);outline-offset:3px;border-radius:8px}
:focus:not(:focus-visible){outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── 구형 브라우저: 플렉스 gap 없음 (Chrome 84 미만) ──
   common.js 가 실제로 재 보고 html 에 .no-flexgap 을 붙인다.
   가로줄은 다음 형제에 왼쪽 여백을, 세로줄은 위 여백을 준다. */
.no-flexgap .appbar > * + *{margin-left:10px}
.no-flexgap .appbar-brand > * + *{margin-left:9px}
.no-flexgap .fsctl > * + *{margin-left:1px}
.no-flexgap .dock-row > * + *{margin-left:9px}
.no-flexgap .rail-list > * + *{margin-top:9px}
.no-flexgap .rail > * + *{margin-top:10px}
.no-flexgap .rs-actions > * + *{margin-top:9px}
.no-flexgap .rs-end-row > * + *{margin-top:9px}
.no-flexgap .share > * + *{margin-left:16px}
.no-flexgap .share-btns > *{margin:0 7px 7px 0}
.no-flexgap .rs-chips > *{margin:0 8px 8px 0}
.no-flexgap .toast > * + *{margin-left:9px}
.no-flexgap .state > * + *{margin-top:14px}
.no-flexgap .qi-head > * + *{margin-left:8px}
.no-flexgap .pg-ages > *{margin:0 9px 9px 0}
.no-flexgap .pchip > * + *{margin-left:10px}
.no-flexgap .scene-cap > * + *{margin-left:10px}
.no-flexgap .choice > * + *{margin-left:11px}
.no-flexgap .ex-bar > * + *{margin-left:0}
.no-flexgap .quickbar > * + *{margin-left:0}
.no-flexgap .hero-nav > * + *{margin-left:10px}
.no-flexgap .test-head > * + *{margin-left:12px}
.no-flexgap .start-head > * + *{margin-left:12px}
.no-flexgap .trust > * + *{margin-left:12px}
.no-flexgap .brandbar > * + *{margin-left:18px}
.no-flexgap .rp-brand > * + *{margin-left:9px}
.no-flexgap .radar-legend > *{margin:0 12px 6px 0}
.no-flexgap .dock-note > * + *{margin-left:6px}
.no-flexgap .hero-eyebrow > * + *{margin-left:10px}
.no-flexgap .quickbar li > * + *{margin-left:3px}
.no-flexgap .hero-nav .ctrl > * + *{margin-left:2px}
.no-flexgap .test-meta > * + *{margin-left:8px}
.no-flexgap .flow li > * + *{margin-top:6px}
.no-flexgap .flow .fh > * + *{margin-left:8px}
.no-flexgap .result-top > * + *{margin-left:16px}
.no-flexgap .result-weak > *{margin:0 7px 7px 0}
.no-flexgap .targets > *{margin:0 8px 8px 0}
.no-flexgap .oxbtn > * + *{margin-top:12px}
.no-flexgap .rp-sec > h2 > * + *,
.no-flexgap .rs-sec-head h2 > * + *{margin-left:8px}
.no-flexgap .rs-sec-head > * + *{margin-left:10px}
.no-flexgap .rs-card > * + *{margin-left:18px}
.no-flexgap .fb-top > * + *{margin-left:8px}
.no-flexgap .pick-sec > h2 > * + *{margin-left:8px}
.no-flexgap .start-foot > * + *{margin-left:8px}
.no-flexgap .tgroup > h3 > * + *{margin-left:7px}
.no-flexgap .ex-foot > * + *{margin-left:8px}
.no-flexgap .rp-head-top > * + *{margin-left:16px}
.no-flexgap .parts > * + *{margin-left:6px}
.no-flexgap .part > * + *{margin-top:2px}

/* ── 셸 ─────────────────────────────────────────── */
.shell{
  position:relative;z-index:var(--z-body);
  max-width:var(--shell);margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  min-height:calc(100dvh - var(--taskbar));
  background:var(--paper);
  box-shadow:0 0 80px -20px rgba(7,12,22,.25);
  padding-bottom:120px;
}
/* 독이 없는 화면은 아래 여백 없이 푸터 띠가 셸 바닥에 붙는다(규칙은 아래 「푸터」 참고) */

/* 제목 앞 아이콘 — 글자 높이에 맞춘 남색 선 그림. 제목보다 튀지 않게 채운 상자에 넣지 않는다.
   대문·대상 선택 등 여러 화면이 함께 쓴다.
   아이콘은 글자 줄의 세로 가운데에 맞춘다. 제목이 두 줄로 접히는 곳(폰의 「만족도 / 설문」)만
   첫 줄 앞에 머물도록 따로 위로 붙인다(index.css). */
.h-ico{display:flex;align-items:center;gap:.36em}
.h-ico > svg{
  flex:0 0 auto;width:1.08em;height:1.08em;
  fill:none;stroke:var(--ink-800);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}

/* ── 헤더 ────────────────────────────────────────── */
.appbar{
  position:sticky;top:0;z-index:var(--z-header);
  display:flex;align-items:center;gap:10px;
  isolation:isolate;
  min-height:58px;padding:20px 30px 29px;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.appbar.on-dark{background:transparent;backdrop-filter:none;color:var(--on-dark)}

/* 스크롤 중 — 타이틀 영역을 완전히 덮어 아래 내용이 비쳐 보이지 않게 한다 */
.appbar.solid{
  background:var(--paper);
  backdrop-filter:none;
  border-bottom-color:var(--line);
  color:var(--text);
}

.iconbtn{
  display:grid;place-items:center;width:44px;height:44px;border-radius:14px;flex-shrink:0;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.iconbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iconbtn:hover{background:rgba(14,23,38,.06)}
.on-dark .iconbtn:hover{background:rgba(255,255,255,.12)}
.iconbtn:active{transform:scale(.92)}

.appbar-brand{display:flex;align-items:center;gap:9px;min-width:0}
.appbar-brand .mark{height:45px;width:auto;border-radius:10px}
.appbar-brand .name{font-size:calc(1.32rem * var(--fs-k));font-weight:800;letter-spacing:-.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 제목 왼쪽 장식(노란 점·막대)은 두지 않는다 */
.appbar-brand .name::before,.appbar-brand .name::after{content:none;display:none}
.appbar .stepchip{
  margin-left:auto;font-size:var(--fs-label);font-weight:700;letter-spacing:.02em;
  padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(37,99,235,.1);color:var(--signal-blue);
}
.on-dark .stepchip{background:rgba(255,255,255,.14);color:var(--on-dark)}
a.stepchip{transition:background .25s var(--ease), transform .25s var(--ease)}
a.stepchip:hover{background:rgba(37,99,235,.18)}
.on-dark a.stepchip:hover{background:rgba(255,255,255,.24)}
a.stepchip:active{transform:scale(.95)}


/* ── 글자 크기 조절 (헤더 오른쪽) ──────────────────
   자기 자신은 배율을 받지 않도록 px 로 고정한다. */
.fsctl{
  margin-left:auto;flex-shrink:0;
  display:flex;align-items:center;gap:1px;
  padding:3px;border-radius:var(--r-pill);
  background:rgba(14,23,38,.05);border:1px solid var(--line);
}
.appbar .stepchip + .fsctl{margin-left:8px}
.on-dark .fsctl{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
/* 터치 영역 44px 확보(지침 8) — 보이는 알약은 그대로 두고
   가상 요소로 누를 수 있는 범위만 위아래로 넓힌다 */
.fsctl button{
  position:relative;
  width:44px;height:34px;border-radius:var(--r-pill);
  display:grid;place-items:center;line-height:1;
  font-weight:800;color:var(--text-sub);
  transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.on-dark .fsctl button{color:rgba(255,255,255,.88)}
.fsctl button:hover:not(:disabled){background:var(--card);color:var(--text)}
.on-dark .fsctl button:hover:not(:disabled){background:rgba(255,255,255,.2);color:#fff}
.fsctl button::after{
  content:"";position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);height:44px;
}
.fsctl button:active:not(:disabled){transform:scale(.9)}
.fsctl button:disabled{opacity:.3;cursor:default}
.fsctl .sm{font-size:12px}
.fsctl .lg{font-size:18px}
/* 좁은 화면에서는 단계 이름을 숨겨 헤더를 넘치지 않게 한다
   (읽어주기용으로 화면에서만 감춘다) */
.fsctl .lv{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media (min-width:520px){
  .fsctl .lv{
    position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;
    min-width:40px;text-align:center;
    font-size:11px;font-weight:700;letter-spacing:-.03em;color:var(--text-dim);
  }
  .on-dark .fsctl .lv{color:rgba(255,255,255,.72)}
}
@media print{.fsctl{display:none}}

/* ── 섹션 ────────────────────────────────────────── */
.section{padding:36px 20px 0}
.section-head{margin-bottom:16px}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-label);font-weight:800;letter-spacing:.12em;color:var(--signal-blue);
  text-transform:uppercase;margin-bottom:8px;
}
.eyebrow::before{content:"";width:16px;height:2px;background:currentColor;border-radius:2px}
.section h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.035em;line-height:1.32;text-wrap:balance}
.section-head p{margin-top:8px;font-size:var(--fs-body);color:var(--text-sub);text-align:justify;word-break:normal}

/* ── 버튼 ────────────────────────────────────────── */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:0 22px;width:100%;
  border-radius:var(--r-md);
  font-size:var(--fs-choice);font-weight:700;letter-spacing:-.02em;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), opacity .3s var(--ease);
}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--grad-blue);color:#fff;box-shadow:var(--shadow-glow)}
.btn-primary:hover{box-shadow:0 22px 46px -18px rgba(37,99,235,.7)}
.btn-primary:disabled{background:#C7D0DE;color:#fff;box-shadow:none;cursor:not-allowed}
.btn-primary .arrow{transition:transform .35s var(--ease)}
.btn-primary:hover .arrow{transform:translateX(4px)}
.btn-ghost{background:var(--card);color:var(--text);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:#C9D5E6;background:#FBFDFF}
.btn-light{background:rgba(255,255,255,.14);color:var(--on-dark);border:1px solid rgba(255,255,255,.24)}
.btn-light:hover{background:rgba(255,255,255,.22)}

/* 물결 클릭 효과 */
.ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:rgba(255,255,255,.45);animation:ripple .6s var(--ease-out) forwards}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

/* ── 하단 독 ─────────────────────────────────────── */
.dock{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:14px;
  bottom:calc(14px + var(--safe-bottom));
  width:calc(100% - 32px);max-width:calc(var(--shell) - 32px);
  z-index:var(--z-dock);
  padding:12px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow-lg);
  animation:dockUp .7s var(--ease-out) both;
}
.dock-note{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:var(--fs-sub);color:var(--text-sub);margin-bottom:9px;min-height:1.2em;
}
.dock-note b{color:var(--text);font-weight:700}
.dock-row{display:flex;gap:9px}
.dock-row .btn-primary{flex:1}
.dock-row .btn-ghost{flex:0 0 38%}
.btn-resume{display:none}
.btn-resume.show{display:inline-flex}
@keyframes dockUp{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}

/* ── 키오스크 무입력 안내 ────────────────────────────
   3분 무입력 시 초기화면으로 되돌리기 전, 20초간 되물어 본다.
   화면 어디를 건드려도 취소되고 시계가 다시 처음부터 간다. */
.kiosk-idle{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal);
  display:grid;place-items:center;padding:24px;
  background:rgba(7,12,22,.62);
  backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease), visibility 0s .25s;
}
.kiosk-idle.show{
  opacity:1;visibility:visible;
  transition:opacity .25s var(--ease);
}
.ki-box{
  width:100%;max-width:380px;padding:30px 26px;
  border-radius:var(--r-lg);background:var(--card);
  text-align:center;box-shadow:var(--shadow-lg);
}
.ki-title{font-size:var(--fs-card);font-weight:800;letter-spacing:-.03em}
.ki-desc{margin:11px 0 22px;font-size:var(--fs-body);color:var(--text-sub)}
.ki-desc .ki-sec{
  font-weight:800;color:var(--signal-red);
  font-variant-numeric:tabular-nums;
}
.ki-box .btn{width:100%}
/* 키오스크는 서서 조작하므로 누르는 곳을 키운다 */
[data-kiosk="1"] .btn{min-height:64px}

/* ── 오른쪽 바로가기 레일 ────────────────────────────
   모든 화면 오른쪽을 따라다닌다. 마친 진단의 보고서 버튼이 하나씩 늘고
   맨 아래는 늘 진단자 변경. */
/* 뷰포트가 아니라 콘텐츠 영역(셸) 오른쪽 아래에 붙는다.
   셸과 같은 폭의 투명한 틀을 화면에 고정해 두고 그 안에서 오른쪽 아래로 정렬한다.
   틀 자체는 클릭을 통과시켜야 뒤 내용을 가리지 않는다. */
.rail{
  position:fixed;z-index:var(--z-dock);
  left:50%;transform:translateX(-50%);
  bottom:66px;
  bottom:calc(66px + var(--safe-bottom));
  width:100%;max-width:var(--shell);
  /* 오른쪽은 10px 더 띄운다 — 「진단자 변경」이 커질 때도 화면 끝에 닿지 않는다 */
  padding:0 22px 0 12px;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  pointer-events:none;
}
.rail > *{pointer-events:auto}
/* 문항 화면은 아래에 독이 있어 그 위로 올린다 */
.rail.above-dock{bottom:154px}
.rail.above-dock{bottom:calc(154px + var(--safe-bottom))}

.rail-list{order:1;display:flex;flex-direction:column;gap:9px}
.rail-btn{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* 발바닥(큰 볼)의 중심은 그림의 (42%, 58%) 쯤이다. 발가락이 위·오른쪽에 있어서다.
     글자를 그 자리에 앉히려고 위·오른쪽 여백으로 가운데를 옮긴다.
     글자 묶음은 남은 칸의 가운데에 놓이므로 위 여백을 12px 늘리면 글자가 6px 내려간다. */
  width:88px;height:88px;padding:26px 14px 0 0;
  text-align:center;line-height:1.22;
  transition:transform .25s var(--ease);
}
.rail-btn:hover{transform:translateY(-3px)}
.rail-btn:active{transform:scale(.95)}
/* 발바닥 그림 — 버튼 전체를 덮는다 */
/* 그림자는 drop-shadow 로 준다. box-shadow 는 사각 테두리를 따라가지만
   drop-shadow 는 투명 배경을 빼고 발바닥 모양 그대로 그림자를 만든다.
   두 겹으로 겹쳐 가까운 그림자는 또렷하게, 먼 그림자는 넓게 퍼뜨린다. */
.rail-btn .paw{
  position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;
  pointer-events:none;
  /* 평소에도 바닥에서 살짝 떠 있어 보이게 그림자를 멀고 넓게 둔다 */
  filter:drop-shadow(0 5px 4px rgba(20,45,80,.2))
         drop-shadow(0 15px 17px rgba(20,45,80,.3));
  transition:filter .25s var(--ease);
}
/* 올리면 조금 더 뜨고, 누르면 그림자를 줄여 바닥에 닿는 느낌을 준다 */
.rail-btn:hover .paw{
  filter:drop-shadow(0 6px 5px rgba(20,45,80,.2))
         drop-shadow(0 20px 22px rgba(20,45,80,.32));
}
.rail-btn:active .paw{
  filter:drop-shadow(0 2px 2px rgba(20,45,80,.24))
         drop-shadow(0 5px 7px rgba(20,45,80,.24));
}
/* 꺼짐·켜짐 두 장을 겹쳐 두고 켜짐 쪽만 투명도로 드러낸다 */
.rail-btn .paw > img{
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;
}
.rail-btn .paw > .paw-on{opacity:0;transition:opacity .22s var(--ease)}
.rail-btn:hover .paw > .paw-on,
.rail-btn:active .paw > .paw-on{opacity:1}
.rail-btn:focus-visible .paw > .paw-on{opacity:1}
.rail-btn .rt,.rail-btn .rb{position:relative;z-index:1;transition:color .22s var(--ease)}
/* 진단자 변경 — 다음 사람이 가장 먼저 눌러야 하는 버튼이라 혼자 은은하게 깜빡인다.
   켜짐 그림을 반쯤만 드러냈다 감추기를 되풀이한다. 올리거나 누르면 깜빡임을 멈추고 완전히 켠다. */
.rail-user .paw > .paw-on{animation:pawBlink 2.4s var(--ease) infinite}
.rail-user:hover .paw > .paw-on,
.rail-user:active .paw > .paw-on{animation:none}
.rail-user:focus-visible .paw > .paw-on{animation:none}
@keyframes pawBlink{
  0%,100%{opacity:0}
  50%    {opacity:.8}
}
/* 크기도 같은 박자로 숨 쉬듯 커졌다 작아진다 — 파랑으로 물들 때 가장 크다.
   버튼 전체를 키우므로 그림·글자·그림자가 함께 움직인다.
   올리거나 누르면 멈춰야 위의 hover(떠오름)·active(눌림) 움직임이 그대로 먹는다. */
.rail-user{animation:pawPulse 2.4s var(--ease) infinite;transform-origin:50% 60%}
.rail-user:hover,.rail-user:active{animation:none}
.rail-user:focus-visible{animation:none}
@keyframes pawPulse{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.09)}
}
/* 글자도 바탕과 같은 박자로 남색 ↔ 흰색을 오간다 — 바탕이 파랑으로 물들 때 흰색이 된다.
   올리거나 누르면 멈추고 남색으로 돌아간다(위 hover 규칙). */
.rail-user .rt,.rail-user .rb{animation:pawBlinkInk 2.4s var(--ease) infinite}
.rail-user:hover .rt,.rail-user:hover .rb,
.rail-user:active .rt,.rail-user:active .rb{animation:none}
.rail-user:focus-visible .rt,.rail-user:focus-visible .rb{animation:none}
@keyframes pawBlinkInk{
  0%,100%{color:#0B2F52}
  50%    {color:#fff}
}
/* 켜진 바탕(#2FAFDE)은 밝은 파랑이라 흰 글자는 대비가 2.5:1 에 그쳐 읽기 어렵다.
   짙은 남색(5.4:1)으로 둔다. 켜졌다는 신호는 바탕색이 맡는다(지침 7). */
.rail-btn:hover .rt,.rail-btn:hover .rb,
.rail-btn:active .rt,.rail-btn:active .rb{color:#0B2F52}
/* :focus-visible 을 모르는 브라우저는 선택자 묶음을 통째로 버리므로 따로 적는다(지침 8) */
.rail-btn:focus-visible .rt,.rail-btn:focus-visible .rb{color:#0B2F52}
.rail-btn .rt{font-size:13px;font-weight:700;color:var(--paw-sub);letter-spacing:-.03em}
.rail-btn .rb{font-size:15px;font-weight:800;color:var(--paw-ink);letter-spacing:-.04em}

/* 그림 색이 정해져 있어 글자색으로만 구분한다.
   꺼진 발바닥 바탕(#9FD4EF) 위에서 윗줄도 대비 5:1 이상이 되게 잡는다. */
.rail-btn{--paw-sub:#0B2F52;--paw-ink:#0B2F52}
/* 진단자 변경은 색이 아니라 깜빡임으로 구분한다 — 글자는 남색 ↔ 흰색(pawBlinkInk) */

/* 접기 손잡이 — 폰에서만. 눌러 위로 펼친다 */
.rail-toggle{
  order:2;display:none;
  width:52px;height:52px;border-radius:50%;
  background:var(--card);border:1.5px solid var(--line);
  box-shadow:var(--shadow-md);
  place-items:center;color:var(--text-sub);
}
.rail-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transform:rotate(90deg);transition:transform .3s var(--ease)}
.rail.open .rail-toggle svg{transform:rotate(-90deg)}

@media (max-width:719px){
  .rail-toggle{display:grid}
  .rail-list{
    transform-origin:bottom right;
    transform:translateY(10px) scale(.94);opacity:0;visibility:hidden;
    transition:transform .28s var(--ease), opacity .28s var(--ease), visibility 0s .28s;
  }
  .rail.open .rail-list{
    transform:none;opacity:1;visibility:visible;
    transition:transform .28s var(--ease-out), opacity .28s var(--ease);
  }
}
@media (prefers-reduced-motion:reduce){
  .rail-list,.rail-btn,.rail-toggle svg,
  .rail-btn .paw > .paw-on,.rail-btn .rt,.rail-btn .rb{transition:none}
  .rail-user,.rail-user .paw > .paw-on,.rail-user .rt,.rail-user .rb{animation:none}
}
@media print{.rail{display:none}}

/* ── 토스트 ──────────────────────────────────────── */
.toast{
  position:fixed;left:50%;  bottom:112px;
  bottom:calc(112px + var(--safe-bottom));
  transform:translate(-50%,10px);
  display:flex;align-items:center;gap:9px;
  width:88%;max-width:420px;padding:13px 18px;
  border-radius:var(--r-md);z-index:var(--z-toast);
  background:var(--ink-800);color:var(--on-dark);
  font-size:var(--fs-body);font-weight:500;text-align:left;
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .35s var(--ease), transform .35s var(--ease)}
.toast svg{width:18px;height:18px;flex-shrink:0;stroke:var(--signal-amber);fill:none;stroke-width:2.2;stroke-linecap:round}

/* ── 등장 애니메이션 ──────────────────────────────── */
.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none}

/* ── 푸터 — 모든 이용자 화면 아래에 붙는 띠 ─────────────────
   (대문에만 있던 것을 공용으로 옮겼다. 예전 .site-foot 안내 글은 없앴다.) */
/* ── 하단 브랜드 바 ──────────────────────────────────
   상단 헤더처럼 셸 폭을 끝까지 채우는 띠. 좌우 여백은 헤더(30px)와 맞춘다.
   폰 폭에서는 두 문구가 한 줄에 들어가지 않아 가운데로 쌓인다. */
.brandbar{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:5px 18px;
  margin-top:44px;padding:20px 30px;
  background:var(--card);
  border-top:1px solid var(--line);
}
.site-brand{
  font-size:var(--fs-body);font-weight:800;letter-spacing:-.025em;
  color:var(--text);
}
.site-copy{
  font-size:var(--fs-label);font-weight:500;letter-spacing:-.01em;
  color:var(--text-dim);
}
/* 독이 없어 아래 여백이 필요 없다 — 띠가 셸 바닥에 붙는다 */
.shell.no-dock{padding-bottom:0}
/* 내용이 화면보다 짧으면 띠 아래에 빈 칸이 남는다 — 셸을 세로로 늘어놓고 본문이 남는 높이를 받게 해
   띠를 늘 셸 바닥에 붙인다. 내용이 길 때는 지금과 똑같이 흐른다. */
.shell.no-dock{display:flex;flex-direction:column}
.shell.no-dock > main{flex:1 0 auto}
/* 띠 위 여백(44px)은 .brandbar 의 margin-top 이 맡는다 — 본문이 남는 높이를 받으므로 여기서 auto 로 덮지 않는다 */
@media (min-width:1160px){
  .brandbar{border-radius:0 0 var(--r-xl) var(--r-xl)}
}
@media (min-width:768px){
  /* 폭이 넉넉하면 브랜드는 왼쪽, 저작권은 오른쪽 */
  .brandbar{justify-content:space-between;padding:22px 40px}
}
@media print{.brandbar{display:none}}

/* ── 연령대별 스킨 토큰 (진단 화면에서 data-skin 으로 적용) ── */
[data-skin="kid"]   {--skin:#FF8A3D;--skin-soft:#FFF1E6;--skin-radius:26px;--fs-skin:1.06}
[data-skin="teen"]  {--skin:#2563EB;--skin-soft:#E8F0FE;--skin-radius:20px;--fs-skin:1}
[data-skin="adult"] {--skin:#0F766E;--skin-soft:#E6F5F2;--skin-radius:18px;--fs-skin:1}
[data-skin="senior"]{--skin:#B45309;--skin-soft:#FDF3E3;--skin-radius:20px;--fs-skin:1.15}
[data-skin="deaf"]  {--skin:#7C5CFF;--skin-soft:#F0EDFF;--skin-radius:20px;--fs-skin:1.06}

/* ── 반응형: 폭이 넉넉한 화면 (태블릿 세로·가로, PC) ─────
   방향이 아니라 쓸 수 있는 폭으로 가른다.
   방향으로 가르면 폭 820px 짜리 태블릿 세로가 폰과 같은 480px 기둥이 되어
   좌우가 크게 빈다. */
@media (min-width:768px){
  :root{--shell:1080px}
  .shell{padding-bottom:132px}
  .section{padding:52px 40px 0}
  .section h2{font-size:calc(1.72rem * var(--fs-k))}
  .dock{width:calc(100% - 48px);max-width:920px}
}
/* 셸(1080px) 좌우에 실제 여백이 남을 때만 카드처럼 띄운다 */
@media (min-width:1160px){
  body{padding:24px 0;padding-bottom:calc(24px + var(--taskbar))}
  .shell{min-height:calc(100vh - 48px);min-height:calc(100dvh - 48px - var(--taskbar));border-radius:var(--r-xl)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
}
/* 설문 발바닥 — 진단을 마친 사람에게만 나온다 */
/* 색은 다른 발바닥과 같다(.rail-btn). 참여를 마친 뒤에만 초록으로 바꿔 끝났음을 알린다. */
.rail-survey.is-sent{--paw-sub:#1F6B4A;--paw-ink:#03533C}