@charset "utf-8";
/* ============================================================
   돌봄숨구멍클럽 · 디자인 시스템
   주식회사 케어크루랩 CI (로고활용가이드 ver00) 기준
   MAIN #295aa8 · SUB #90ccf0 · POINT #e18743 · NEUTRAL #4c4a49
   ============================================================ */

/* 본문은 휴머니스트 산세리프, 제목은 명조.
   프리텐다드는 반듯해서 어느 사이트에나 어울리지만, 그래서 표정이 없습니다.
   한글 웹폰트는 unicode-range 로 잘려 있어 필요한 조각만 내려받습니다. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=Noto+Serif+KR:wght@500;600;700&display=swap');

/* ---------- 1. 토큰 ---------- */
:root{
  --blue:#295aa8;
  --sky:#90ccf0;
  --orange:#e18743;
  --gray:#4c4a49;

  --blue-900:#16325f;
  --blue-800:#1d4788;
  --blue-700:#24539b;
  --blue-600:#295aa8;
  --blue-500:#3a74cf;
  --blue-300:#8ab4ea;
  --blue-100:#d7e6fb;
  --blue-50:#eff6ff;

  --sky-600:#45abe4;
  --sky-400:#90ccf0;
  --sky-100:#e2f2fc;

  --orange-700:#b9622a;
  --orange-600:#d47633;
  --orange-500:#e18743;
  --orange-100:#fbe9db;
  --orange-50:#fdf5ee;

  --ink:#1d1c1c;
  --ink-2:#4c4a49;
  --ink-3:#6f6c6a;
  --ink-4:#93908d;
  --line:#e6e3e0;
  --line-2:#f0eeec;
  --bg:#ffffff;
  --bg-soft:#f8f7f5;
  --bg-blue:#eff6ff;

  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --sh-1:0 1px 2px rgba(22,50,95,.07), 0 1px 3px rgba(22,50,95,.05);
  --sh-2:0 2px 4px rgba(22,50,95,.06), 0 8px 20px rgba(22,50,95,.09);
  --sh-3:0 12px 40px rgba(22,50,95,.14);
  --maxw:1140px;
  --narrow:760px;
  --header-h:70px;

  --ease:cubic-bezier(.22,.85,.3,1);
}

/* ---------- 2. 리셋 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,
              'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  font-size:17px; line-height:1.76; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;

  /* 한국어는 기본값이면 단어 한가운데서도 줄이 바뀝니다.
     ("서비스 브 / 랜드", "만납니 / 다")
     keep-all 로 띄어쓰기 자리에서만 끊어 의미 단위가 살아 있게 합니다.
     긴 영문·주소는 break-word 로 넘치지 않게 받쳐 둡니다. */
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* 제목은 줄 길이를 고르게, 본문은 마지막 줄에 한 단어만 남지 않게 */
h1,h2,h3,h4,.h1,.h2,.h3,.h4,
.step-title,.res-type,.flow-item h4,.act h4,.tl .t,.letter-item h3{
  text-wrap:balance;
}
p,li,figcaption,dd,td,th{ text-wrap:pretty; }
img,svg{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
table{border-collapse:collapse; width:100%}
:focus-visible{outline:3px solid var(--sky-600); outline-offset:2px; border-radius:4px}

/* ---------- 3. 레이아웃 ---------- */
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:var(--narrow)}
.section{padding:96px 0}
.section-sm{padding:64px 0}
.section-lg{padding:120px 0}
.soft{background:var(--bg-soft)}
.tint{background:var(--bg-blue)}
.deep{background:var(--blue-900); color:#fff}
.deep .lead,.deep .sec-desc{color:rgba(255,255,255,.76)}
main{min-height:60vh}

.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .g2,.g3,.g4{grid-template-columns:1fr} }
/* 짧은 카드는 휴대폰에서도 두 칸을 유지해 화면이 휑해지지 않게 합니다 */
@media (max-width:620px){
  .grid.compact{grid-template-columns:repeat(2,1fr); gap:12px}
  .grid.compact .card{padding:20px 18px}
  .grid.compact .card h3{font-size:16.6px; line-height:1.45}
  .grid.compact .card p{font-size:15.2px; line-height:1.65}
  .grid.compact .card-num{width:30px; height:30px; font-size:14px; margin-bottom:12px; border-radius:9px}
}
@media (max-width:330px){ .grid.compact{grid-template-columns:1fr} }

@media (max-width:760px){ .section{padding:66px 0} .section-lg{padding:78px 0} }
@media (max-width:620px){
  .section{padding:54px 0}
  .section-sm{padding:40px 0}
  .section-lg{padding:62px 0}
  .grid{gap:14px}
  .sec-head{margin-bottom:32px}
  .sec-desc{margin-top:14px; font-size:16.2px}
  .card{padding:24px 22px}
  .card.flat{padding:22px 20px}
  .cta{padding:60px 0}
  .cta p{font-size:16.4px; margin-top:14px}
  .cta .btn-row{margin-top:26px}
  .mt-64{margin-top:44px}
  .mt-44{margin-top:32px}
  .ftr{padding:52px 0 30px}
  .ftr-top{padding-bottom:32px}
}

/* ---------- 4. 타이포 ---------- */
/* 「우리가 푸는 문제」처럼 한글이 들어가는 라벨입니다.
   자간을 넓히면 영문은 멋있어지지만 한글은 오히려 읽기 어려워집니다.
   그래서 크기는 키우고 자간은 줄였습니다. */
.eyebrow{
  display:inline-block; font-size:17px; font-weight:750; letter-spacing:.075em;
  text-transform:uppercase; color:var(--blue-600); margin-bottom:16px;
}
.eyebrow.orange{color:var(--orange-600)}
.deep .eyebrow{color:var(--sky-400)}

/* 제목만 명조로 갑니다. 같은 산세리프로 크기만 키우면
   어느 서비스에나 붙는 얼굴이 됩니다. */
h1,h2,h3,.h1,.h2,.h3{
  font-family:'Noto Serif KR',Georgia,'Apple SD Gothic Neo','Malgun Gothic',serif;
}
h1,.h1{font-size:clamp(33px,5.2vw,53px); line-height:1.28; letter-spacing:-.028em; font-weight:700}
h2,.h2{font-size:clamp(26px,3.4vw,38px); line-height:1.36; letter-spacing:-.024em; font-weight:700}
h3,.h3{font-size:clamp(19px,2vw,23px); line-height:1.5; letter-spacing:-.018em; font-weight:600}
/* 카드 제목은 작아서 명조로 두면 읽기 힘듭니다.
   <h3 class="h4"> 처럼 쓰는 곳이 있어 글꼴을 다시 지정해야 합니다. */
.h4{
  font-family:'IBM Plex Sans KR',-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:17px; font-weight:600; letter-spacing:-.012em;
}

/* 한 줄이 너무 길면 눈이 다음 줄 첫머리를 놓칩니다.
   한글은 한 줄에 40~50자쯤이 편해서 그 선에서 폭을 잡았습니다. */
.lead{font-size:clamp(17px,1.9vw,20px); line-height:1.8; color:var(--ink-2); max-width:44em}
.sec-head{max-width:820px; margin-bottom:52px}
.sec-desc{margin-top:18px; font-size:17.5px; line-height:1.8; color:var(--ink-3); max-width:46em}
.sec-head.center .sec-desc,.sec-head.center .lead{margin-left:auto; margin-right:auto}
.small{font-size:15.8px; line-height:1.74; color:var(--ink-3)}
.tiny{font-size:14.5px; line-height:1.7; color:var(--ink-4)}
.center{text-align:center}
.sec-head.center{margin-left:auto; margin-right:auto}
b,strong{font-weight:750}
.u-blue{color:var(--blue-600)} .u-orange{color:var(--orange-600)}

/* ---------- 5. 버튼 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:0 26px; height:52px; border:1px solid transparent; border-radius:var(--r-full);
  font-size:16px; font-weight:700; letter-spacing:-.012em; cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--orange-500); color:#fff; box-shadow:0 4px 14px rgba(225,135,67,.3)}
.btn-primary:hover{background:var(--orange-600); box-shadow:0 6px 20px rgba(225,135,67,.38)}
.btn-blue{background:var(--blue-600); color:#fff; box-shadow:0 4px 14px rgba(41,90,168,.3)}
.btn-blue:hover{background:var(--blue-700)}
.btn-line{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-line:hover{border-color:var(--blue-300); background:var(--blue-50); color:var(--blue-700)}
.btn-ghost{background:#fff; border-color:var(--blue-100); color:var(--blue-700); box-shadow:var(--sh-1)}
.btn-ghost:hover{border-color:var(--blue-300); background:var(--blue-50)}
.btn-white{background:#fff; color:var(--blue-800)}
.btn-white:hover{background:var(--blue-50)}
.btn-onblue{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.34); color:#fff}
.btn-onblue:hover{background:rgba(255,255,255,.18); border-color:#fff}
.btn-lg{height:58px; padding:0 34px; font-size:17px}
.btn-sm{height:42px; padding:0 18px; font-size:14.5px}
.btn-block{display:flex; width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}
.btn-row.center{justify-content:center}
.arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- 6. 헤더 ---------- */
.hdr{
  position:sticky; top:0; z-index:60; height:var(--header-h);
  background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-2);
}
.hdr-in{display:flex; align-items:center; gap:28px; height:var(--header-h)}
.brand-link{display:flex; align-items:center; flex-shrink:0}
.brand{display:flex; align-items:center; flex-shrink:0}
.brand img{height:34px; width:auto}

/* 일본어 로고 — 가이드의 가로형 로고는 한국어 이름이 그림 안에 있어
   그대로 쓸 수 없습니다. 고래 심벌만 쓰고 이름은 글자로 옆에 놓습니다. */
.brand-ja{gap:9px}
.brand-ja img{height:31px; width:auto}
.brand-ja .wm{
  font-size:19.5px; font-weight:800; letter-spacing:-.02em; line-height:1;
  color:var(--blue-600); white-space:nowrap;
}
.nav{display:flex; align-items:center; gap:2px; margin-left:auto}
.nav a{
  padding:9px 13px; border-radius:var(--r-full); font-size:16.3px; font-weight:600;
  color:var(--ink-2); white-space:nowrap; transition:background .16s, color .16s;
}
.nav a:hover{background:var(--blue-50); color:var(--blue-700)}
.nav a.on{color:var(--blue-700); background:var(--blue-50)}
.hdr-cta{flex-shrink:0; margin-left:8px}

/* ---------- 언어 전환 ---------- */
.lang{display:flex; align-items:center; gap:2px; flex-shrink:0; margin-left:10px}
.lang a,.lang span{
  padding:6px 10px; border-radius:var(--r-full); font-size:14.4px; font-weight:650;
  color:var(--ink-4); white-space:nowrap;
}
.lang a:hover{background:var(--blue-50); color:var(--blue-700)}
.lang .on{color:var(--blue-700); background:var(--blue-50)}
.mnav-lang{margin-top:24px; padding-top:20px; border-top:1px solid var(--line)}
.mnav-lang .lang{justify-content:center; margin-left:0}
.mnav-lang .lang a,.mnav-lang .lang span{font-size:16px; padding:10px 18px}

/* ---------- 일본어 ----------
   한국어는 띄어쓰기 자리에서만 끊도록 keep-all 을 걸어 두었는데,
   일본어는 띄어쓰기가 없어서 그대로 두면 한 줄이 통째로 넘칩니다.
   그래서 일본어 화면에서는 기본 줄바꿈으로 되돌립니다. */
html[lang="ja"] body,[lang="ja"]{
  font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic',
              'Noto Sans JP',Meiryo,Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
html[lang="ja"] body{ word-break:normal; line-break:strict; overflow-wrap:anywhere; }
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,
html[lang="ja"] .h1,html[lang="ja"] .h2,html[lang="ja"] .h3{
  font-family:'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif;
}
html[lang="ja"] .lead{max-width:38em}
html[lang="ja"] .sec-desc{max-width:40em}
.burger{
  display:none; margin-left:auto; width:44px; height:44px; border:0; background:transparent;
  cursor:pointer; align-items:center; justify-content:center; border-radius:var(--r-sm);
}
.burger:hover{background:var(--bg-soft)}
.burger span{display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; position:relative}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .2s var(--ease), top .2s var(--ease);
}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger.on span{background:transparent}
.burger.on span::before{top:0; transform:rotate(45deg)}
.burger.on span::after{top:0; transform:rotate(-45deg)}

.mnav{
  display:none; position:fixed; inset:var(--header-h) 0 0; z-index:59;
  background:#fff; padding:26px 24px 40px; overflow-y:auto;
}
.mnav.open{display:block}
.mnav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 4px; font-size:18px; font-weight:650; border-bottom:1px solid var(--line-2);
}
.mnav a i{color:var(--ink-4); font-style:normal; font-size:18px}
.mnav .btn{margin-top:26px}
body.locked{overflow:hidden}

/* 메뉴 6개 + 언어 전환 + 문의 버튼이 한 줄에 들어가려면 1120px 쯤 필요합니다.
   그보다 좁으면 햄버거 메뉴로 넘깁니다. (언어 전환은 그 안에 들어 있습니다) */
@media (max-width:1119px){
  .nav,.hdr-cta,.hdr .lang{display:none}
  .burger{display:flex}
}

/* ---------- 7. 히어로 · 파동 ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(168deg,#17386e 0%,#24539b 44%,#3b7ac9 100%);
  color:#fff; padding:112px 0 176px;
}
/* 글이 물결 위에 얹히므로, 글 있는 쪽에만 옅은 그늘을 깝니다 */
.hero::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(101deg,
      rgba(18,46,92,.72) 0%,
      rgba(18,46,92,.58) 30%,
      rgba(18,46,92,.28) 56%,
      rgba(18,46,92,0)   82%),
    linear-gradient(to bottom,
      rgba(18,46,92,.26) 0%,
      rgba(18,46,92,0)   38%);
}
.hero .waves{z-index:3}
.hero-inner{position:relative; z-index:4; max-width:860px}
.hero h1{color:#fff; margin-bottom:26px}
.hero h1 em{font-style:normal; color:var(--sky-400)}
.hero-lead{font-size:clamp(17px,2vw,20.5px); line-height:1.78; color:rgba(255,255,255,.8); max-width:660px}
.hero .btn-row{margin-top:40px}
.hero-tag{
  display:inline-flex; align-items:center; gap:9px; padding:7px 16px 7px 12px;
  border:1px solid rgba(255,255,255,.26); border-radius:var(--r-full);
  background:rgba(255,255,255,.08); font-size:15.5px; font-weight:600;
  color:rgba(255,255,255,.92); margin-bottom:30px;
}
.hero-tag i{width:7px; height:7px; border-radius:50%; background:var(--orange-500); flex-shrink:0}
.hero-note{margin-top:22px; font-size:14.5px; color:rgba(255,255,255,.58)}

/* 히어로 배경 물결 — 마우스를 따라 결이 기울고, 누르면 파문이 번집니다 */
.hero-canvas{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  display:block; pointer-events:none; opacity:.78;
}

/* 파동 — 물결 */
.waves{
  position:absolute; left:0; right:0; bottom:-1px; z-index:2;
  height:clamp(72px,10vw,142px); line-height:0; pointer-events:none;
}
.waves .w{
  position:absolute; left:0; bottom:0; width:200%; max-width:none; height:100%;
  display:block; animation:drift linear infinite; will-change:transform;
}
.w1{opacity:.15; animation-duration:27s}
.w2{opacity:.26; animation-duration:19s; animation-direction:reverse}
.w3{opacity:1;   animation-duration:34s}
@keyframes drift{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

@media (prefers-reduced-motion:reduce){
  .waves .w{animation:none}
}
@media (max-width:760px){
  .hero{padding:74px 0 124px}
  .hero-canvas{opacity:.62}
}

/* 하위 페이지 머리 */
.phead{
  position:relative; overflow:hidden; color:#fff; padding:82px 0 96px;
  background:linear-gradient(160deg,#17386e 0%,#24539b 100%);
}
.phead .wrap{position:relative; z-index:3}
.phead .waves{height:clamp(46px,6vw,88px)}
.phead h1{color:#fff; font-size:clamp(30px,4.4vw,46px)}
.phead .lead{color:rgba(255,255,255,.78); margin-top:20px; max-width:720px}
.crumb{font-size:15px; font-weight:700; letter-spacing:.08em; color:var(--sky-400); margin-bottom:14px}
@media (max-width:760px){ .phead{padding:56px 0 76px} }

/* ---------- 8. 카드 ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
a.card{display:block}
.card.hoverable:hover{border-color:var(--blue-300); box-shadow:var(--sh-2); transform:translateY(-3px)}
.card h3{margin-bottom:12px}
.card p{color:var(--ink-3); font-size:16.5px; line-height:1.76; max-width:40em}
.card-num{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:11px; background:var(--blue-50); color:var(--blue-600);
  font-size:16px; font-weight:800; margin-bottom:18px; flex-shrink:0;
}
.card-num.orange{background:var(--orange-50); color:var(--orange-600)}
.card.flat{border:0; background:var(--bg-soft); padding:28px}
/* 연한 배경 섹션 위에서는 바탕색이 겹쳐 카드가 사라지므로 흰색으로 */
.soft .card.flat,.tint .card.flat{background:#fff; border:1px solid var(--line-2)}
.card.on-deep{background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.14)}
.card.on-deep h3{color:#fff}
.card.on-deep p{color:rgba(255,255,255,.7)}
.card.accent{border-color:var(--orange-100); background:var(--orange-50)}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.card-top .tiny{flex-shrink:0; text-align:right}
/* 돌봄멘토가 실제로 듣는 질문 */
.quote-line{
  margin-top:12px; font-size:15.8px; line-height:1.66; font-weight:600;
  color:var(--orange-700) !important; letter-spacing:-.014em;
}

/* 통계 */
.stat .n{font-size:clamp(26px,3.8vw,42px); font-weight:800; letter-spacing:-.03em; color:var(--blue-600); line-height:1.12; font-variant-numeric:tabular-nums; white-space:nowrap}
.deep .stat .n{color:var(--sky-400)}
.stat .k{margin-top:10px; font-size:16.5px; font-weight:700; line-height:1.5}
.stat .s{margin-top:6px; font-size:14.6px; color:var(--ink-4); line-height:1.6}
.deep .stat .s{color:rgba(255,255,255,.62)}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.stat-row.two{grid-template-columns:repeat(2,1fr)}
.stat-row.three{grid-template-columns:repeat(3,1fr)}
.stat-row > *{border-left:2px solid var(--line); padding-left:22px}
.deep .stat-row > *{border-color:rgba(255,255,255,.18)}
@media (max-width:820px){ .stat-row,.stat-row.three{grid-template-columns:repeat(2,1fr); gap:28px 20px} }
/* 아주 좁은 화면에서는 두 칸이 깨지므로 한 줄씩 */
@media (max-width:400px){ .stat-row,.stat-row.two,.stat-row.three{grid-template-columns:1fr} }

/* ---------- 9. 단계 · 흐름 ---------- */
.flow{display:grid; gap:14px; grid-template-columns:repeat(5,1fr)}
@media (max-width:980px){ .flow{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .flow{grid-template-columns:1fr} }
.flow-item{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:26px 22px;
}
.flow-item .st{font-size:13.2px; font-weight:800; letter-spacing:.1em; color:var(--sky-600); margin-bottom:10px}
.flow-item h4{font-size:17px; font-weight:750; margin-bottom:9px; letter-spacing:-.018em}
.flow-item p{font-size:15.6px; line-height:1.74; color:var(--ink-3)}
.flow-item .out{
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);
  font-size:14.2px; color:var(--blue-600); font-weight:650;
}

/* 연혁 */
.tl{position:relative; padding-left:30px}
.tl::before{content:""; position:absolute; left:6px; top:10px; bottom:10px; width:2px; background:var(--line)}
.tl li{position:relative; padding:0 0 24px}
.tl li::before{
  content:""; position:absolute; left:-30px; top:9px; width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid var(--blue-300);
}
.tl li.hl::before{border-color:var(--orange-500); background:var(--orange-500)}
.tl .d{font-size:14.6px; font-weight:750; color:var(--blue-600); letter-spacing:.02em; font-variant-numeric:tabular-nums}
.tl .t{font-size:16.5px; font-weight:650; margin-top:2px; line-height:1.56}

/* 이야기형 연혁 — 한 줄에 한 사건, 설명 한 문장 */
.tl-wide{max-width:720px}
.tl-wide li{padding-bottom:34px}
.tl-wide .t{font-size:clamp(18px,2vw,20.5px); font-weight:750; letter-spacing:-.02em}
.tl-wide p{margin-top:8px; font-size:16.5px; line-height:1.78; color:var(--ink-3)}

/* ---------- 10. 표 ---------- */
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tbl{font-size:16px; min-width:680px}
.tbl th,.tbl td{padding:15px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-2)}
.tbl thead th{
  font-size:14.6px; font-weight:750; color:var(--ink-3); background:var(--bg-soft);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl tbody th{font-weight:700; white-space:nowrap; color:var(--ink); font-size:15.6px}
.tbl td{color:var(--ink-3); line-height:1.7}
.tbl .own{background:var(--blue-50); color:var(--blue-800); font-weight:600}
.tbl thead th.own{background:var(--blue-100); color:var(--blue-800)}
.tbl-plain{min-width:0}
.tbl-plain th,.tbl-plain td{border-bottom:1px solid var(--line-2); padding:15px 0; vertical-align:top}
.tbl-plain th{width:124px; color:var(--ink-3); font-weight:650; font-size:15.6px; white-space:nowrap}
.tbl-plain td{color:var(--ink); font-size:16.2px; line-height:1.76}
@media (max-width:560px){
  .tbl-plain th,.tbl-plain td{display:block; width:auto; padding:0}
  .tbl-plain th{padding-top:16px}
  .tbl-plain td{padding:4px 0 16px; border-bottom:1px solid var(--line-2)}
  .tbl-plain th{border:0}
}

/* ---------- 10-b. 사진 ----------
   얼굴이 드러나는 사진은 쓰지 않습니다. 손, 사물, 빛, 풍경만 씁니다.
   (assets/img/photos/SOURCE.md 에 고른 기준을 적어 두었습니다) */
.photo{margin:0; position:relative}
.photo img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-lg); background:var(--bg-soft);
}
.photo figcaption{
  margin-top:12px; font-size:14.6px; line-height:1.65; color:var(--ink-4);
  padding-left:14px; border-left:2px solid var(--line);
}
.deep .photo figcaption{color:rgba(255,255,255,.6); border-left-color:rgba(255,255,255,.2)}

/* 높이를 px 로 박으면 칸 너비가 달라질 때 비율이 깨집니다.
   비율로 잡아 두면 어느 폭에서도 같은 모양으로 줄어듭니다. */
.photo.crop img{aspect-ratio:4/3;  object-fit:cover; height:auto}
.photo.wide img{aspect-ratio:16/9; object-fit:cover; height:auto}
.photo.square img{aspect-ratio:1/1; object-fit:cover; height:auto}
.photo.tall img{aspect-ratio:3/4;  object-fit:cover; height:auto}

/* 사진 한 장 + 글 */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center}
.split > *{min-width:0}
.split.narrow-photo{grid-template-columns:5fr 7fr}
.split .photo img{box-shadow:var(--sh-2)}
@media (max-width:820px){
  .split,.split.narrow-photo{grid-template-columns:1fr; gap:26px}
  .split.flip > *:first-child{order:2}
}
/* 넓은 화면에서 사진을 오른쪽으로 */
@media (min-width:821px){ .split.flip > *:first-child{order:2} }

/* 섹션 사이에 끼우는 가로 사진 */
.band{margin:0; overflow:hidden}
.band img{
  width:100%; display:block; object-fit:cover;
  height:clamp(200px,28vw,360px);
}
.band.round img{border-radius:var(--r-xl)}

/* 살짝 기울여 둡니다. 너무 반듯하면 만든 티가 납니다. */
.photo.tilt img{transform:rotate(-.7deg)}
.photo.tilt-r img{transform:rotate(.6deg)}
@media (prefers-reduced-motion:reduce){ .photo.tilt img,.photo.tilt-r img{transform:none} }

/* ---------- 11. 칩 · 박스 ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:var(--r-full);
  font-size:14px; font-weight:700; background:var(--blue-50); color:var(--blue-700);
}
.chip.orange{background:var(--orange-50); color:var(--orange-700)}
.chip.grey{background:var(--bg-soft); color:var(--ink-3)}
.chip.sky{background:var(--sky-100); color:#1d6ea0}
.chip-row{display:flex; flex-wrap:wrap; gap:8px}

.note-box{
  border-radius:var(--r); padding:20px 24px; font-size:16.2px; line-height:1.82; max-width:48em;
  background:var(--bg-soft); color:var(--ink-2);
}
.note-box.blue{background:var(--blue-50); color:var(--blue-800)}
.note-box.orange{background:var(--orange-50); color:#8a4a1c}
.note-box.line{background:#fff; border:1px solid var(--line)}
.note-box.on-deep{background:rgba(255,255,255,.07); color:rgba(255,255,255,.8)}
.rule{height:1px; background:var(--line); border:0; margin:0}

.ticks li{position:relative; padding:9px 0 9px 30px; font-size:16.6px; line-height:1.76; color:var(--ink-2); max-width:46em}
.ticks li::before{
  content:""; position:absolute; left:2px; top:16px; width:13px; height:7px;
  border-left:2.4px solid var(--blue-600); border-bottom:2.4px solid var(--blue-600);
  transform:rotate(-45deg);
}
.ticks.orange li::before{border-color:var(--orange-500)}
.dots li{position:relative; padding:6px 0 6px 18px; font-size:16.2px; color:var(--ink-3); line-height:1.76; max-width:48em}
.dots li::before{content:""; position:absolute; left:2px; top:15px; width:5px; height:5px; border-radius:50%; background:var(--blue-300)}
.deep .dots li{color:rgba(255,255,255,.72)}

/* ---------- 12. 푸터 ---------- */
.ftr{background:var(--blue-900); color:rgba(255,255,255,.68); padding:72px 0 36px; font-size:15.8px}
.ftr-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:44px}
@media (max-width:860px){ .ftr-top{grid-template-columns:1fr 1fr; gap:34px} }
@media (max-width:520px){ .ftr-top{grid-template-columns:1fr} }
.ftr-logo img{height:30px; width:auto; margin-bottom:18px; filter:brightness(0) invert(1); opacity:.94}
.ftr-mark{display:flex; align-items:center; margin-bottom:18px}
.ftr-mark img{margin-bottom:0}
.ftr-logo .brand-ja img{height:27px}
.ftr-logo .brand-ja .wm{font-size:17.5px; color:rgba(255,255,255,.94)}
.ftr-logo p{font-size:15.5px; line-height:1.78; color:rgba(255,255,255,.68); max-width:320px}
.ftr h4{font-size:14px; font-weight:750; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.56); margin-bottom:16px}
.ftr li{padding:6px 0}
.ftr li a{font-size:15.8px; color:rgba(255,255,255,.72); transition:color .15s}
.ftr li a:hover{color:#fff}
.ftr-biz{
  border-top:1px solid rgba(255,255,255,.1); padding-top:28px;
  font-size:14.4px; line-height:1.9; color:rgba(255,255,255,.6);
}
.ftr-biz b{color:rgba(255,255,255,.86); font-weight:650}
.ftr-biz .sep{color:rgba(255,255,255,.2); padding:0 8px}
.ftr-copy{margin-top:16px; font-size:13.8px; color:rgba(255,255,255,.56)}
.ftr-copy a{text-decoration:underline; text-underline-offset:2px}

/* ---------- 13. CTA 밴드 ---------- */
.cta{position:relative; overflow:hidden; background:var(--blue-800); color:#fff; padding:86px 0}
.cta::after{
  content:""; position:absolute; right:-170px; top:-170px; width:540px; height:540px; border-radius:50%;
  background:radial-gradient(circle,rgba(144,204,240,.2),transparent 68%);
}
.cta .wrap{position:relative; z-index:2}
.cta h2{color:#fff}
.cta p{margin-top:18px; color:rgba(255,255,255,.76); font-size:17.5px; line-height:1.8;
  max-width:40em; margin-left:auto; margin-right:auto}
.cta .btn-row{margin-top:34px}

/* ---------- 14. 3분 돌봄체크 ----------
   화면 하나에 문항 열 개를 늘어놓습니다.
   아래 막대는 고정이라, 몇 개 남았는지가 늘 보입니다. */
.check-shell{background:var(--bg-soft); min-height:calc(100vh - var(--header-h)); padding:44px 0 140px}

.qhead{margin-bottom:38px}
.qhead .sec-desc{margin-top:14px}

.qgroup + .qgroup{margin-top:40px}
.qgroup-title{
  font-size:clamp(18px,2.1vw,21px); line-height:1.45; font-weight:700;
  color:var(--blue-700); margin-bottom:14px;
}
.qlist{display:grid; gap:12px}

.qitem{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:22px 22px 18px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.qitem.done{border-color:var(--blue-100); background:var(--blue-50)}
/* 안 고른 채로 결과를 누르면 여기를 보라고 알려 줍니다 */
.qitem.ask{border-color:var(--orange-500); box-shadow:0 0 0 3px rgba(225,135,67,.18)}

.qtext{
  display:flex; gap:11px; align-items:flex-start;
  font-size:16.6px; line-height:1.7; color:var(--ink); margin-bottom:14px;
}
.qno{
  flex:0 0 auto; width:24px; height:24px; margin-top:2px; border-radius:7px;
  background:var(--blue-600); color:#fff; font-size:13.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Sans KR',sans-serif;
}
.qitem.done .qno{background:var(--blue-700)}

.qopts{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.qitem[data-d="F"] .qopts{grid-template-columns:repeat(2,1fr)}
.qopt{
  min-height:48px; padding:10px 8px; border:1px solid var(--line);
  background:#fff; border-radius:var(--r-sm); cursor:pointer;
  font-size:15.4px; font-weight:600; color:var(--ink-2); line-height:1.4;
  transition:border-color .16s, background .16s, color .16s;
}
.qopt:hover{border-color:var(--blue-300); background:var(--blue-50); color:var(--blue-700)}
.qopt.on{border-color:var(--blue-600); background:var(--blue-600); color:#fff}
@media (max-width:420px){
  .qitem{padding:18px 16px 14px}
  .qopts{gap:6px}
  .qopt{font-size:14.4px; padding:10px 4px}
}

/* 아래 고정 막대 */
.qbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); padding:12px 0;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
.qbar-in{display:flex; align-items:center; gap:14px}
.qbar-count{
  flex:0 0 auto; font-size:15px; font-weight:700; color:var(--blue-700);
  font-variant-numeric:tabular-nums;
}
.qbar-track{flex:1 1 auto; height:6px; background:var(--line-2); border-radius:var(--r-full); overflow:hidden}
.qbar-fill{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--sky-600),var(--blue-600));
  transition:width .3s var(--ease);
}
.qbar .btn{flex:0 0 auto; height:46px; padding:0 22px}
.qbar .btn.is-off{opacity:.45; box-shadow:none}
.qbar .btn.is-off:hover{transform:none; background:var(--orange-500)}
@media (max-width:480px){
  .qbar-in{gap:10px}
  .qbar-count{font-size:14px}
  .qbar .btn{padding:0 16px; font-size:15px}
}
.q-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:40px 38px; box-shadow:var(--sh-1);
}
@media (max-width:620px){ .q-card{padding:28px 20px; border-radius:var(--r)} }

.prog{margin-bottom:30px}
.prog-top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:11px}
.prog-step{font-size:14.6px; font-weight:750; color:var(--blue-600); letter-spacing:.03em}
.prog-pct{font-size:14.6px; color:var(--ink-4); font-variant-numeric:tabular-nums}
.prog-bar{display:block; height:6px; background:var(--line-2); border-radius:var(--r-full); overflow:hidden}
.prog-fill{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--sky-600),var(--blue-600));
  border-radius:var(--r-full); transition:width .45s var(--ease)}

.step-title{font-size:clamp(21px,2.8vw,27px); line-height:1.36; font-weight:800; letter-spacing:-.026em; margin-bottom:12px}
.step-desc{font-size:16.3px; line-height:1.76; color:var(--ink-3); margin-bottom:30px}

.q{padding:24px 0; border-top:1px solid var(--line-2)}
.q:first-of-type{border-top:0; padding-top:4px}
.q-text{font-size:16.6px; line-height:1.62; font-weight:600; margin-bottom:16px; letter-spacing:-.014em}
.q-text .qn{color:var(--blue-300); font-weight:800; margin-right:8px; font-variant-numeric:tabular-nums}
.opts{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
@media (max-width:560px){ .opts{grid-template-columns:repeat(2,1fr)} }
.opt{
  position:relative; display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:52px; padding:8px 6px; border:1.5px solid var(--line); border-radius:var(--r);
  font-size:15.6px; font-weight:650; color:var(--ink-2); cursor:pointer; background:#fff;
  transition:border-color .16s, background .16s, color .16s;
}
.opt:hover{border-color:var(--blue-300); background:var(--blue-50)}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt.on{border-color:var(--blue-600); background:var(--blue-600); color:#fff; box-shadow:0 3px 10px rgba(41,90,168,.28)}
.opt.on.warm{border-color:var(--orange-500); background:var(--orange-500); box-shadow:0 3px 10px rgba(225,135,67,.26)}
.opt.wide{justify-content:flex-start; text-align:left; padding:14px 18px; font-size:16.2px; line-height:1.55}

.nav-btns{display:flex; gap:12px; margin-top:34px; padding-top:26px; border-top:1px solid var(--line-2)}
.nav-btns .btn{flex:1}
.err{color:#c0392b; font-size:14.5px; margin-top:12px; min-height:20px; font-weight:600}

/* ---------- 15. 결과 ---------- */
.res-hero{
  position:relative; overflow:hidden; color:#fff; padding:66px 0 76px;
  background:linear-gradient(158deg,#17386e,#24539b);
}
.res-hero.warm{background:linear-gradient(158deg,#8f4c1c,#d67b38)}
/* 주황 결과 화면에서는 하늘색 물결이 탁하게 섞여 흰색으로 바꿉니다 */
.res-hero.warm .waves .w path{fill:#fff}
.res-hero .wrap{position:relative; z-index:3}
.res-type{font-size:clamp(28px,4.2vw,42px); font-weight:800; letter-spacing:-.03em; line-height:1.24; margin:12px 0 14px}
.res-tag{font-size:17px; color:rgba(255,255,255,.95); line-height:1.76; max-width:44em}
.res-score{
  display:inline-flex; align-items:baseline; gap:7px; margin-top:26px; padding:11px 20px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); border-radius:var(--r-full);
}
.res-score b{font-size:25px; font-weight:800; font-variant-numeric:tabular-nums}
.res-score span{font-size:15.5px; color:rgba(255,255,255,.9)}

.meter-row{display:flex; align-items:center; gap:16px; padding:14px 0}
.meter-name{width:112px; flex-shrink:0; font-size:15.8px; font-weight:700}
.meter-bar{display:block; flex:1; height:10px; background:var(--line-2); border-radius:var(--r-full); overflow:hidden}
.meter-fill{display:block; height:100%; width:0; border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--sky-400),var(--blue-600))}
.meter-fill.hi{background:linear-gradient(90deg,var(--orange-500),var(--orange-700))}
.meter-val{width:76px; flex-shrink:0; text-align:right; font-size:15px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.meter-val b{color:var(--ink); font-size:15.5px; font-weight:750}
.meter-fill[data-w]{transition:width 1.05s var(--ease); transition-delay:var(--gauge-delay,0ms)}
.gauge-go .meter-fill[data-w]{width:var(--gauge-w)}
@media (prefers-reduced-motion:reduce){
  .meter-fill[data-w]{transition:none; width:var(--gauge-w)}
}
/* 휴대폰에서는 이름·수치와 막대를 위아래로 나눕니다.
   한 줄에 다 넣으면 막대가 엄지손톱만 해져서 길이를 읽을 수 없습니다. */
@media (max-width:560px){
  .meter-row{flex-wrap:wrap; gap:6px 10px; padding:12px 0}
  .meter-name{width:auto; flex:1 1 auto; font-size:15px; order:1}
  .meter-val{width:auto; flex:0 0 auto; order:2}
  .meter-bar{flex:1 1 100%; order:3; height:9px}
}

.act{display:flex; gap:18px; padding:24px 0; border-top:1px solid var(--line-2)}
.act:first-child{border-top:0; padding-top:0}
.act .n{
  flex-shrink:0; width:32px; height:32px; border-radius:10px; background:var(--orange-50);
  color:var(--orange-600); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15.5px;
}
.act h4{font-size:17.4px; font-weight:750; line-height:1.5; letter-spacing:-.018em; margin-bottom:7px}
.act p{font-size:16.2px; line-height:1.78; color:var(--ink-3)}

/* ---------- 16. 레터 ---------- */
.letter-item{
  display:block; padding:26px 0; border-bottom:1px solid var(--line-2);
}
.letter-item .cat{font-size:14px; font-weight:750; color:var(--orange-600); letter-spacing:.02em}
.letter-item h3{font-size:19.5px; margin:8px 0; letter-spacing:-.02em; transition:color .16s}
.letter-item p{font-size:16.2px; line-height:1.78; color:var(--ink-3); max-width:46em}
.letter-item .m{margin-top:10px; font-size:14.6px; color:var(--ink-4)}

/* 결과 화면의 추천 레터 — 링크 한 줄 */
a.letter-item{transition:padding-left .18s var(--ease)}
a.letter-item:hover{padding-left:6px}
a.letter-item:hover h3{color:var(--blue-700)}

/* 레터 본문 */
.article{max-width:680px; margin:0 auto}
.article p{font-size:17.4px; line-height:1.92; color:var(--ink-2); margin:0 0 30px; word-break:keep-all}
.article h2{
  font-size:clamp(21px,2.6vw,26px); line-height:1.4; letter-spacing:-.024em;
  margin:56px 0 22px; padding-left:16px; border-left:4px solid var(--orange-500);
}
.article h2:first-child{margin-top:0}
.article .q{
  margin:0 0 34px; padding:24px 26px; border-radius:var(--r);
  background:var(--blue-50); color:var(--blue-800);
  font-size:18px; line-height:1.82; font-weight:650; letter-spacing:-.018em;
}
.article .note{
  margin:0 0 30px; padding:20px 22px; border-radius:var(--r);
  background:var(--bg-soft); border:1px solid var(--line);
  font-size:16.3px; line-height:1.78; color:var(--ink-2);
}
.article ul{margin:0 0 30px}
.article ul li{
  position:relative; padding:8px 0 8px 22px; font-size:16.6px;
  line-height:1.78; color:var(--ink-2);
}
.article ul li::before{
  content:""; position:absolute; left:2px; top:17px; width:6px; height:6px;
  border-radius:50%; background:var(--orange-500);
}
.article .sign{
  margin:44px 0 0; padding-top:24px; border-top:1px solid var(--line);
  font-size:16.2px; font-weight:700; color:var(--ink-3);
}
.article .keep{
  margin:44px 0 0; padding:30px 28px; border-radius:var(--r-lg);
  background:var(--orange-50); border:1px solid var(--orange-100);
}
.article .keep h3{color:#8a4a1c; margin-bottom:6px}
.article .keep .lead{font-size:16.5px; color:#8a4a1c; margin-bottom:16px}
.article .keep li{color:#6f4522; font-size:16.3px; padding:8px 0 8px 22px}
.article .keep li::before{background:var(--orange-600)}
.article-refs{max-width:680px; margin:44px auto 0}
.article-refs li a{color:var(--blue-700); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--blue-100)}
.article-refs li a:hover{text-decoration-color:var(--blue-600)}
.article-nav{
  display:flex; flex-wrap:wrap; gap:12px; max-width:680px;
  margin:56px auto 0; padding-top:30px; border-top:1px solid var(--line);
}
@media (max-width:620px){
  .article p{font-size:16.6px; line-height:1.86}
  .article .q{padding:20px 20px; font-size:16.8px}
}

/* 아카이브 — 펼쳐지는 항목 */
details.letter-item{padding:0}
details.letter-item > summary{
  display:block; list-style:none; cursor:pointer; padding:26px 0;
  transition:padding-left .18s var(--ease);
}
details.letter-item > summary::-webkit-details-marker{display:none}
details.letter-item > summary:hover{padding-left:6px}
details.letter-item > summary:hover h3{color:var(--blue-700)}
details.letter-item[open] > summary{padding-bottom:16px}
.letter-meta{display:flex; flex-wrap:wrap; align-items:center; gap:9px}
.letter-meta .tiny{color:var(--ink-4)}
.letter-more{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-size:15px; font-weight:700; color:var(--blue-600);
}
.letter-more i{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; background:var(--blue-50);
  font-style:normal; font-size:14px; line-height:1;
}
details.letter-item[open] .letter-more i{transform:rotate(45deg)}
details.letter-item[open] .letter-more{color:var(--ink-4)}
.letter-body{
  padding:4px 0 30px; border-top:1px dashed var(--line);
  margin-top:2px; padding-top:24px;
}
.letter-body .ticks li{font-size:16.2px; padding:7px 0 7px 28px}
.letter-body .ticks li::before{top:15px}
.letter-body .links li a{color:var(--blue-700); text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:var(--blue-100)}
.letter-body .links li a:hover{text-decoration-color:var(--blue-600)}
.letter-body h4{color:var(--ink-3)}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.filters button{
  padding:8px 16px; border:1px solid var(--line); background:#fff; border-radius:var(--r-full);
  font-size:15.2px; font-weight:650; color:var(--ink-3); cursor:pointer; transition:all .16s;
}
.filters button:hover{border-color:var(--blue-300); color:var(--blue-700)}
.filters button.on{background:var(--blue-600); border-color:var(--blue-600); color:#fff}

/* ---------- 17. 돌봄맵 ---------- */
.map-shell{height:calc(100dvh - var(--header-h) - 1px); display:flex; flex-direction:column; background:var(--bg-soft)}
.map-bar{
  display:flex; align-items:center; gap:14px; padding:11px 24px;
  border-bottom:1px solid var(--line); background:#fff; flex-shrink:0;
}
.map-bar .t{font-size:16.3px; font-weight:750}
.map-bar .s{font-size:14.6px; color:var(--ink-4)}
.map-bar .btn{margin-left:auto}
.map-frame{flex:1; position:relative; min-height:0}
.map-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.map-load{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; background:var(--bg-soft); color:var(--ink-4); font-size:15.8px;
}
.spin{width:26px; height:26px; border:3px solid var(--line); border-top-color:var(--blue-600);
  border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:620px){ .map-bar{padding:10px 16px} .map-bar .s{display:none} }

/* ---------- 18. 등장 애니메이션 ---------- */
.rise{opacity:0; transform:translateY(18px); transition:opacity .62s var(--ease), transform .62s var(--ease)}
.rise.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rise{opacity:1; transform:none; transition:none} }

/* ---------- 19. 유틸 ---------- */
.stack-10 > * + *{margin-top:10px}
.stack-14 > * + *{margin-top:14px}
.stack-20 > * + *{margin-top:20px}
.mt-8{margin-top:8px} .mt-16{margin-top:16px} .mt-24{margin-top:24px}
.mt-32{margin-top:32px} .mt-44{margin-top:44px} .mt-64{margin-top:64px}
.skip{position:absolute; left:-9999px; top:0}
.skip:focus{left:12px; top:12px; z-index:200; background:#fff; padding:12px 18px; border-radius:var(--r-sm); box-shadow:var(--sh-2)}
@media print{ .hdr,.ftr,.cta,.btn,.waves,.ripples,.mnav{display:none !important} }