/* 수리왕 김복구 공통 스타일 — _design/build_css.py 가 만든 파일입니다. 직접 고치지 말고 _design/v2.css 를 고친 뒤 다시 만드세요. */
/* ── 1부: 기존 페이지 규칙(legacy) ── */
:root{--primary-color:#003366;--accent-color:#4CAF50;--accent-strong:#2E7D32;--accent-strong:#2E7D32;--highlight-color:#FFC107;--bg-light:#f8f9fa;--text-dark:#333;--text-gray:#666;--naver-green:#03C75A}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;color:var(--text-dark);line-height:1.6;overflow-x:hidden;background:#fff}
a{text-decoration:none;color:inherit}
ul{list-style:none}
svg.ic{display:inline-block;vertical-align:middle;width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section-padding{padding:80px 0}
.text-center{text-align:center}
p{margin-bottom:1.5rem}
.animate-on-scroll{opacity:0;transform:translateY(30px);transition:all 0.8s ease-out}
.animate-on-scroll.visible{opacity:1;transform:translateY(0)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(76,175,80,0.7);}70%{box-shadow:0 0 0 15px rgba(76,175,80,0);}100%{box-shadow:0 0 0 0 rgba(76,175,80,0);}}
header{background:rgba(255,255,255,0.95);position:fixed;width:100%;top:0;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,0.1);backdrop-filter:blur(5px)}
.nav-container{display:flex;justify-content:space-between;align-items:center;height:70px}
.logo{font-size:1.5rem;font-weight:900;color:var(--primary-color);display:flex;align-items:center;gap:10px}
.nav-menu{display:flex;gap:25px}
.nav-menu a{font-weight:500;font-size:1rem;transition:color 0.3s;position:relative}
.nav-menu a:hover{color:var(--primary-color)}
.nav-menu a::after{content:'';position:absolute;width:0;height:2px;bottom:-5px;left:0;background-color:var(--accent-color);transition:width 0.3s}
.nav-menu a:hover::after{width:100%}
.hero{background:linear-gradient(135deg,var(--primary-color) 0%,#001f3f 100%);color:white;padding:170px 0 110px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;left:-20%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,rgba(0,0,0,0) 70%);pointer-events:none}
.hero h1{font-size:3.2rem;font-weight:900;margin-bottom:25px;line-height:1.25;text-shadow:0 2px 10px rgba(0,0,0,0.3)}
.hero p{font-size:1.25rem;opacity:0.9;margin-bottom:40px;font-weight:300}
.hero-tags{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin-bottom:40px}
.tag{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);padding:10px 25px;border-radius:50px;font-weight:500;backdrop-filter:blur(5px);display:flex;align-items:center;gap:8px}
.process-section{background:var(--bg-light)}
.section-title{font-size:2.4rem;color:var(--primary-color);margin-bottom:60px;font-weight:800;position:relative;display:inline-block}
.section-title-wrapper{text-align:center}
.section-title::after{content:'';display:block;width:60px;height:4px;background:var(--accent-color);margin:15px auto 0;border-radius:2px}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}
.step-card{background:white;padding:40px 30px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,0.05);text-align:center;transition:transform 0.3s,box-shadow 0.3s;position:relative;border:1px solid rgba(0,0,0,0.03)}
.step-card:hover{transform:translateY(-15px);box-shadow:0 15px 40px rgba(0,0,0,0.1)}
.step-num{background:var(--highlight-color);width:50px;height:50px;line-height:50px;border-radius:50%;font-weight:900;font-size:1.2rem;margin:0 auto 25px;color:var(--text-dark);box-shadow:0 5px 15px rgba(255,193,7,0.4)}
.step-card h3{margin-bottom:15px;font-size:1.4rem;font-weight:700}
.step-card p{font-size:1rem;color:var(--text-gray);margin-bottom:0}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px}
.why-item{display:flex;align-items:center;background:white;padding:28px 30px;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,0.05);border-left:6px solid var(--primary-color);transition:transform 0.3s}
.why-item:hover{transform:translateX(5px)}
.why-icon{font-size:2.2rem;margin-right:22px;color:var(--primary-color);width:55px;text-align:center}
.why-content h3{font-size:1.15rem;margin-bottom:5px;font-weight:700}
.why-content p{margin-bottom:0;color:var(--text-gray);font-size:0.95rem}
.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.link-item{display:flex;align-items:center;background:white;padding:24px 26px;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,0.05);border-left:6px solid var(--primary-color);transition:transform 0.3s}
.link-item:hover{transform:translateX(5px)}
.link-icon{font-size:1.9rem;margin-right:18px;color:var(--primary-color);width:45px;text-align:center}
.link-item h3{font-size:1.1rem;font-weight:700;margin-bottom:3px}
.link-item p{margin-bottom:0;color:var(--text-gray);font-size:0.9rem}
.faq-list{display:grid;gap:16px}
.faq-item{background:white;border:1px solid #eaecef;border-radius:15px;padding:26px 30px;box-shadow:0 4px 14px rgba(0,0,0,0.03)}
.faq-item h3{font-size:1.1rem;color:var(--primary-color);margin-bottom:10px;display:flex;gap:10px}
.faq-item h3 span{color:var(--accent-strong);font-weight:900}
.faq-item p{margin-bottom:0;color:var(--text-gray);font-size:0.98rem}
.method-section{background:var(--primary-color);color:white;position:relative}
.method-section .section-title{color:white}
.method-section .section-title::after{background:var(--highlight-color)}
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.method-card{background:rgba(255,255,255,0.08);padding:35px 22px;border-radius:15px;text-align:center;border:1px solid rgba(255,255,255,0.15);transition:background 0.3s,transform 0.3s}
.method-card:hover{background:rgba(255,255,255,0.15);transform:translateY(-5px)}
.method-card svg.ic{font-size:2.4rem;width:1em;height:1em;margin-bottom:18px;color:var(--highlight-color)}
.method-card h3{font-size:1.15rem;margin-bottom:8px}
.method-card p{font-size:0.9rem;color:rgba(255,255,255,0.7);margin-bottom:12px}
.data-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:20px;margin-bottom:60px}
.data-item{text-align:center;padding:25px 15px;border:1px solid #eee;border-radius:15px;transition:all 0.3s;background:white}
.data-item:hover{background:var(--bg-light);border-color:var(--accent-color);box-shadow:0 5px 15px rgba(0,0,0,0.05);transform:translateY(-5px)}
.data-item svg.ic{font-size:2.2rem;width:1em;height:1em;color:var(--text-gray);margin-bottom:15px;display:block;margin-left:auto;margin-right:auto;transition:color 0.3s}
.data-item:hover svg.ic{color:var(--accent-color)}
.special-services{display:grid;grid-template-columns:1fr;gap:40px;max-width:720px;margin:0 auto}
.service-box{background:#2a2a2a;color:white;padding:50px;border-radius:25px;box-shadow:0 15px 40px rgba(0,0,0,0.15)}
.service-box h3{margin-bottom:30px;font-size:1.8rem;border-bottom:3px solid var(--accent-color);display:inline-block;padding-bottom:10px}
.check-list li{margin-bottom:15px;font-size:1.05rem;display:flex;align-items:flex-start}
.check-list li svg.ic{color:var(--accent-color);margin-right:15px;font-size:1.2rem;width:1em;height:1em;flex:none;margin-top:5px}
.contact-container{display:grid;grid-template-columns:1fr 1.2fr;gap:0;background:white;border-radius:25px;box-shadow:0 20px 50px rgba(0,0,0,0.1);overflow:hidden}
.contact-info-area{padding:60px;display:flex;flex-direction:column;justify-content:center;background:white;z-index:1}
.contact-info-row{display:flex;align-items:flex-start;margin-bottom:30px;font-size:1.1rem}
.contact-icon{width:50px;height:50px;background:var(--bg-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:20px;color:var(--primary-color);font-size:1.2rem;flex-shrink:0;transition:background 0.3s,color 0.3s}
.contact-info-row:hover .contact-icon{background:var(--primary-color);color:white}
.contact-label{display:block;font-size:0.9rem;color:var(--text-gray);margin-bottom:5px}
.contact-value{font-weight:700;color:var(--text-dark)}
.naver-map-btn{display:inline-flex;align-items:center;gap:8px;background-color:var(--naver-green);color:white;padding:12px 25px;border-radius:8px;margin-top:15px;font-size:0.95rem;font-weight:700;transition:background 0.3s,transform 0.2s;border:none}
.naver-map-btn:hover{background-color:#02a348;transform:translateY(-2px)}
.map-area{position:relative;min-height:100%;background:#eee}
.map-frame{display:block;width:100%;height:100%;min-height:450px;border:0;filter:grayscale(20%)}
.map-fallback{width:100%;height:100%;min-height:450px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-gray);background:var(--bg-light)}
.map-fallback svg.ic{width:2em;height:2em;font-size:2rem}
.map-overlay{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:14px 16px;background:rgba(255,255,255,0.96);border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.15)}
.map-overlay-text{font-size:0.88rem;color:var(--text-dark);line-height:1.5}
.map-overlay-text strong{display:block;color:var(--primary-color);font-weight:800;font-size:0.95rem}
.map-overlay-btn{display:inline-flex;align-items:center;gap:6px;background:var(--naver-green);color:#fff;padding:9px 16px;border-radius:8px;font-size:0.85rem;font-weight:700;white-space:nowrap;transition:background 0.3s}
.map-overlay-btn:hover{background:#02a348}
.cta-buttons{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.action-btn.btn-kakao{background:#FEE500;color:#191600}
.top-cta-btn.btn-kakao{background:#FEE500;color:#191600;box-shadow:0 10px 25px rgba(254,229,0,0.35)}
.top-cta-btn.btn-kakao:hover{box-shadow:0 15px 30px rgba(254,229,0,0.45)}
.trust-bar{background:var(--bg-light);border-bottom:1px solid #e9ecef;padding:26px 0}
.trust-grid{display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;gap:14px}
.trust-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e9ecef;border-radius:14px;padding:16px 24px;box-shadow:0 4px 14px rgba(0,0,0,0.04)}
.trust-item svg.ic{color:var(--accent-color);font-size:1.4rem;width:1em;height:1em;flex:none}
.trust-item strong{display:block;font-size:1.02rem;font-weight:800;color:var(--text-dark);line-height:1.35}
.trust-item small{display:block;font-size:0.83rem;font-weight:500;color:var(--text-gray);margin-top:3px}
.consult-section{background:var(--primary-color);color:#fff}
.consult-wrap{max-width:720px;margin:0 auto;background:#fff;color:var(--text-dark);border-radius:25px;padding:45px 45px 38px;box-shadow:0 20px 50px rgba(0,0,0,0.18)}
.consult-wrap h3{font-size:1.55rem;font-weight:800;margin-bottom:8px;color:var(--primary-color)}
.consult-lead{color:var(--text-gray);font-size:0.97rem;margin-bottom:26px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{display:flex;flex-direction:column;gap:7px}
.form-field.full{grid-column:1 / -1}
.form-field label{font-size:0.9rem;font-weight:700;color:var(--text-dark)}
.form-field input,.form-field select,.form-field textarea{font-family:inherit;font-size:1rem;padding:14px 15px;border:1px solid #dfe3e8;border-radius:10px;background:#fff;color:var(--text-dark);width:100%;transition:border-color 0.2s,box-shadow 0.2s}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px rgba(76,175,80,0.16)}
.form-field textarea{min-height:112px;resize:vertical}
.form-submit{grid-column:1 / -1;margin-top:4px;border:none;cursor:pointer;font-family:inherit;background:var(--accent-strong);color:#fff;padding:17px;border-radius:50px;font-size:1.1rem;font-weight:800;box-shadow:0 10px 25px rgba(76,175,80,0.35);transition:transform 0.2s,box-shadow 0.2s}
.form-submit:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(76,175,80,0.45)}
.form-note{grid-column:1 / -1;font-size:0.87rem;color:var(--text-gray);margin:2px 0 0;text-align:center}
.form-hp{position:absolute;left:-9999px}
.consult-alt{text-align:center;margin:26px 0 0;color:rgba(255,255,255,0.88);font-size:0.96rem}
.consult-alt a{color:var(--highlight-color);font-weight:700;text-decoration:underline}
.figure-block{max-width:900px;margin:46px auto 0}
.figure-block img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 14px 36px rgba(0,0,0,0.12);background:#eef1f4}
.figure-block figcaption{margin-top:14px;font-size:0.92rem;line-height:1.6;color:var(--text-gray);text-align:center;word-break:keep-all}
.method-section .figure-block figcaption{color:rgba(255,255,255,0.75)}
.ref-tag{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:999px;background:#eef1f4;color:#5F6870;font-size:0.76rem;font-weight:700;vertical-align:middle;white-space:nowrap}
.method-section .ref-tag{background:rgba(255,255,255,0.16);color:rgba(255,255,255,0.8)}
.real-tag{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:999px;background:#e6f4ea;color:#1e7e34;font-size:0.76rem;font-weight:700;vertical-align:middle;white-space:nowrap}
.method-section .real-tag{background:rgba(255,255,255,0.18);color:#d7f5df}
.ask-hint{background:#fffdf3;border:1px solid #f5e6b8;border-left:5px solid var(--highlight-color);border-radius:12px;padding:18px 20px;margin:4px 0 30px}
.ask-hint strong{display:block;font-size:0.98rem;font-weight:800;color:var(--text-dark);margin-bottom:10px}
.ask-hint ol{margin:0;padding-left:20px}
.ask-hint li{font-size:0.93rem;color:var(--text-gray);line-height:1.75;list-style:decimal}
.ask-hint .ask-note{display:block;margin-top:12px;font-size:0.88rem;color:var(--accent-strong);font-weight:700}
.logo{padding:4px 0}
.logo img{display:block;height:34px;width:auto}
.footer-logo{display:block;height:30px;width:auto;margin:0 auto 24px;opacity:0.92}
:root{--font-sans:'IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;--font-mono:'IBM Plex Mono','IBM Plex Sans KR',ui-monospace,monospace}
body{font-family:var(--font-sans);letter-spacing:-0.01em}
h1,h2,h3,.section-title,.hero h1{letter-spacing:-0.035em}
.hero h1{font-weight:700}
.readout{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0}
body{font-variant-numeric:tabular-nums}
.top-cta-btn.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.55);box-shadow:none}
.top-cta-btn.btn-ghost:hover{background:rgba(255,255,255,0.12);border-color:#fff;box-shadow:none;transform:translateY(-2px)}
.kakao-btn{display:inline-flex;align-items:center;gap:8px;background:#FEE500;color:#191600;padding:12px 22px;border-radius:8px;margin-top:10px;font-size:0.95rem;font-weight:700;transition:filter 0.25s,transform 0.2s}
.kakao-btn:hover{filter:brightness(0.94);transform:translateY(-2px)}
.sticky-footer{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);display:flex;gap:15px;z-index:2000;width:90%;max-width:450px}
.action-btn{flex:1;padding:16px;border-radius:50px;text-align:center;font-weight:700;color:white;box-shadow:0 8px 20px rgba(0,0,0,0.25);display:flex;justify-content:center;align-items:center;gap:10px;cursor:pointer;transition:transform 0.2s;font-size:1.1rem}
.action-btn:active{transform:scale(0.95)}
.btn-call{background:var(--accent-strong);animation:pulse 2s infinite}
.btn-ship-sticky{background:var(--highlight-color);color:var(--text-dark)}
.top-cta-btn{display:inline-flex;align-items:center;gap:12px;background:var(--accent-strong);color:white;padding:18px 45px;border-radius:50px;font-weight:bold;font-size:1.15rem;box-shadow:0 10px 25px rgba(76,175,80,0.4);transition:transform 0.3s,box-shadow 0.3s}
.top-cta-btn:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(76,175,80,0.5)}
footer{background:#222;color:#949494;padding:60px 0 120px;text-align:center;font-size:0.85rem;border-top:1px solid #333}
img,svg,iframe,video{max-width:100%}
body{overflow-wrap:break-word}
.nav-toggle-cb{display:none}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;border-radius:8px;margin-right:-6px;-webkit-tap-highlight-color:transparent}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--primary-color);border-radius:2px;transition:transform 0.25s ease,opacity 0.2s ease}
.nav-toggle span.sr-only,.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;background:transparent}
.container-narrow{max-width:900px;margin:0 auto;padding:0 20px}
.breadcrumb{font-size:0.9rem;color:rgba(255,255,255,0.6);margin-bottom:22px}
.breadcrumb a{color:rgba(255,255,255,0.85);font-weight:500}
.breadcrumb a:hover{color:var(--highlight-color)}
.hero-note{margin-top:22px;font-size:0.95rem;color:rgba(255,255,255,0.75);margin-bottom:0}
.section-lead{text-align:center;color:var(--text-gray);margin:-35px auto 50px;max-width:760px}
.method-section .section-lead{color:rgba(255,255,255,0.75)}
.chance-badge{display:inline-block;font-size:0.8rem;font-weight:700;padding:5px 14px;border-radius:50px;background:rgba(76,175,80,0.25);color:#cdebd0;border:1px solid rgba(76,175,80,0.5)}
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
.case-card{background:white;border-radius:20px;padding:34px 30px;box-shadow:0 10px 30px rgba(0,0,0,0.05);border-top:5px solid var(--accent-color);transition:transform 0.3s,box-shadow 0.3s}
.case-card:hover{transform:translateY(-10px);box-shadow:0 15px 40px rgba(0,0,0,0.1)}
.case-model{font-size:0.85rem;font-weight:700;color:var(--accent-strong);letter-spacing:0.03em;margin-bottom:10px}
.case-card h3{font-size:1.25rem;font-weight:700;margin-bottom:12px;color:var(--primary-color)}
.case-card p{font-size:0.98rem;color:var(--text-gray);margin-bottom:16px}
.case-result{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text-dark);border-top:1px dashed #e3e6e8;padding-top:16px}
.case-result svg.ic{color:var(--accent-color);font-size:1.2rem;flex:none}
.notice-box{background:#FFFBEB;border:1px solid #FBE7A2;border-left:6px solid var(--highlight-color);border-radius:15px;padding:36px 38px}
.notice-box h3{font-size:1.4rem;color:var(--primary-color);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.notice-box h3 svg.ic{color:#B8860B;font-size:1.4rem}
.dont-list li{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;font-size:1.02rem}
.dont-list li:last-child{margin-bottom:0}
.dont-mark{flex:none;width:24px;height:24px;border-radius:50%;background:#8A6508;color:#fff;font-size:0.8rem;font-weight:900;display:flex;align-items:center;justify-content:center;margin-top:3px}
.dont-list b{color:var(--primary-color)}
.trust-box{background:white;border:1px solid #eee;border-radius:25px;padding:50px;box-shadow:0 15px 40px rgba(0,0,0,0.06)}
.trust-box h3{margin-bottom:30px;font-size:1.7rem;border-bottom:3px solid var(--accent-color);display:inline-block;padding-bottom:10px;color:var(--primary-color)}
.ship-section{background:linear-gradient(135deg,var(--primary-color) 0%,#001f3f 100%);color:white}
.ship-section .section-title{color:white}
.ship-section .section-lead{color:rgba(255,255,255,0.88)}
.ship-section .section-title::after{background:var(--highlight-color)}
.ship-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:stretch}
.ship-card{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);border-radius:20px;padding:40px}
.ship-card h3{font-size:1.3rem;margin-bottom:22px;display:flex;align-items:center;gap:12px}
.ship-card h3 svg.ic{color:var(--highlight-color)}
.ship-row{display:flex;gap:16px;margin-bottom:22px}
.ship-row:last-child{margin-bottom:0}
.ship-row svg.ic{color:var(--highlight-color);font-size:1.3rem;flex:none;margin-top:4px}
.ship-label{display:block;font-size:0.85rem;color:rgba(255,255,255,0.6);margin-bottom:3px}
.ship-value{font-weight:700;font-size:1.1rem}
.ship-value.big{font-size:1.35rem;letter-spacing:0.02em}
.ship-tips li{display:flex;gap:12px;margin-bottom:14px;font-size:0.98rem;color:rgba(255,255,255,0.85)}
.ship-tips li:last-child{margin-bottom:0}
.ship-tips svg.ic{color:var(--accent-color);flex:none;margin-top:4px}
.cta-wrap{text-align:center;margin-top:50px}
.top-cta-btn.btn-ship{background:var(--highlight-color);color:var(--text-dark);box-shadow:0 10px 25px rgba(255,193,7,0.4)}
.top-cta-btn.btn-ship:hover{box-shadow:0 15px 30px rgba(255,193,7,0.5)}
.cta-sub{margin:18px 0 0;font-size:0.95rem;color:rgba(255,255,255,0.7)}
footer a{color:#aaa}
.key-box{background:#F2F8F3;border:1px solid #DDEBDF;border-left:6px solid var(--accent-color);border-radius:15px;padding:36px 38px;margin-top:55px;display:flex;gap:26px;align-items:flex-start}
.key-box .key-icon{flex:none;width:60px;height:60px;border-radius:50%;background:var(--accent-color);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:0 8px 20px rgba(76,175,80,0.3)}
.key-box h3{font-size:1.4rem;color:var(--primary-color);margin-bottom:12px}
.key-box p{margin-bottom:0;color:var(--text-dark);font-size:1.02rem}
.key-box p + p{margin-top:12px;color:var(--text-gray);font-size:0.97rem}
.key-box b{color:var(--primary-color)}
.method-card p a{color:var(--highlight-color);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.method-note{text-align:center;color:rgba(255,255,255,0.7);font-size:0.95rem;margin:45px auto 0;max-width:780px}
.notice-box .notice-lead{color:var(--text-gray);font-size:1rem;margin:-8px 0 22px}
.notice-foot{margin:24px 0 0;padding-top:20px;border-top:1px dashed #EBD9A0;color:var(--text-dark);font-size:1rem}
.notice-foot b{color:var(--primary-color)}
.guide-body{padding-top:10px}
.guide-body h2{font-size:1.45rem;color:var(--primary-color);line-height:1.45;margin:56px 0 16px;padding-left:14px;border-left:5px solid var(--accent-color)}
.guide-body h2:first-child{margin-top:0}
.guide-body p{font-size:1.06rem;line-height:1.9;margin-bottom:1.1rem;color:var(--text-dark)}
.guide-body ul.g-list{list-style:disc;padding-left:1.4rem;margin:0 0 1.3rem}
.guide-body ul.g-list li{font-size:1.04rem;line-height:1.8;margin-bottom:0.35rem;color:var(--text-dark)}
.ok-box{background:#F2F8F3;border:1px solid #DDEBDF;border-left:6px solid var(--accent-strong);border-radius:15px;padding:32px 34px}
.ok-box .ok-tag{display:inline-block;background:var(--accent-strong);color:#fff;font-size:0.85rem;font-weight:700;border-radius:20px;padding:4px 12px;margin-bottom:12px}
.ok-box h2{font-size:1.35rem;color:var(--primary-color);margin:0 0 12px;line-height:1.45}
.ok-box p{margin-bottom:0.9rem;line-height:1.85}
.ok-box ol{list-style:decimal;padding-left:1.4rem;margin:0 0 0.6rem}
.ok-box ol li{line-height:1.8;margin-bottom:0.3rem}
.ok-box .ok-next{margin:14px 0 0;font-weight:700;color:var(--primary-color)}
.broken-tag{display:inline-block;background:#B3261E;color:#fff;font-size:0.85rem;font-weight:700;border-radius:20px;padding:4px 12px;margin-bottom:6px}
.author-box{display:flex;gap:22px;align-items:flex-start;background:var(--bg-light);border:1px solid #e3e6ea;border-radius:15px;padding:26px;margin-top:56px}
.author-box figure{flex:none;width:190px;margin:0}
.author-box img{width:100%;height:auto;border-radius:10px;display:block}
.author-box figcaption{font-size:0.8rem;color:var(--text-gray);margin-top:6px}
.author-box h3{font-size:1.1rem;color:var(--primary-color);margin-bottom:8px}
.author-box p{font-size:0.98rem;line-height:1.8;margin-bottom:0.5rem}
.guide-dates{font-size:0.9rem;color:var(--text-gray);margin-top:10px}
.guide-hub-group h2{font-size:1.35rem;color:var(--primary-color);margin:50px 0 18px}
.why-content p a{color:var(--primary-color);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.nand-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.nand-card{background:white;border:1px solid #eaecef;border-radius:20px;padding:34px 28px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,0.04);position:relative}
.nand-card svg.ic{font-size:2.4rem;width:1em;height:1em;color:var(--primary-color);margin-bottom:16px}
.nand-step{font-size:0.76rem;font-weight:800;letter-spacing:0.08em;color:var(--text-gray);margin-bottom:12px}
.nand-card h3{font-size:1.2rem;color:var(--primary-color);margin-bottom:10px;font-weight:700}
.nand-card p{font-size:0.95rem;color:var(--text-gray);margin-bottom:0}
.nand-card.is-target{border:2px solid var(--accent-color)}
.nand-card.is-target svg.ic{color:var(--accent-color)}
.nand-card:not(:last-child)::after{content:'›';position:absolute;right:-30px;top:50%;transform:translateY(-50%);font-size:2rem;line-height:1;color:var(--accent-color);font-weight:700}
.core-line{text-align:center;max-width:780px;margin:45px auto 0;font-size:1.15rem;font-weight:700;color:var(--primary-color);line-height:1.7}
.core-line em{font-style:normal;border-bottom:3px solid var(--highlight-color);padding-bottom:2px}
.case-card.lv-mid{border-top-color:var(--highlight-color)}
.case-card.lv-high{border-top-color:var(--primary-color)}
.case-card.lv-mid .case-model{color:#8A6508}
.case-card.lv-high .case-model{color:var(--primary-color)}
.case-card .grow{flex:1}
.level-badge{display:inline-flex;align-items:center;gap:7px;font-size:0.8rem;font-weight:700;padding:6px 15px;border-radius:50px;margin-bottom:16px}
.level-badge.lv1{background:rgba(76,175,80,0.12);color:#2f7d33;border:1px solid rgba(76,175,80,0.4)}
.level-badge.lv2{background:rgba(255,193,7,0.18);color:#8a6300;border:1px solid rgba(255,193,7,0.55)}
.level-badge.lv3{background:rgba(0,51,102,0.08);color:var(--primary-color);border:1px solid rgba(0,51,102,0.3)}
.level-dots{display:inline-flex;gap:3px}
.level-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block;opacity:0.25}
.level-dots i.on{opacity:1}
.prep-box{background:white;border:1px solid #eaecef;border-radius:20px;padding:40px;box-shadow:0 8px 26px rgba(0,0,0,0.05)}
.prep-box h3{font-size:1.35rem;color:var(--primary-color);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.prep-box h3 svg.ic{color:var(--accent-color)}
.prep-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px 30px}
.prep-list li{display:flex;gap:12px;font-size:1rem;color:var(--text-gray)}
.prep-list svg.ic{color:var(--accent-color);flex:none;margin-top:5px}
.prep-list b{color:var(--text-dark)}
.step-actor{display:inline-block;font-size:0.75rem;font-weight:700;padding:3px 12px;border-radius:50px;margin-bottom:12px;letter-spacing:0.02em}
.actor-you{background:rgba(0,51,102,0.08);color:var(--primary-color)}
.actor-us{background:rgba(76,175,80,0.13);color:#2e7d32}
.memo-box{background:white;border:2px dashed #cfd6dd;border-radius:20px;padding:38px 40px;margin-top:40px;position:relative}
.memo-box h3{font-size:1.35rem;color:var(--primary-color);margin-bottom:8px;display:flex;align-items:center;gap:12px}
.memo-box h3 svg.ic{color:var(--accent-color)}
.memo-desc{color:var(--text-gray);font-size:0.95rem;margin-bottom:22px}
.memo-lines{list-style:none}
.memo-lines li{padding:13px 4px;border-bottom:1px solid #edf0f2;font-size:1.02rem;color:var(--text-dark);display:flex;gap:12px;align-items:baseline}
.memo-lines li:last-child{border-bottom:0}
.memo-lines .memo-key{font-weight:700;color:var(--primary-color);min-width:132px;flex:none}
.memo-lines .memo-hint{color:#5F6870;font-size:0.92rem}
.copy-btn{display:inline-flex;align-items:center;gap:8px;margin-top:24px;background:var(--primary-color);color:#fff;border:0;padding:12px 24px;border-radius:8px;font-size:0.95rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background 0.3s,transform 0.2s}
.copy-btn:hover{background:#00284f;transform:translateY(-2px)}
.copy-btn-ghost{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.35);padding:9px 18px;border-radius:8px;font-size:0.88rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background 0.3s}
.copy-btn-ghost:hover{background:rgba(255,255,255,0.2)}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(12px);background:var(--primary-color);color:#fff;padding:12px 24px;border-radius:50px;font-size:0.95rem;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,0.25);opacity:0;pointer-events:none;transition:opacity 0.3s,transform 0.3s;z-index:3000}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.disclosure{background:var(--bg-light);border:1px solid #e6e9ec;border-left:6px solid var(--primary-color);border-radius:15px;padding:28px 32px;max-width:900px;margin:0 auto}
.disclosure h2{font-size:1.15rem;color:var(--primary-color);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.disclosure p{margin-bottom:0;color:var(--text-gray);font-size:0.98rem}
.case-who{font-size:0.88rem;color:var(--text-gray);margin-bottom:20px;display:flex;align-items:center;gap:8px}
.case-who svg.ic{color:var(--text-gray);font-size:1rem}
.case-flow{border-top:1px dashed #e3e6e8;padding-top:20px;margin-bottom:20px;flex:1}
.case-flow li{display:flex;gap:14px;margin-bottom:14px;font-size:0.95rem;color:var(--text-gray)}
.case-flow li:last-child{margin-bottom:0}
.case-step-label{flex:none;width:54px;font-size:0.72rem;font-weight:800;color:var(--primary-color);background:#eef2f7;border-radius:6px;text-align:center;padding:4px 0;height:fit-content;margin-top:2px;letter-spacing:0.02em}
.review-box{background:white;border:1px solid #eee;border-radius:25px;padding:45px 50px;box-shadow:0 15px 40px rgba(0,0,0,0.06);text-align:center;margin-top:40px}
.review-box h3{font-size:1.5rem;color:var(--primary-color);margin-bottom:14px}
.review-box p{color:var(--text-gray);font-size:0.98rem;max-width:640px;margin:0 auto 26px}
.review-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.ghost-btn{display:inline-flex;align-items:center;gap:8px;background:white;color:var(--primary-color);border:2px solid var(--primary-color);padding:12px 26px;border-radius:8px;font-size:0.98rem;font-weight:700;transition:background 0.3s,color 0.3s,transform 0.2s}
.ghost-btn:hover{background:var(--primary-color);color:white;transform:translateY(-2px)}
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:44px}
.review-card{background:#fff;border:1px solid #e9ecef;border-radius:18px;padding:28px 26px 24px;box-shadow:0 6px 20px rgba(0,0,0,0.05);display:flex;flex-direction:column}
.review-quote{font-size:1.02rem;line-height:1.75;color:var(--text-dark);word-break:keep-all;margin:0 0 18px;flex:1}
.review-quote::before{content:'C';display:block;font-size:2.4rem;line-height:1;color:var(--accent-color);font-weight:900;margin-bottom:6px}
.review-meta{border-top:1px solid #f1f3f5;padding-top:14px;font-size:0.88rem;color:var(--text-gray)}
.review-who{font-weight:700;color:var(--primary-color)}
.review-case{display:block;margin-top:4px}
.review-paid{display:block;margin-top:8px;font-size:0.8rem;color:#8a929a}
@media (max-width:992px){
.method-grid{grid-template-columns:1fr 1fr}
.contact-container{grid-template-columns:1fr}
.map-frame,.map-fallback{min-height:350px}
.contact-info-area{padding:40px}
.ship-grid{grid-template-columns:1fr}
.trust-box{padding:40px 30px}
.nand-flow{grid-template-columns:1fr;gap:40px}
.nand-card:not(:last-child)::after{content:'›';right:50%;top:auto;bottom:-34px;transform:translateX(50%) rotate(90deg)}
.trust-box,.review-box{padding:40px 30px}
}
@media (max-width:768px){
.form-grid{grid-template-columns:1fr}
.consult-wrap{padding:32px 22px 28px;border-radius:18px}
.trust-item{width:100%;padding:13px 16px}
.action-btn{padding:13px 4px;font-size:0.94rem;gap:6px}
.figure-block{margin-top:34px}
.figure-block img{border-radius:14px}
.figure-block figcaption{font-size:0.87rem}
.logo img{height:27px}
.footer-logo{height:25px;margin-bottom:20px}
.hero h1{font-size:2.1rem}
.nav-menu{display:none}
.method-grid,.special-services{grid-template-columns:1fr}
.sticky-footer{width:95%;bottom:15px}
.section-padding{padding:60px 0}
.step-card{padding:30px 20px}
.nav-container{height:62px}
.logo{font-size:1.2rem;gap:8px}
.nav-toggle{display:flex}
.nav-toggle-cb:checked ~ .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle-cb:checked ~ .nav-toggle span:nth-child(2){opacity:0}
.nav-toggle-cb:checked ~ .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-menu{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid #eef0f2;box-shadow:0 10px 22px rgba(0,0,0,0.12);max-height:0;overflow:hidden;transition:max-height 0.3s ease}
.nav-menu a{padding:15px 20px;font-size:1rem;font-weight:600;border-bottom:1px solid #f1f3f5}
.nav-menu a::after{display:none}
.nav-toggle-cb:checked ~ .nav-menu{max-height:70vh;overflow-y:auto}
.method-grid,.ship-grid,.special-services,.contact-container,.nand-flow{grid-template-columns:1fr}
.hero{padding:140px 0 80px}
.hero h1{font-size:2rem;line-height:1.32}
.hero p{font-size:1.05rem}
.section-padding{padding:56px 0}
.section-title{font-size:1.9rem}
.section-lead{margin:-24px auto 34px;font-size:0.97rem}
h1,h2,h3,h4,p,li{word-break:keep-all}
.cta-wrap{margin-top:36px}
.cta-buttons{gap:14px}
.top-cta-btn{padding:16px 32px;font-size:1.05rem}
.sticky-footer{width:calc(100% - 24px);max-width:460px;left:50%;transform:translateX(-50%);bottom:12px;gap:10px}
.action-btn{padding:14px 8px;font-size:1rem;gap:8px;min-height:54px}
footer{padding:48px 0 108px;font-size:0.85rem}
.contact-info-area{padding:36px 26px}
.map-frame,.map-fallback{min-height:300px}
.map-overlay{left:12px;right:12px;bottom:12px;padding:12px 14px}
.method-grid{grid-template-columns:1fr}
.ship-card,.notice-box{padding:30px 24px}
.hero{padding:122px 0 70px}
.hero p{font-size:1.04rem;margin-bottom:32px}
.section-title{font-size:1.85rem;margin-bottom:40px}
.top-cta-btn{padding:16px 30px;font-size:1.05rem;min-height:54px}
.key-box{flex-direction:column;gap:18px;padding:30px 24px}
.core-line{font-size:1.05rem}
.ship-card,.notice-box,.prep-box{padding:30px 24px}
.ship-card,.notice-box,.memo-box{padding:30px 24px}
.memo-lines li{flex-direction:column;gap:4px}
.memo-lines .memo-key{min-width:0}
.review-grid{grid-template-columns:1fr;gap:16px;margin-top:32px}
.review-card{padding:22px 20px 20px;border-radius:14px}
.ship-card,.notice-box,.disclosure{padding:30px 24px}
}
@media (max-width:640px){
.guide-body h2{font-size:1.25rem;margin-top:44px}
.ok-box{padding:24px 20px}
.author-box{flex-direction:column}
.author-box figure{width:100%;max-width:320px}
}
@media (max-width:600px){
.container,.container-narrow{padding:0 16px}
.why-grid,.link-grid,.case-grid,.steps-grid,.faq-list,.prep-list{grid-template-columns:1fr}
.cta-buttons{flex-direction:column;align-items:stretch;gap:12px}
.top-cta-btn{display:flex;width:100%;justify-content:center;padding:16px 20px}
.hero-tags{gap:10px;margin-bottom:32px}
.tag{padding:8px 18px;font-size:0.9rem}
.breadcrumb{font-size:0.82rem;margin-bottom:16px}
.hero-note{font-size:0.88rem}
.why-item,.link-item{padding:22px 20px}
.why-icon{font-size:1.9rem;width:44px;margin-right:16px}
.link-icon{font-size:1.7rem;width:38px;margin-right:14px}
.method-card{padding:28px 20px}
.method-card svg.ic{font-size:2.1rem;margin-bottom:14px}
.step-card{padding:28px 20px}
.step-card h3{font-size:1.28rem}
.case-card,.faq-item{padding:26px 22px}
.trust-box,.review-box,.service-box{padding:32px 24px}
.trust-box h3,.service-box h3{font-size:1.35rem}
.notice-box,.ship-card{padding:28px 22px}
.data-item{padding:20px 10px}
.data-item svg.ic{font-size:1.8rem;margin-bottom:10px}
.contact-info-area{padding:32px 22px}
.contact-info-row{font-size:1rem;margin-bottom:22px}
.contact-icon{width:42px;height:42px;margin-right:14px;font-size:1.05rem}
.map-frame,.map-fallback{min-height:260px}
}
@media (max-width:480px){
.container,.container-narrow{padding:0 14px}
.logo{font-size:1.06rem}
.hero{padding:112px 0 58px}
.hero h1{font-size:1.68rem}
.hero p{font-size:0.96rem}
.tag{padding:7px 14px;font-size:0.82rem}
.section-title{font-size:1.5rem;margin-bottom:32px}
.section-lead{font-size:0.93rem}
.section-padding{padding:46px 0}
.why-item,.link-item{padding:18px 16px}
.why-icon{font-size:1.7rem;width:38px;margin-right:13px}
.link-icon{font-size:1.5rem;width:34px;margin-right:12px}
.method-card,.step-card,.case-card,.faq-item{padding:22px 18px}
.trust-box,.review-box,.service-box,.notice-box,.ship-card{padding:24px 18px}
.contact-info-area{padding:28px 18px}
.action-btn{font-size:0.92rem;padding:13px 4px;gap:6px;min-height:50px}
.action-btn svg.ic{font-size:0.95rem}
.top-cta-btn{font-size:0.98rem;padding:15px 14px}
.ship-value.big{font-size:1.12rem}
.ship-value{font-size:1rem}
.data-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px;margin-bottom:40px}
.check-list li,.dont-list li{font-size:0.96rem}
}
@media (max-width:380px){
.action-btn{font-size:0.82rem;padding:12px 2px;gap:4px}
.logo img{height:23px}
}
@media (prefers-reduced-motion:reduce){
.animate-on-scroll{opacity:1;transform:none;transition:none}
*{animation-duration:0.01ms !important}
}

/* ── 2부: 새 디자인 v2 ── */
/* ═══════════════════════════════════════════════════════════════
   수리왕 김복구 — 디자인 v2 «정밀 연구실» (2026-10-20)
   build_css.py 가 legacy(기존 페이지 규칙) 뒤에 이 파일을 붙여 /assets/site.css 를 만든다.
   - 첫 화면·짙은 띠: 밤하늘 같은 남색 + 청록 데이터 빛 + 따뜻한 호박색 빛
   - 본문: 밝고 깨끗하게(읽기 우선). 글씨 Pretendard
   - 대비: 본문 글자 4.5:1 이상, 큰 글씨 3:1 이상 (homepage-qa 로 측정)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --c-ink-950: #050913;
  --c-ink-900: #070c17;
  --c-ink-850: #0a1120;
  --c-ink-800: #0d1628;
  --c-ink-700: #13203a;
  --c-ink-600: #1c2c4c;
  --c-navy: #0b2f66;
  --c-head: #0b1b33;
  --c-text: #172033;
  --c-text-2: #34425a;
  --c-muted: #56657c;
  --c-line: #e3e9f1;
  --c-line-2: #d2dbe7;
  --c-bg: #ffffff;
  --c-bg-soft: #f5f7fb;
  --c-bg-tint: #eef5fb;
  --c-cyan: #3be2ff;
  --c-cyan-2: #8eeeff;
  --c-cyan-ink: #08657f;
  --c-cyan-soft: #e3f8fd;
  --c-amber: #ffb547;
  --c-amber-ink: #7a4800;
  --c-amber-soft: #fff4e0;
  --c-call: #15803d;
  --c-call-2: #166534;
  --c-kakao: #fee500;
  --c-kakao-ink: #191600;
  --c-ship: #ffb020;
  --c-ship-ink: #2b1b00;
  --c-red: #e5332a;

  /* 예전 규칙이 쓰는 이름을 새 색으로 잇는다 */
  --primary-color: var(--c-navy);
  --accent-color: var(--c-call);
  --accent-strong: var(--c-call);
  --highlight-color: var(--c-amber);
  --bg-light: var(--c-bg-soft);
  --text-dark: var(--c-text);
  --text-gray: var(--c-muted);

  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-mono: 'Pretendard Variable', Pretendard, ui-monospace, monospace;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --r-xl: 30px;
  --sh-1: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .06);
  --sh-2: 0 2px 8px rgba(15, 23, 42, .06), 0 22px 50px rgba(15, 23, 42, .12);
  --sh-3: 0 30px 80px rgba(3, 8, 20, .45);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hdr: 72px;
}

/* ── 기본 ─────────────────────────────────────────── */
html { scroll-padding-top: calc(var(--hdr) + 12px); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-text);
  background: var(--c-bg);
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, li, dt, dd, figcaption, small, strong { word-break: keep-all; }
/* 제목 색은 정하지 않는다(부모 글자색을 따름): 짙은 띠 안 제목은 흰색, 밝은 바탕은 짙은 색이 되도록. 전역으로 색을 박으면 짙은 띠의 제목이 안 보인다 */
h1, h2, h3, h4 { letter-spacing: -0.032em; line-height: 1.3; }
p { margin-bottom: 1.25rem; }
a { color: inherit; }
::selection { background: rgba(59, 226, 255, .35); }
:focus-visible { outline: 3px solid var(--c-cyan); outline-offset: 3px; border-radius: 6px; }
.readout { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 3000;
  background: var(--c-ink-900); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

.container { max-width: 1200px; padding: 0 24px; }
.container-narrow { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.section-padding { padding: 104px 0; }
.text-center { text-align: center; }

/* 섹션 제목: 밑줄 대신 짧은 빛줄 + 작은 머리말 */
.section-title-wrapper { text-align: center; }
.section-title {
  font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.6rem);
  font-weight: 800;
  color: var(--c-head);
  margin-bottom: 22px;
  line-height: 1.28;
}
.section-title::after {
  width: 44px; height: 4px; margin: 18px auto 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--c-cyan), #47a6ff);
}
.section-title-wrapper + * { margin-top: 26px; }
.section-lead, .section-title-wrapper p.text-center {
  max-width: 760px; margin: 0 auto 52px; color: var(--c-muted); font-size: 1.06rem; text-align: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-cyan-ink);
}
.eyebrow::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }

/* 나타나기 */
.animate-on-scroll { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.animate-on-scroll.visible { opacity: 1; transform: none; }

/* ── 머리(헤더) ───────────────────────────────────── */
header {
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .06);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}
.nav-container { height: var(--hdr); gap: 20px; }
.nav-menu { gap: 6px; align-items: center; }
.nav-menu a {
  font-size: .97rem; font-weight: 600; color: var(--c-text-2);
  padding: 9px 13px; border-radius: 10px; transition: background .2s, color .2s;
}
.nav-menu a:hover { background: var(--c-bg-tint); color: var(--c-navy); }
.nav-menu a::after { display: none; }
.nav-call {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 8px;
  background: var(--c-ink-900); color: #fff !important; padding: 10px 16px !important; border-radius: 999px !important;
  font-weight: 700 !important; box-shadow: 0 6px 18px rgba(7, 12, 23, .22);
}
.nav-call:hover { background: var(--c-ink-700) !important; }
.nav-call .readout { letter-spacing: .01em; }

/* ── 버튼 ─────────────────────────────────────────── */
.cta-buttons { gap: 14px; margin-top: 8px; }
.top-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--c-cyan); color: #04202a;
  padding: 17px 30px; border-radius: 14px; font-weight: 800; font-size: 1.05rem; margin-top: 0;
  box-shadow: 0 10px 30px rgba(59, 226, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .12);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.top-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(59, 226, 255, .38); background: #6ae9ff; }
.top-cta-btn.btn-ghost {
  background: rgba(255, 255, 255, .06); color: #fff; border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.top-cta-btn.btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); }
.top-cta-btn.btn-kakao { background: var(--c-kakao); color: var(--c-kakao-ink); box-shadow: 0 10px 28px rgba(254, 229, 0, .22); }
.top-cta-btn.btn-ship { background: var(--c-ship); color: var(--c-ship-ink); box-shadow: 0 10px 28px rgba(255, 176, 32, .25); }
.top-cta-btn.btn-call { background: var(--c-call); color: #fff; animation: none; box-shadow: 0 10px 28px rgba(21, 128, 61, .3); }

/* ── 히어로(모든 페이지 공통) ─────────────────────── */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: var(--c-ink-900);
  background-image:
    radial-gradient(900px 520px at 85% 8%, rgba(59, 226, 255, .16), transparent 60%),
    radial-gradient(760px 520px at 8% 100%, rgba(255, 181, 71, .12), transparent 60%),
    linear-gradient(180deg, var(--c-ink-900) 0%, var(--c-ink-850) 100%);
  color: #fff; text-align: left;
  padding: calc(var(--hdr) + 72px) 0 88px;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  top: 0; left: 0; width: auto; height: auto;
  background-image:
    linear-gradient(rgba(142, 238, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 238, 255, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 60% 30%, #000 30%, transparent 75%);
}
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(59, 226, 255, .45), transparent);
}
.hero .container { position: relative; }
.hero h1 {
  color: #fff; font-weight: 800; text-shadow: none;
  font-size: clamp(2.05rem, 1.15rem + 3.1vw, 3.55rem);
  line-height: 1.2; letter-spacing: -0.04em; margin-bottom: 22px;
}
.hero p { color: rgba(232, 240, 252, .86); font-size: 1.12rem; font-weight: 400; opacity: 1; margin-bottom: 30px; max-width: 640px; }
.hero .breadcrumb, .hero .breadcrumb a { color: rgba(214, 226, 244, .8); }
.hero .breadcrumb a:hover { color: #fff; }
.hero-note { color: rgba(214, 226, 244, .78) !important; }
.hero-tags { justify-content: flex-start; gap: 10px; margin-bottom: 26px; }
.tag {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(142, 238, 255, .22);
  color: rgba(236, 246, 255, .92); padding: 7px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600;
}
.tag svg.ic { color: var(--c-cyan); }
.hero .cta-buttons { justify-content: flex-start; }

/* 히어로 안의 정보 상자(가이드 첫 문단 등)는 밝은 유리판 */
.hero .lead-box, .hero .answer, .hero #answer {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(142, 238, 255, .2);
  border-radius: var(--r-m); padding: 18px 20px; color: rgba(236, 244, 255, .92);
}

/* 사진이 있는 히어로: 글 왼쪽, 사진 오른쪽 */
/* 사진이 옆에 오면 글 칸이 좁아지므로 큰 제목을 조금 줄이고, 줄을 고르게 나눈다(«안 / 된다고»처럼 어색한 끊김 방지) */
.hero h1, .section-title { text-wrap: balance; }
.hero p { text-wrap: pretty; }
.hero--split h1 { font-size: clamp(2rem, 1.1rem + 2.4vw, 2.9rem); }
.hero--split .container {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center;
}
.hero-media {
  position: relative; margin: 0; border-radius: var(--r-l); overflow: hidden;
  box-shadow: var(--sh-3), 0 0 0 1px rgba(142, 238, 255, .16);
  aspect-ratio: 3 / 2; background: var(--c-ink-800);
}
.hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(5, 9, 19, .35));
}
.hero-media figcaption {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  font-size: .78rem; font-weight: 700; color: #e9f2ff;
  background: rgba(5, 9, 19, .72); border: 1px solid rgba(255, 255, 255, .14);
  padding: 4px 10px; border-radius: 999px;
}

/* ── 신뢰 띠 ─────────────────────────────────────── */
.trust-bar { background: var(--c-bg-soft); border-bottom: 1px solid var(--c-line); padding: 24px 0; }
.trust-grid { gap: 12px; }
.trust-item {
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 15px 20px;
  box-shadow: var(--sh-1);
}
.trust-item svg.ic { color: var(--c-call); }
.trust-item strong { color: var(--c-head); font-weight: 800; }
.trust-item small { color: var(--c-muted); }
.trust-item a { color: var(--c-cyan-ink); font-weight: 700; }

/* ── 카드들 ──────────────────────────────────────── */
.process-section { background: var(--c-bg-soft); }
.steps-grid { gap: 20px; counter-reset: step; }
.step-card {
  text-align: left; padding: 30px 26px 28px; border-radius: var(--r-l);
  background: #fff; border: 1px solid var(--c-line); box-shadow: var(--sh-1);
  position: relative; overflow: hidden;
}
.step-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-cyan), #47a6ff 60%, transparent);
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.step-num {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; line-height: 1; margin: 0 0 18px; border-radius: 12px;
  background: var(--c-ink-900); color: var(--c-cyan-2); font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 8px 20px rgba(7, 12, 23, .2);
}
.step-card h3 { font-size: 1.22rem; margin-bottom: 8px; }
.step-card p { color: var(--c-muted); font-size: .98rem; }

.why-grid { gap: 18px; }
.why-item {
  border-left: 0; border: 1px solid var(--c-line); border-radius: var(--r-l);
  padding: 24px; box-shadow: var(--sh-1); align-items: flex-start; background: #fff;
}
.why-item:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.why-icon {
  width: 52px; height: 52px; flex: none; margin-right: 18px; border-radius: 14px; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-cyan-ink); background: var(--c-cyan-soft);
}
.why-content h3 { font-size: 1.12rem; color: var(--c-head); }
.why-content p { color: var(--c-muted); }

.link-grid { gap: 16px; }
.link-item {
  border-left: 0; border: 1px solid var(--c-line); border-radius: var(--r-m);
  padding: 20px 22px; box-shadow: var(--sh-1); background: #fff;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.link-item:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: rgba(59, 226, 255, .55); }
.link-icon {
  width: 46px; height: 46px; flex: none; margin-right: 16px; border-radius: 12px; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-cyan-ink); background: var(--c-cyan-soft);
}
.link-item h3 { font-size: 1.04rem; color: var(--c-head); line-height: 1.45; }
.link-item p { color: var(--c-muted); font-size: .9rem; }
/* 사진 카드 아래 작은 바로가기 줄 */
.link-grid-compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.link-grid-compact .link-item { padding: 16px; align-items: flex-start; }
.link-grid-compact .link-icon { width: 38px; height: 38px; margin-right: 12px; font-size: 1.1rem; border-radius: 10px; }
.link-grid-compact .link-item h3 { font-size: .96rem; }
.link-grid-compact .link-item p { font-size: .84rem; line-height: 1.55; }
.link-grid-compact .link-item p small { display: block; margin-top: 2px; font-size: .78rem; }

/* 짙은 띠(접수 방법 등) */
.method-section {
  background-color: var(--c-ink-900);
  background-image:
    radial-gradient(700px 380px at 15% 0%, rgba(59, 226, 255, .12), transparent 60%),
    radial-gradient(700px 380px at 90% 100%, rgba(255, 181, 71, .1), transparent 60%);
  color: #fff;
}
.method-section .section-title { color: #fff; }
.method-section .section-lead, .method-section p.text-center { color: rgba(225, 236, 250, .82); }
.method-grid { gap: 18px; }
.method-card {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(142, 238, 255, .16); border-radius: var(--r-l);
  padding: 32px 22px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.method-card:hover { background: rgba(255, 255, 255, .08); border-color: rgba(142, 238, 255, .4); }
.method-card svg.ic { color: var(--c-cyan); }
.method-card h3 { color: #fff; }
.method-card p { color: rgba(225, 236, 250, .78); }
.method-card p a { color: var(--c-cyan-2); }
.method-note { color: rgba(225, 236, 250, .8); }

/* 데이터 종류 칸 */
.data-grid { gap: 14px; grid-template-columns: repeat(8, minmax(0, 1fr)); margin-bottom: 48px; }
.data-item {
  border: 1px solid var(--c-line); border-radius: var(--r-m); background: #fff; box-shadow: var(--sh-1);
  font-weight: 700; color: var(--c-head);
}
.data-item svg.ic { color: var(--c-cyan-ink); }
.data-item:hover { border-color: rgba(59, 226, 255, .6); background: #fff; }
.data-item:hover svg.ic { color: var(--c-navy); }

.service-box {
  background: var(--c-ink-850);
  background-image: radial-gradient(600px 300px at 100% 0%, rgba(59, 226, 255, .12), transparent 60%);
  border: 1px solid rgba(142, 238, 255, .16); border-radius: var(--r-xl); box-shadow: var(--sh-3);
}
.service-box h3 { color: #fff; border-bottom-color: var(--c-cyan); }
.check-list li svg.ic { color: var(--c-call); }
.service-box .check-list li { color: rgba(236, 244, 255, .92); }
.service-box .check-list li svg.ic { color: var(--c-cyan); }

/* 정보 상자들 */
.trust-box, .notice-box, .key-box, .prep-box, .memo-box, .review-box, .ship-card {
  border-radius: var(--r-l) !important;
}
.trust-box { box-shadow: var(--sh-1); }

/* 그림 */
.figure-block { max-width: 860px; margin-top: 52px; }
.figure-block img { border-radius: var(--r-l); box-shadow: var(--sh-2); background: var(--c-bg-tint); }
.figure-block figcaption { color: var(--c-muted); }
.real-tag { background: #e3f6e9; color: #126b34; }
.ref-tag { background: #edf1f6; color: #4a5568; }

/* FAQ */
.faq-list { gap: 12px; }
.faq-item {
  border: 1px solid var(--c-line); border-radius: var(--r-m); box-shadow: none; background: #fff;
  padding: 22px 26px; transition: border-color .2s, box-shadow .2s;
}
.faq-item:hover { border-color: var(--c-line-2); box-shadow: var(--sh-1); }
.faq-item h3 { color: var(--c-head); font-size: 1.06rem; line-height: 1.5; align-items: flex-start; }
.faq-item h3 span {
  flex: none; width: 26px; height: 26px; border-radius: 8px; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-ink-900); color: var(--c-cyan-2); margin-top: 1px;
}
.faq-item p { color: var(--c-text-2); }

/* 상담 신청 */
.consult-section {
  background-color: var(--c-ink-900);
  background-image:
    radial-gradient(800px 420px at 50% 0%, rgba(59, 226, 255, .14), transparent 60%),
    linear-gradient(180deg, var(--c-ink-900), var(--c-ink-850));
}
.consult-wrap { border-radius: var(--r-xl); box-shadow: var(--sh-3); border: 1px solid rgba(255, 255, 255, .6); }
.consult-wrap h3 { color: var(--c-head); font-size: 1.6rem; }
.form-field label { color: var(--c-head); }
.form-field input, .form-field select, .form-field textarea {
  border: 1px solid var(--c-line-2); border-radius: 12px; background: var(--c-bg-soft);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: #47a6ff; background: #fff; box-shadow: 0 0 0 4px rgba(71, 166, 255, .18);
}
.form-submit {
  border-radius: 14px; background: var(--c-ink-900); color: #fff;
  box-shadow: 0 12px 30px rgba(7, 12, 23, .28);
}
.form-submit:hover { background: var(--c-ink-700); box-shadow: 0 16px 36px rgba(7, 12, 23, .34); }
.form-note a { color: var(--c-call) !important; }
.consult-alt { color: rgba(225, 236, 250, .86); }
.consult-alt a { color: var(--c-amber); }

/* 오시는 길 */
.contact-container { border-radius: var(--r-xl); box-shadow: var(--sh-2); border: 1px solid var(--c-line); }
.contact-icon { background: var(--c-cyan-soft); color: var(--c-cyan-ink); border-radius: 12px; }
.contact-info-row:hover .contact-icon { background: var(--c-ink-900); color: var(--c-cyan-2); }
.contact-value { color: var(--c-head); }
.ask-hint { border-radius: 14px; background: var(--c-amber-soft); border-color: #f6dfb2; border-left-color: var(--c-amber); }
.ask-hint .ask-note { color: var(--c-call); }
/* 네이버 초록 위 흰 글씨는 대비 2.25:1 이라 안 읽힌다 → 같은 초록에 짙은 글씨(7.7:1) */
.naver-map-btn, .map-overlay-btn { border-radius: 10px; background-color: #03c75a; color: #04220f; }
.naver-map-btn:hover, .map-overlay-btn:hover { background-color: #02b351; color: #04220f; }

/* 바닥(푸터) */
footer {
  background: var(--c-ink-950);
  background-image: radial-gradient(800px 300px at 50% 0%, rgba(59, 226, 255, .08), transparent 60%);
  color: #9fb0c8; border-top: 1px solid rgba(142, 238, 255, .12);
}
footer a { transition: color .2s; }
footer a:hover { color: #fff !important; }

/* 아래 고정 버튼 (휴대폰·태블릿: 아래 가운데 한 줄 / 넓은 화면: 오른쪽 아래 세로 «퀵메뉴») */
.sticky-footer { gap: 10px; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.action-btn {
  border-radius: 16px; font-size: 1.02rem; padding: 15px 10px;
  box-shadow: 0 12px 30px rgba(3, 8, 20, .3); border: 1px solid rgba(255, 255, 255, .25);
}
.btn-call { background: var(--c-call); animation: none; }
.action-btn.btn-kakao { background: var(--c-kakao); color: var(--c-kakao-ink); }
.btn-ship-sticky { background: var(--c-ship); color: var(--c-ship-ink); }
@media (min-width: 1200px) {
  .sticky-footer {
    left: auto; right: 18px; bottom: 24px; transform: none;
    width: auto; max-width: none; flex-direction: column; gap: 8px;
  }
  .sticky-footer .action-btn {
    flex: none; width: 66px; height: 66px; padding: 0; gap: 4px; border-radius: 18px;
    flex-direction: column; font-size: .74rem; line-height: 1.2; letter-spacing: -0.03em;
  }
  .sticky-footer .action-btn svg.ic { font-size: 1.25rem; }
  .sticky-footer .action-btn:hover { transform: translateX(-3px); }
}
/* 홈: 첫 화면의 상담·전화 버튼이 보이는 동안에는 숨김 (스크립트가 hold-sticky 를 붙였다 뗀다. 스크립트가 없으면 늘 보임) */
html.hold-sticky .sticky-footer { opacity: 0; pointer-events: none; }
@media (min-width: 1200px) {
  html.hold-sticky .sticky-footer { transform: translateX(16px); }
}
@media (max-width: 1199px) {
  html.hold-sticky .sticky-footer { transform: translate(-50%, 16px); }
}

/* 가이드 글 */
.guide-body h2 { color: var(--c-head); }
.ok-box { border-radius: var(--r-l); border: 1px solid #cfe9d8; background: linear-gradient(180deg, #f3fbf6, #fff); }
.broken-tag, .ok-box .ok-tag { border-radius: 999px; }
.author-box { border-radius: var(--r-l); border: 1px solid var(--c-line); box-shadow: var(--sh-1); }
.breadcrumb { font-size: .9rem; }

/* ═══ 홈 첫 화면 ═══════════════════════════════════ */
.hero-home { padding: calc(var(--hdr) + 40px) 0 0; min-height: min(100svh, 980px); display: flex; flex-direction: column; }
.hero-home > .container { width: 100%; } /* 세로 flex 안에서 margin:auto 때문에 내용 폭으로 줄어들지 않게 */
.hero-home .container.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 32px; align-items: center; flex: 1;
}
.hero-copy { padding: 24px 0 40px; }
.hero-copy h1 { font-size: clamp(2.2rem, 1.1rem + 3.6vw, 4rem); line-height: 1.16; }
.hero-copy h1 .hl { color: var(--c-cyan-2); }
.hero-copy > p { font-size: 1.15rem; }
.hero-points { display: grid; gap: 10px; margin: 30px 0 0; padding: 0; }
.hero-points li { display: flex; gap: 10px; align-items: flex-start; color: rgba(232, 240, 252, .9); font-size: .98rem; list-style: none; }
.hero-points li svg.ic { color: var(--c-cyan); margin-top: 6px; flex: none; }
.hero-points b { color: #fff; font-weight: 700; }

.hero3d {
  position: relative; width: 100%; aspect-ratio: 1.3 / 1; max-height: 640px;
  border-radius: 28px;
}
.hero3d-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.hero3d.is-3d-ready .hero3d-canvas { opacity: 1; }
/* 3D가 오기 전·못 올 때의 자리: 은은한 빛무리 */
.hero3d::before {
  content: ''; position: absolute; inset: 8% 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59, 226, 255, .18), rgba(59, 226, 255, .04) 55%, transparent 72%);
  filter: blur(6px); transition: opacity 1s var(--ease);
}
.hero3d.is-3d-ready::before { opacity: .55; }
.hero3d-poster { display: none; position: absolute; inset: 0; margin: 0; border-radius: 24px; overflow: hidden; box-shadow: var(--sh-3); }
.hero3d-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero3d.is-3d-failed .hero3d-poster, .no-3d .hero3d-poster { display: block; }
@media (prefers-reduced-motion: reduce) { .hero3d-poster { display: block; } .hero3d-canvas { display: none; } }
/* 3D 아래 한 줄 문구 (3D 상자 아래쪽 빈 띠에 살짝 걸치게 올린다) */
.hero-visual { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.hero .hero3d-caption {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: -34px 0 0;
  padding: 11px 20px; border-radius: 14px;
  background: rgba(10, 17, 32, .72); border: 1px solid rgba(142, 238, 255, .22);
  color: rgba(236, 244, 255, .94); font-size: 1rem; font-weight: 600; line-height: 1.5; text-align: center; letter-spacing: -0.02em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero3d-caption strong { color: var(--c-cyan-2); font-weight: 800; white-space: nowrap; }
.hero3d-caption .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-cyan); box-shadow: 0 0 12px var(--c-cyan); }

/* 첫 화면 아래 걸친 신뢰 판 */
.hero-dock { position: relative; z-index: 2; margin-top: 8px; padding-bottom: 32px; }
.dock {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(142, 238, 255, .16); border-radius: var(--r-l);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden;
}
.dock-item { padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; }
.dock-item + .dock-item { border-left: 1px solid rgba(142, 238, 255, .12); }
.dock-item svg.ic { color: var(--c-cyan); font-size: 1.35rem; flex: none; margin-top: 3px; }
.dock-item strong { display: block; color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.4; }
.dock-item small { display: block; color: rgba(214, 226, 244, .78); font-size: .84rem; line-height: 1.55; margin-top: 3px; }
.dock-item a { color: var(--c-cyan-2); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ═══ 증상 고르기(사진 카드) ═════════════════════ */
.symptom-section { background: var(--c-bg); }
.symptom-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.symptom-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-l);
  overflow: hidden; box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  color: inherit;
}
.symptom-card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: rgba(59, 226, 255, .55); }
.symptom-card .media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-ink-800); }
.symptom-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.symptom-card:hover .media img { transform: scale(1.05); }
.symptom-card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.symptom-card h3 { font-size: 1.14rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.symptom-card h3 svg.ic { color: var(--c-cyan-ink); flex: none; transition: transform .25s var(--ease); }
.symptom-card:hover h3 svg.ic { transform: translateX(4px); }
.symptom-card p { color: var(--c-muted); font-size: .94rem; margin: 0; }

/* ═══ 사진 + 글 띠 ═══════════════════════════════ */
.feature-band { background: var(--c-ink-900); color: #fff; overflow: hidden; position: relative; }
.feature-band .container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.feature-band h2 { color: #fff; font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.5rem); margin-bottom: 18px; }
.feature-band p { color: rgba(225, 236, 250, .84); }
.feature-band .feature-media { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3), 0 0 0 1px rgba(142, 238, 255, .14); }
.feature-band .feature-media img { display: block; width: 100%; height: auto; }
.feature-band .feature-media { position: relative; }
.feature-band .feature-media figcaption {
  position: absolute; left: 14px; bottom: 12px; padding: 4px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; color: #e9f2ff; background: rgba(5, 9, 19, .72); border: 1px solid rgba(255, 255, 255, .14);
}
.feature-band .eyebrow { color: var(--c-cyan-2); margin-bottom: 14px; }
.feature-band .top-cta-btn { margin-top: 26px; }
.feature-list { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; }
.feature-list li { list-style: none; display: flex; gap: 12px; align-items: flex-start; color: rgba(236, 244, 255, .92); }
.feature-list li svg.ic { color: var(--c-cyan); margin-top: 6px; flex: none; }

/* 데이터 종류(사진 타일) */
.data-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 34px; }
.data-tile { position: relative; border-radius: var(--r-l); overflow: hidden; background: var(--c-ink-800); box-shadow: var(--sh-1); color: #fff; }
.data-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease); }
.data-tile:hover img { transform: scale(1.05); }
.data-tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 16px 14px;
  /* 제목 글자가 시작하는 높이(약 40%)부터는 덮개가 충분히 진해야 사진이 밝아도 읽힌다. 위치는 %로 적는다(검수 도구가 %만 읽음) */
  background: linear-gradient(180deg, rgba(5, 9, 19, 0) 0%, rgba(5, 9, 19, .9) 34%, rgba(5, 9, 19, .96) 100%);
}
.data-tile strong { display: block; font-size: 1.05rem; font-weight: 800; color: #fff; }
.data-tile small { display: block; font-size: .84rem; color: rgba(225, 236, 250, .9); }

/* ═══ 반응형 ═════════════════════════════════════ */
@media (max-width: 1100px) {
  .nav-menu a { padding: 8px 9px; font-size: .92rem; }
  .nav-call .label { display: none; }
}
@media (max-width: 992px) {
  .hero-home .container.hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .hero-copy { padding-bottom: 8px; }
  .hero3d { aspect-ratio: 1.6 / 1; max-height: 520px; }
  .dock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dock-item:nth-child(3) { border-left: 0; }
  .dock-item:nth-child(n+3) { border-top: 1px solid rgba(142, 238, 255, .12); }
  .symptom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .link-grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero--split .container, .feature-band .container { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 768px) {
  :root { --hdr: 62px; }
  body { font-size: 16px; }
  .section-padding { padding: 68px 0; }
  .nav-menu { background: #fff; align-items: stretch; gap: 0; }
  .nav-menu a { padding: 15px 20px; border-radius: 0; }
  .nav-call { margin: 10px 16px 14px; justify-content: center; }
  .nav-call .label { display: inline; }
  .hero { padding: calc(var(--hdr) + 44px) 0 60px; }
  .hero-home { padding-top: calc(var(--hdr) + 22px); min-height: 0; }
  .hero p { font-size: 1.02rem; }
  .hero-points { margin-top: 22px; }
  .hero3d { aspect-ratio: 1.45 / 1; margin: 4px -8px 0; }
  .hero .hero3d-caption { margin-top: -12px; padding: 10px 14px; font-size: .9rem; gap: 8px; }
  .hero-tags { gap: 8px; margin-bottom: 20px; }
  .tag { padding: 6px 11px; font-size: .82rem; }
  .symptom-grid { gap: 14px; }
  .symptom-card .body { padding: 14px 14px 16px; }
  .symptom-card h3 { font-size: 1.02rem; }
  .symptom-card p { font-size: .86rem; }
  .data-tiles { gap: 12px; }
  .data-grid { gap: 10px; margin-bottom: 36px; }
  .link-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .top-cta-btn { padding: 16px 22px; }
}
@media (max-width: 560px) {
  .container, .container-narrow { padding: 0 16px; }
  .symptom-grid { grid-template-columns: 1fr 1fr; }
  .symptom-card p { display: none; }
  .data-tile .cap { padding: 32px 12px 10px; }
  .data-tile small { display: none; }
  .data-item { padding: 16px 4px; font-size: .88rem; }
  .dock { grid-template-columns: 1fr; }
  .dock-item + .dock-item { border-left: 0; border-top: 1px solid rgba(142, 238, 255, .12); }
  .data-item svg.ic { font-size: 1.6rem; margin-bottom: 8px; }
  .link-grid-compact { grid-template-columns: 1fr; }
}
@media (max-width: 340px) {
  .symptom-grid { grid-template-columns: 1fr; }
  .symptom-card p { display: block; }
}

/* 움직임 줄이기 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .animate-on-scroll { opacity: 1; transform: none; }
}

/* ═══ 교차 검수(07) 반영 ═══════════════════════════ */
/* 실제 촬영 사진 표시는 초록 꼬리표로 (AI «참고 이미지»와 구분) */
.hero-media figcaption.real { background: rgba(14, 90, 45, .88); color: #eafff1; border-color: rgba(255, 255, 255, .22); }
/* 홈 사진 카드의 «참고 이미지» 표시 */
.img-chip {
  position: absolute; left: 10px; top: 10px; z-index: 1; pointer-events: none;
  font-size: .72rem; font-weight: 700; line-height: 1.4; color: #e9f2ff;
  background: rgba(5, 9, 19, .88); border: 1px solid rgba(255, 255, 255, .14); padding: 3px 9px; border-radius: 999px;
}
/* 홈 첫 화면 위치 한 줄 */
.hero .hero-loc { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: .96rem; color: rgba(214, 226, 244, .86); }
.hero-loc svg.ic { color: var(--c-cyan); flex: none; }
/* 바닥글 메뉴가 낱말 중간에서 끊기지 않게 */
footer p a { white-space: nowrap; display: inline-block; }
@media (max-width: 768px) {
  .br-desk { display: none; }
  .hero .hero-loc { font-size: .88rem; align-items: flex-start; }
  .hero-loc svg.ic { margin-top: 4px; }
}
/* 홈 첫 화면 버튼 3개가 한 줄에 들어가게 (카카오톡 추가). 1140px 보다 좁으면 글 칸이 좁아 두 줄로 둔다 */
@media (min-width: 1140px) {
  .hero-home .cta-buttons { flex-wrap: nowrap; gap: 12px; }
  .hero-home .top-cta-btn { padding: 16px 20px; font-size: 1rem; white-space: nowrap; }
}