/* 생성 파일 — scripts/build_sf_detail.py. 브로슈어 공통 + 원고 sf_detail.css */
@font-face{font-family: "ROKAF Sans";
      src: url("/brochure-assets/fonts/ROKAFSansMedium.woff") format("woff");
      font-weight: 300 500; font-style: normal; font-display: swap;
      unicode-range: U+0-AF, U+B2-D6, U+D8-F6, U+F8-2031, U+2034-2102, U+2104-2108, U+210A-2112, U+2114-21FF, U+2300-10FFFF;}
@font-face{font-family: "ROKAF Sans";
      src: url("/brochure-assets/fonts/ROKAFSansBold.woff") format("woff");
      font-weight: 600 900; font-style: normal; font-display: swap;
      unicode-range: U+0-AF, U+B2-D6, U+D8-F6, U+F8-2031, U+2034-2102, U+2104-2108, U+210A-2112, U+2114-21FF, U+2300-10FFFF;}
@font-face{font-family: "ROKAF Slab Serif";
      src: url("/brochure-assets/fonts/ROKAFSlabSerifMedium.woff") format("woff");
      font-weight: 300 500; font-style: normal; font-display: swap;
      unicode-range: U+0-AF, U+B2-D6, U+D8-F6, U+F8-2031, U+2034-2102, U+2104-2108, U+210A-2112, U+2114-21FF, U+2300-10FFFF;}
@font-face{font-family: "ROKAF Slab Serif";
      src: url("/brochure-assets/fonts/ROKAFSlabSerifBold.woff") format("woff");
      font-weight: 600 900; font-style: normal; font-display: swap;
      unicode-range: U+0-AF, U+B2-D6, U+D8-F6, U+F8-2031, U+2034-2102, U+2104-2108, U+210A-2112, U+2114-21FF, U+2300-10FFFF;}
:root{--navy: #001767;
      --navy-hover: #003d9a;
      --blue: #003d9a;
      --mint: #83e3e0;
      --deep: #191a5b;
      --ink: #14161a;
      --ink-2: #3d434d;
      --ink-3: #4d5460;
      --muted: #6b7280;
      --muted-2: #9aa1ad;
      --pale: #c3c9d4;
      --line: #e3e6ec;
      --line-2: #dfe2e9;
      --line-3: #e9ebf0;
      --soft: #f7f8fa;
      --hover: #f2f4f8;
      --danger: #c62838;
      --warn: #b06a12;
      --ok: #0b7a53;
      --font: "ROKAF Sans", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Segoe UI", sans-serif;
      
      --font-head: "ROKAF Slab Serif", "ROKAF Sans", -apple-system, "Apple SD Gothic Neo", serif;
      --font-num: "ROKAF Slab Serif", "ROKAF Sans", -apple-system, "Apple SD Gothic Neo", serif;
      --code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;}
*{box-sizing: border-box;}
html{scroll-behavior: smooth;}
body{margin: 0; background: #fff; color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased;}
a{color: inherit; text-decoration: none;}
h1, h2, h3, h4{margin: 0; font-weight: 700; word-break: keep-all;}
h1, h2, h3{font-family: var(--font-head);}
h1{letter-spacing: -0.01em;}
p{margin: 0; word-break: keep-all;}
img{display: block; max-width: 100%;}
.wrap{max-width: 1180px; margin: 0 auto; padding: 0 24px;}
.topbar .wrap{max-width: 1400px;}
.topbar{position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);}
.topbar-inner{display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 16px;}
.brand{display: flex; align-items: center; gap: 10px; flex: 0 0 auto;}
.brand-logo{height: 26px; width: auto;}
.brand-bar{width: 1px; height: 20px; background: var(--line);}
.brand-text b{display: block; font-family: var(--font-head); font-size: 19px; line-height: 1.1; color: var(--navy); letter-spacing: 0.02em;}
.brand-text span{display: block; font-size: 10.5px; font-weight: 600; line-height: 1.3; color: var(--muted-2); letter-spacing: 0.02em; white-space: nowrap;}
.gnb{display: flex; align-items: center; gap: 2px; flex: 0 0 auto;}
.gnb a{padding: 10px 4px; font-size: 12.5px; line-height: 1.5; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: color 0.2s;}
.gnb a:hover{color: var(--navy);}
.btn{display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 11px 18px; border: 0; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; transition: background 0.2s, border-color 0.2s, color 0.2s;}
.btn-navy{background: var(--navy); color: #fff;}
.btn-navy:hover{background: var(--navy-hover);}
.btn-line{border: 1px solid #c9d1e4; color: var(--navy); background: #fff;}
.btn-line:hover{border-color: var(--navy);}
.btn-sm{padding: 9px 14px; font-size: 14px;}
.btn-lg{padding: 16px 36px; font-size: 17px; line-height: 24px;}
.btn-lg.btn-line{padding: 16px 30px;}
.wrap-narrow{max-width: 880px; margin: 0 auto; padding-left: 24px; padding-right: 24px;}
footer{background: #0f0f10; color: rgba(255, 255, 255, 0.8); padding: 56px 0 28px;}
.foot{display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px;}
.foot-brand{display: flex; align-items: center; gap: 12px;}
.foot-brand img{height: 28px; width: auto; filter: brightness(0) invert(1); opacity: 0.9;}
.foot-brand i{width: 1px; height: 15px; background: rgba(255, 255, 255, 0.3);}
.foot-brand span{font-size: 15px; font-weight: 700; color: #fff;}
.foot-meta{margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; font-size: 14px; line-height: 1.6;}
.foot-meta .wide{grid-column: 1 / -1;}
.foot-meta span{color: rgba(255, 255, 255, 0.5); margin-right: 8px;}
.foot-meta b{font-weight: 400; color: rgba(255, 255, 255, 0.85);}
.foot-links{margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.85);}
.foot-links a:hover{color: #fff; text-decoration: underline;}
.foot-right{display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right;}
.foot-right p{font-size: 14px; color: rgba(255, 255, 255, 0.6);}
.foot-btn{display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); padding: 11px 20px; font-size: 14px; font-weight: 600; color: #fff; transition: background 0.2s;}
.foot-btn:hover{background: rgba(255, 255, 255, 0.16);}
.foot-bottom{margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; font-size: 13px; color: rgba(255, 255, 255, 0.45);}
.foot-bottom a:hover{color: rgba(255, 255, 255, 0.8);}
@media (max-width: 1519px){.gnb{display: none;}}
@media (max-width: 700px){.brand-text span{display: none;}.brand-logo{height: 22px;}.foot, .foot-meta{grid-template-columns: 1fr;}.foot-right{align-items: flex-start; text-align: left;}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto;}}
.brochure-tabs{position: sticky; top: 75px; z-index: 40; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px);}
.brochure-tabs-inner{display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;}
.brochure-tabs-inner::-webkit-scrollbar{display: none;}
.brochure-tab{position: relative; flex: none; border: 0; background: transparent; padding: 15px 20px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-2); cursor: pointer; white-space: nowrap;}
.brochure-tab:hover{color: var(--navy);}
.brochure-tab.is-on{color: var(--navy); font-weight: 900;}
.brochure-tab.is-on::after{content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--blue);}
@media (max-width: 720px){.brochure-tab{padding: 13px; font-size: 13px;}}
.sfd{--ink:#1d2140;--ink2:#4a5168;--ink3:#7b8296;--line:#e3e8f0;--sky:#eef6fc;--sky2:#dcecf8;--mint:#a8f4f0;--mint-d:#138a83;--mint-bg:#f1fbfa;--white:#fff}
*{box-sizing:border-box}
.sfd{font-family:"ROKAF Sans",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Segoe UI",sans-serif;color:var(--ink);background:var(--white);line-height:1.65;word-break:keep-all;-webkit-font-smoothing:antialiased}
.sfd a{color:inherit}
.sfd-wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.sfd-crumb{font-size:14px;color:var(--ink3);padding:22px 0 0}
.sfd-crumb a{text-decoration:none;color:var(--ink2)}.sfd-crumb a:hover{color:var(--mint-d)}
.sfd-crumb span{margin:0 8px;color:#b6bccb}
.sfd-hero{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center;padding:28px 0 56px}
.sfd-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--mint-d);background:var(--mint-bg);border:1px solid var(--mint);border-radius:999px;padding:5px 12px}
.sfd-hero h1{font-size:40px;line-height:1.25;margin:16px 0 10px;letter-spacing:-.02em}
.sfd-hero .sfd-claim{font-size:21px;font-weight:700;margin:0 0 12px;color:var(--ink)}
.sfd-hero .sfd-lead{font-size:17px;color:var(--ink2);margin:0 0 26px}
.sfd-cta{display:flex;flex-wrap:wrap;gap:10px}
.sfd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:10px;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;border:1.5px solid var(--ink);background:var(--white);color:var(--ink);font-family:inherit}
.sfd-btn.primary{background:var(--ink);color:#fff}
.sfd-btn.mint{border-color:var(--mint-d);color:var(--mint-d)}
.sfd-ba{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--sky);box-shadow:0 18px 40px -24px rgba(29,33,64,.45);--pos:50%}
.sfd-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sfd-ba .b{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.sfd-ba .bar{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.sfd-ba .knob{position:absolute;top:50%;left:var(--pos);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);display:grid;place-items:center;font-size:15px;font-weight:700;color:var(--ink);pointer-events:none}
.sfd-ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:pan-y}
.sfd-ba .lb{position:absolute;top:14px;font-size:13px;font-weight:700;background:rgba(255,255,255,.92);color:var(--ink);padding:4px 10px;border-radius:6px}
.sfd-ba .lb.l{left:14px}.sfd-ba .lb.r{right:14px}
.sfd-ba .cap{position:absolute;bottom:14px;font-size:13px;color:#fff;background:rgba(29,33,64,.62);padding:4px 10px;border-radius:6px}
.sfd-ba .cap.l{left:14px}.sfd-ba .cap.r{right:14px}
.sfd-img{position:relative;aspect-ratio:16/7.7;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(29,33,64,.45)}
.sfd-img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.sfd-sec{padding:64px 0;border-top:1px solid var(--line)}
.sfd-sec.sky{background:var(--sky);border-top:0}
.sfd-sec.mintbg{background:var(--mint-bg);border-top:0}
.sfd-h{display:flex;align-items:baseline;gap:14px;margin:0 0 28px}
.sfd-h b{font-size:15px;color:var(--mint-d);font-weight:800;letter-spacing:.04em}
.sfd-h h2{font-size:28px;margin:0;letter-spacing:-.01em}
.sfd-h p{margin:0;color:var(--ink3);font-size:15px}
.sfd-situ{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sfd-situ li{list-style:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px 18px 52px;position:relative;font-size:17px}
.sfd-situ li:before{content:"?";position:absolute;left:18px;top:17px;width:24px;height:24px;border-radius:50%;background:var(--mint);color:var(--ink);font-weight:800;font-size:14px;display:grid;place-items:center}
.sfd-situ{padding:0;margin:0}
.sfd-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:st;margin:0;padding:0}
.sfd-steps li{list-style:none;position:relative;padding:0 18px 0 0}
.sfd-steps li .n{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sfd-steps li .n i{font-style:normal;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;flex:none}
.sfd-steps li .n:after{content:"";flex:1;height:2px;background:var(--sky2)}
.sfd-steps li:last-child .n:after{display:none}
.sfd-steps li h3{font-size:19px;margin:0 0 6px}
.sfd-steps li p{margin:0;color:var(--ink2);font-size:15.5px}
.sfd-list{margin:0 0 8px;padding:0}
.sfd-list li{list-style:none;padding:10px 0 10px 26px;position:relative;font-size:17px;border-bottom:1px dashed var(--line)}
.sfd-list li:before{content:"";position:absolute;left:4px;top:20px;width:10px;height:10px;border-radius:3px;background:var(--mint)}
.sfd-tables{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin-top:26px}
.sfd-tbl{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sfd-tbl h3{margin:0;font-size:16px;padding:14px 18px;background:var(--sky);border-bottom:1px solid var(--line)}
.sfd-tbl table{width:100%;border-collapse:collapse;font-size:15.5px}
.sfd-tbl td{padding:11px 18px;border-top:1px solid var(--line);vertical-align:top}
.sfd-tbl tr:first-child td{border-top:0}
.sfd-tbl td:first-child{width:32%;font-weight:700;color:var(--ink);white-space:nowrap}
.sfd-tbl td:last-child{color:var(--ink2)}
.sfd-infra{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.sfd-infra article{background:#fff;border:1px solid #cdeee9;border-radius:14px;padding:20px}
.sfd-infra .tag{display:inline-block;font-size:13px;font-weight:800;color:var(--mint-d);background:var(--mint-bg);border:1px solid var(--mint);border-radius:6px;padding:2px 9px;margin-bottom:10px}
.sfd-infra h3{font-size:18px;margin:0 0 6px}
.sfd-infra p{margin:0;color:var(--ink2);font-size:15.5px}
.sfd-cred{display:flex;flex-wrap:wrap;gap:8px 18px;margin:24px 0 0;padding:16px 18px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:14.5px;color:var(--ink2)}
.sfd-cred b{color:var(--ink);margin-right:6px}
.sfd-eff{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sfd-eff article{border-top:3px solid var(--ink);padding:16px 2px 0}
.sfd-eff h3{font-size:20px;margin:0 0 6px}
.sfd-eff p{margin:0;color:var(--ink2);font-size:16px}
.sfd-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0}
.sfd-chips a,.sfd-chips span{display:inline-block;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:15px;text-decoration:none;color:var(--ink)}
.sfd-chips a:hover{border-color:var(--mint-d);color:var(--mint-d)}
.sfd-recs{width:100%;border-collapse:collapse;font-size:16px}
.sfd-recs th,.sfd-recs td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.sfd-recs th{font-size:14px;color:var(--ink3);font-weight:600;background:var(--sky)}
.sfd-note{margin:16px 0 0;font-size:15px;color:var(--ink2)}
.sfd-end{background:var(--sky);padding:48px 0;text-align:center}
.sfd-end h2{font-size:26px;margin:0 0 8px}
.sfd-end p{margin:0 0 22px;color:var(--ink2)}
.sfd-end .sfd-cta{justify-content:center}
.sfd-others{padding:40px 0 64px}
.sfd-others h2{font-size:18px;margin:0 0 14px;color:var(--ink2)}
@media (max-width:860px){
 .sfd-hero{grid-template-columns:1fr;gap:26px;padding-bottom:40px}
 .sfd-hero h1{font-size:30px}
 .sfd-situ,.sfd-eff{grid-template-columns:1fr}
 .sfd-steps{grid-template-columns:1fr;gap:18px}
 .sfd-steps li .n:after{display:none}
 .sfd-sec{padding:44px 0}
 .sfd-h{flex-wrap:wrap;gap:6px 12px}
 .sfd-h h2{font-size:23px}
 .sfd-tbl td:first-child{white-space:normal}
}

/* ── build_sf_detail.py 가 덧붙인 부분 ── */
/* 슬라이더: 영역 어디를 끌어도 움직이게 JS(포인터)로 처리한다. range 는 키보드용으로만 남긴다 */
.sfd-ba{touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.sfd-ba input{pointer-events:none}
.sfd-ba:focus-within{outline:3px solid var(--mint-d);outline-offset:3px}
.sfd-ba img{-webkit-user-drag:none;user-select:none}
/* 히어로 이미지가 없는 페이지 */
.sfd-hero.sfd-hero-text{grid-template-columns:1fr;max-width:760px}
/* 원고는 body 에 class="sfd" 를 걸었지만, 상단 메뉴가 브로슈어 변수(--ink 등)를 쓰므로 main 에 건다 */
main.sfd{display:block}
.sfd-btn.on{background:var(--mint-bg);border-color:var(--mint-d);color:var(--mint-d)}