/* ============================================================
   Refund Japan — 한국어판
   실사한 한국 매체(토스피드·어피티·트래비·kr.trip.com·loop.day)에서:
   - 자간을 좁힌 굵은 제목(-0.02em, 700~800)
   - 본문 행간 1.75 (한글은 라틴보다 행간이 넓어야 읽힌다)
   - 회색 블록으로 섹션을 끊는다
   - 카드 모서리를 크게(12~16px) 굴린다
   - 표를 많이 쓴다
   웹폰트는 쓰지 않는다: 라이선스가 명확한 한글 웹폰트를 외부에서 받으면
   외부 요청이 생긴다(추적 0 원칙 위반). 한국 단말의 기본 한글 글꼴을 그대로 쓴다.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#17171c;
 font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
 font-size:16px;line-height:1.75;letter-spacing:-.01em;
 word-break:keep-all;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:#1b4bd6;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{letter-spacing:-.028em;line-height:1.35;margin:0}
b,strong{font-weight:700}
table{border-collapse:collapse}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- 상단 고지 띠 ---- */
.tick{background:#111827;color:#fff;font-size:13px;line-height:1.6}
.tick__in{max-width:1080px;margin:0 auto;padding:7px 20px;display:flex;gap:10px;
 align-items:center;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.tick__in::-webkit-scrollbar{display:none}
.tick__in>span{flex:0 0 auto}
.tick b{color:#ffd43b;font-weight:700}
.tick__sep{opacity:.35}

/* ---- 로고 줄 ---- */
.mast{border-bottom:1px solid #e5e8eb;background:#fff}
.mast__in{max-width:1080px;margin:0 auto;padding:11px 20px;display:flex;
 align-items:center;justify-content:space-between;gap:12px}
.logo{display:inline-flex;align-items:center;gap:9px;color:#17171c;font-size:20px;
 font-weight:800;letter-spacing:-.04em}
.logo__m{width:34px;height:34px;flex:0 0 auto}
.logo__w{white-space:nowrap}
.logo:hover{text-decoration:none}
.logo b{color:#2563f0;font-weight:800}
.logo__s{display:none;font-size:12px;font-weight:500;color:#6b7684;letter-spacing:-.02em;
 margin-left:8px}
.lang{display:flex;gap:1px;align-items:center;flex:0 0 auto;overflow-x:auto;
 scrollbar-width:none}
.lang::-webkit-scrollbar{display:none}
.lang a{font-size:11.5px;color:#6b7684;padding:4px 6px;border-radius:6px;line-height:1.4;
 white-space:nowrap}
.lang a:hover{background:#f2f4f6;text-decoration:none}
.lang a[aria-current]{background:#eef3ff;color:#1b4bd6;font-weight:700}

/* ---- 가로 스크롤 탭 (한국 모바일 표준) ---- */
.gnb{border-bottom:1px solid #e5e8eb;background:#fff;position:sticky;top:0;z-index:20}
.gnb__in{max-width:1080px;margin:0 auto;padding:0 20px;display:flex;gap:4px;
 overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gnb__in::-webkit-scrollbar{display:none}
.gnb a{flex:0 0 auto;padding:13px 12px;font-size:15px;font-weight:600;color:#4e5968;
 border-bottom:2.5px solid transparent;letter-spacing:-.03em;white-space:nowrap}
.gnb a:hover{color:#17171c;text-decoration:none}
.gnb a[aria-current]{color:#2563f0;border-bottom-color:#2563f0}
.gnb .gnb__calc{color:#2563f0}

/* ---- 빵부스러기 ---- */
.crumb{font-size:13px;color:#8b95a1;padding:14px 0 0}
.crumb a{color:#8b95a1}
.crumb span{padding:0 5px;opacity:.6}

/* ---- 기사 머리 (한국 매체: 분류칩 + 제목 + 부제 + 갱신일) ---- */
.head{padding:14px 0 4px}
.chip{display:inline-block;font-size:12px;font-weight:700;letter-spacing:-.02em;
 padding:4px 9px;border-radius:999px;background:#eef3ff;color:#1b4bd6}
.chip--warn{background:#fff4e6;color:#b45309}
.chip--new{background:#ffe9e9;color:#d13438}
h1{font-size:27px;font-weight:800;margin:10px 0 0}
.sub{font-size:17px;color:#4e5968;font-weight:600;margin:10px 0 0;letter-spacing:-.03em}
.meta{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:#8b95a1;margin:14px 0 0;
 padding:0 0 16px;border-bottom:1px solid #e5e8eb}
.lede{font-size:17px;margin:20px 0 0;color:#333d4b}

/* ---- 3줄 정리 박스 (한국 매체의 '정리') ---- */
.sum{margin:22px 0 0;border:1px solid #dbe2ea;border-radius:14px;background:#f7f9fc;
 padding:18px 18px 16px}
.sum__t{font-size:13px;font-weight:800;color:#2563f0;letter-spacing:-.02em;margin:0}
.sum ul{margin:10px 0 0;padding:0;list-style:none}
.sum li{position:relative;padding:0 0 0 22px;margin:8px 0 0;font-size:16px;color:#17171c}
.sum li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;
 border-radius:50%;background:#2563f0}
.sum li b{color:#17171c;background:linear-gradient(transparent 62%,#dbe7ff 62%)}

/* ---- 목차 (한국 매체는 첫 h2 위에 번호 목차를 둔다) ---- */
.toc{margin:24px 0 0;border:1px solid #e5e8eb;border-radius:14px;padding:16px 18px}
.toc__t{font-size:13px;font-weight:800;color:#4e5968;margin:0 0 8px}
.toc ol{margin:0;padding:0 0 0 20px}
.toc li{margin:5px 0;font-size:15px;letter-spacing:-.02em}
.toc a{color:#333d4b}

/* ---- 본문 ---- */
main{display:block}
.body{padding:0 0 8px}
.body h2{font-size:22px;font-weight:800;margin:44px 0 0;padding:0 0 0 14px;
 border-left:4px solid #2563f0}
.body h3{font-size:18px;font-weight:700;margin:28px 0 0;color:#17171c}
.body p{margin:14px 0 0;font-size:16px;color:#333d4b}
.body ul,.body ol{margin:14px 0 0;padding:0 0 0 20px}
.body li{margin:7px 0;font-size:16px;color:#333d4b}
.body h2+p,.body h3+p{margin-top:12px}

/* 강조: 형광펜 (한국 매체가 가장 많이 쓰는 강조) */
.hl{background:linear-gradient(transparent 60%,#ffe8a3 60%);font-weight:700;color:#17171c}
.num{font-weight:800;color:#17171c;letter-spacing:-.03em}

/* ---- 콜아웃 (실사: 꿀팁 4 · 주의 2 · 정리 1) ---- */
.note{margin:20px 0 0;border-radius:12px;padding:15px 16px;font-size:15px;
 border:1px solid #dbe2ea;background:#f7f9fc;color:#333d4b}
.note__t{display:inline-block;font-size:12px;font-weight:800;letter-spacing:-.02em;
 padding:3px 8px;border-radius:6px;background:#2563f0;color:#fff;margin:0 0 8px}
.note p{margin:0;font-size:15px}
.note p+p{margin-top:8px}
.note--warn{background:#fff8f0;border-color:#f3d9b8}
.note--warn .note__t{background:#b45309}
.note--stop{background:#fff5f5;border-color:#f5c9c9}
.note--stop .note__t{background:#d13438}

/* ---- 표 (한국 매체는 비교를 표로 준다) ---- */
.tw{margin:20px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
 border:1px solid #e5e8eb;border-radius:12px}
table.t{width:100%;font-size:15px;background:#fff}
table.t th,table.t td{padding:12px 14px;border-bottom:1px solid #eef1f4;text-align:left;
 vertical-align:top;letter-spacing:-.02em}
table.t thead th{background:#f7f9fc;font-weight:700;color:#4e5968;font-size:13px;
 white-space:nowrap}
table.t tbody th{font-weight:700;color:#17171c;white-space:nowrap}
table.t tr:last-child th,table.t tr:last-child td{border-bottom:0}
table.t .ok{color:#0a7d3e;font-weight:700}
table.t .no{color:#8b95a1}

/* ---- 도해 (자체 제작 SVG) ---- */
figure{margin:24px 0 0}
figure img{width:100%;border:1px solid #e5e8eb;border-radius:14px;background:#fff}
figcaption{margin:9px 2px 0;font-size:13px;color:#8b95a1;letter-spacing:-.02em}

/* ---- 먼저 읽을 3가지 (분류보다 위의 직행 입구) ---- */
.jump{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.jump a{display:block;border:1px solid #dbe2ea;border-radius:14px;padding:15px 16px;
 background:#fff}
.jump a:hover{border-color:#2563f0;text-decoration:none;background:#fbfcff}
.jump__q{display:block;font-size:16px;font-weight:700;color:#17171c;letter-spacing:-.03em}
.jump__a{display:block;font-size:14px;color:#6b7684;margin:5px 0 0}

/* ---- 단계 카드 ---- */
.stage{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.stage a{display:block;border:1px solid #e5e8eb;border-radius:16px;padding:18px;
 background:#fff}
.stage a:hover{border-color:#2563f0;background:#fbfcff;text-decoration:none}
.stage__n{display:inline-block;font-size:12px;font-weight:800;color:#2563f0;
 background:#eef3ff;border-radius:6px;padding:2px 7px}
.stage__t{display:block;font-size:18px;font-weight:800;color:#17171c;margin:9px 0 0;
 letter-spacing:-.03em}
.stage__d{display:block;font-size:14.5px;color:#6b7684;margin:6px 0 0}

/* ---- 회색 블록 (섹션 구분) ---- */
.band{background:#f7f8fa;margin:48px 0 0;padding:40px 0 44px;border-top:1px solid #eef1f4}
.band h2{font-size:22px;font-weight:800;margin:0}
.band p.band__d{margin:10px 0 0;color:#4e5968;font-size:16px}

/* ---- 글 목록 (자동 투고가 채우는 자리) ---- */
.cards{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.card{margin:0}
.card__a{display:block;border:1px solid #e5e8eb;border-radius:14px;padding:16px;
 background:#fff}
.card__a:hover{border-color:#2563f0;background:#fbfcff;text-decoration:none}
.card__cat{display:inline-block;font-size:11.5px;font-weight:800;color:#1b4bd6;
 background:#eef3ff;border-radius:5px;padding:2px 7px;letter-spacing:-.02em}
.card__t{display:block;font-size:17px;font-weight:700;color:#17171c;margin:8px 0 0;
 letter-spacing:-.03em;line-height:1.45}
.card__s{display:block;font-size:14.5px;color:#6b7684;margin:6px 0 0;line-height:1.6}

/* ---- 링크 목록 ---- */
.links{margin:14px 0 0;padding:0;list-style:none;border-top:1px solid #eef1f4}
.links li{border-bottom:1px solid #eef1f4}
.links a{display:block;padding:13px 22px 13px 2px;font-size:16px;color:#17171c;
 position:relative;letter-spacing:-.02em}
.links a:hover{color:#2563f0;text-decoration:none}
.links a::after{content:"›";position:absolute;right:6px;top:50%;
 transform:translateY(-52%);color:#c3c9d1;font-size:19px}
.links .links__s{display:block;font-size:13.5px;color:#8b95a1;margin:2px 0 0}

/* ---- 다음 導線 ---- */
.next{margin:36px 0 0;border-top:2px solid #17171c;padding:18px 0 0}
.next__t{font-size:16px;font-weight:800;margin:0}
.go{display:inline-flex;align-items:center;gap:6px;margin:16px 8px 0 0;padding:13px 18px;
 border-radius:12px;background:#2563f0;color:#fff;font-weight:700;font-size:15.5px;
 letter-spacing:-.03em}
.go:hover{background:#1b4bd6;text-decoration:none}
.go--sub{background:#f2f4f6;color:#17171c}
.go--sub:hover{background:#e5e8eb}

/* ---- 미발표 추적 ---- */
.pend{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.pend li{border:1px dashed #d0d7de;border-radius:12px;padding:13px 15px;background:#fff;
 font-size:15px;color:#333d4b}
.pend b{display:block;font-size:15.5px;color:#17171c;letter-spacing:-.03em}
.pend span{display:block;font-size:13.5px;color:#8b95a1;margin:3px 0 0}

/* ---- FAQ ---- */
.faq{margin:18px 0 0}
.faq dt{font-size:16.5px;font-weight:700;color:#17171c;margin:20px 0 0;letter-spacing:-.03em}
.faq dt::before{content:"Q. ";color:#2563f0;font-weight:800}
.faq dd{margin:8px 0 0;font-size:15.5px;color:#4e5968}

/* ---- 계산기 ---- */
.calc{margin:24px 0 0;border:1px solid #dbe2ea;border-radius:16px;background:#f7f9fc;
 padding:20px}
.calc__t{font-size:18px;font-weight:800;margin:0;letter-spacing:-.03em}
.calc__s{font-size:14px;color:#6b7684;margin:6px 0 0}
.seg{display:inline-flex;margin:16px 0 0;background:#e9edf2;border-radius:10px;padding:3px}
.seg button{border:0;background:transparent;font:inherit;font-size:14px;font-weight:700;
 color:#6b7684;padding:8px 14px;border-radius:8px;cursor:pointer;letter-spacing:-.02em}
.seg button[aria-pressed="true"]{background:#fff;color:#17171c}
.lab{display:block;font-size:13px;font-weight:700;color:#4e5968;margin:16px 0 6px}
.inp{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #dbe2ea;
 border-radius:12px;padding:12px 14px}
.inp span{font-size:18px;font-weight:800;color:#8b95a1}
.num-in{border:0;outline:0;font:inherit;font-size:20px;font-weight:800;width:100%;
 letter-spacing:-.03em;color:#17171c;background:transparent}
.res{margin:16px 0 0;background:#fff;border:1px solid #dbe2ea;border-radius:12px;padding:16px}
.res__l{font-size:13px;font-weight:700;color:#6b7684;margin:0}
.res__n{font-size:32px;font-weight:800;letter-spacing:-.045em;margin:4px 0 0;color:#2563f0}
.res__x{font-size:13px;color:#8b95a1;margin:8px 0 0}
.res__w{font-size:13.5px;color:#d13438;font-weight:700;margin:8px 0 0;display:none}
.rows{margin:14px 0 0}
.row{display:flex;justify-content:space-between;font-size:14.5px;padding:9px 2px;
 border-bottom:1px solid #eef1f4}
.row:last-child{border-bottom:0}
.row span{color:#6b7684}
.row b{color:#17171c}
.row .na{color:#8b95a1;font-weight:600}

/* ---- 출처 ---- */
.src{margin:20px 0 0;padding:0;list-style:none}
.src li{font-size:14.5px;color:#4e5968;padding:9px 0;border-bottom:1px solid #eef1f4}
.src li:last-child{border-bottom:0}
.src .d{color:#8b95a1;font-size:13px}

/* ---- 색인 ---- */
.idx{margin:20px 0 0}
.idx h3{font-size:16px;font-weight:800;margin:26px 0 0;color:#2563f0}

/* ---- 본문 + 사이드바 (블로그 목록 · 색인) ---- */
.two{display:grid;gap:30px;align-items:start}
.side{margin:0}
.side__b{border:1px solid #e5e8eb;border-radius:14px;padding:16px 18px;margin:0 0 14px;
 background:#fff}
.side__t{font-size:14px;font-weight:800;margin:0 0 8px;color:#17171c}
.side .links{margin:6px 0 0;border-top:0}
.side .links a{padding:10px 20px 10px 2px;font-size:15px}
.cat{list-style:none;margin:0;padding:0}
.cat li{display:flex;justify-content:space-between;gap:10px;font-size:14.5px;padding:6px 0;
 letter-spacing:-.02em}
.cat li a{color:#4e5968}
.cat__s{display:block!important;border-top:1px solid #eef1f4;margin-top:10px;padding-top:12px}
.cat__s:first-child{border-top:0;margin-top:0;padding-top:0}
.cat__s a{color:#17171c;font-weight:800;font-size:15.5px}
.cat__n{color:#8b95a1;font-size:13px;font-weight:600;flex:0 0 auto}
.cnt{font-size:13px;color:#8b95a1;font-weight:600;letter-spacing:0}

/* ---- 푸터 ---- */
footer{margin:56px 0 0;border-top:1px solid #e5e8eb;background:#fafbfc;
 padding:34px 0 40px}
.fcols{display:grid;gap:24px}
.fcol h2{font-size:13px;font-weight:800;color:#8b95a1;margin:0 0 10px;letter-spacing:0}
.fcol a{display:block;font-size:14.5px;color:#4e5968;padding:5px 0}
.fnote{margin:26px 0 0;padding:18px 0 0;border-top:1px solid #e5e8eb;font-size:13px;
 color:#8b95a1;line-height:1.7}
.fnote a{color:#6b7684;text-decoration:underline}

/* ---- 작은 화면에서 로고 줄이 넘치지 않게 ---- */
@media(max-width:720px){
 .mast__in{gap:8px;padding:10px 16px}
 .logo{font-size:17.5px;gap:7px}
 .logo__m{width:28px;height:28px}
 .lang a{font-size:11px;padding:4px 5px}
 .wrap,.narrow{padding:0 16px}
 .tick__in{padding:7px 16px}
 .gnb__in{padding:0 16px}
}

/* ---- 태블릿/데스크톱 ---- */
@media(min-width:721px){
 .logo__s{display:inline}
 h1{font-size:36px}
 .sub{font-size:19px}
 .lede{font-size:18px}
 .body h2{font-size:26px;margin-top:56px}
 .body h3{font-size:20px}
 .jump{grid-template-columns:1fr 1fr 1fr}
 .stage{grid-template-columns:1fr 1fr}
 .cards{grid-template-columns:1fr 1fr}
 .fcols{grid-template-columns:1fr 1fr 1fr}
 .res__n{font-size:40px}
 .split{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;align-items:start}
 .band{padding:52px 0 56px}
}
@media(min-width:961px){
 h1{font-size:40px}
 .stage{grid-template-columns:1fr 1fr 1fr}
 .two{grid-template-columns:minmax(0,1fr) 290px}
 .side{position:sticky;top:70px}
 .two .cards{grid-template-columns:1fr}
}