/* 공개 화면 공용 모양 — 랜딩·구독 안내·FAQ·도움말·약관·계정 화면 (09-25 상용화)
   디자인 = 스티치 씨앗(v1 밝고 차분한 실무 도구) + 변형 1(도면 격자·규격표식 머리글) 합성 —
   원본 시안은 `c:\coding\stitch-web\elec-estimate-landing\`. 🔴 색·간격은 여기 변수만 고친다(화면마다 손대지 않는다). */
:root{
  --바탕:#f8fafc; --판:#fff; --면:#f1f5f9; --선:#e2e8f0; --선진:#cbd5e1;
  --글자:#0f172a; --본문:#1e293b; --흐림:#64748b; --연함:#94a3b8;
  --강조:#0369a1; --강조진:#075985; --강조연:#e0f2fe; --밤:#0f172a;
  --호박:#b45309; --호박연:#fef3c7; --초록:#047857; --초록연:#ecfdf5; --빨강:#b42318; --빨강연:#fef3f2;
  --둥:6px; --폭:1160px;
  --글꼴:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕","Noto Sans KR",system-ui,sans-serif;
  --고정폭:ui-monospace,"Cascadia Mono","Consolas","D2Coding",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--바탕);color:var(--본문);font:15px/1.7 var(--글꼴);word-break:keep-all;
     -webkit-font-smoothing:antialiased}
a{color:var(--강조)}
img{max-width:100%}
.폭{max-width:var(--폭);margin:0 auto;padding:0 24px}
.숫자{font-variant-numeric:tabular-nums}
.숨김{display:none!important}

/* ── 머리 */
.머리{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);
      border-bottom:1px solid var(--선)}
.머리 .폭{display:flex;align-items:center;gap:22px;height:60px}
.상표{display:flex;align-items:center;gap:9px;color:var(--글자);text-decoration:none;font-weight:700;font-size:16px;letter-spacing:-.02em}
.상표 i{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:6px;background:var(--강조);color:#fff;font-style:normal;font-size:14px}
.상표 .워드마크{height:26px;width:auto;display:block}
.꼬리 .상표 .워드마크{height:22px}
.상표{letter-spacing:.05em}
.차례{display:flex;gap:4px;margin-left:12px}
.차례 a{color:var(--본문);text-decoration:none;font-size:14px;padding:6px 10px;border-radius:5px}
.차례 a:hover,.차례 a[aria-current]{background:var(--면);color:var(--글자)}
.머리 .오른{margin-left:auto;display:flex;align-items:center;gap:10px}
@media (max-width:820px){.차례{display:none}}

/* ── 단추 */
.단추{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:var(--둥);
      border:1px solid var(--강조진);background:var(--강조);color:#fff;font:600 14.5px/1.2 var(--글꼴);text-decoration:none;cursor:pointer}
.단추:hover{background:var(--강조진)}
.단추:disabled{opacity:.55;cursor:default}
.단추.보조{background:#fff;color:var(--글자);border-color:var(--선진)}
.단추.보조:hover{background:var(--면)}
.단추.위험{background:#fff;color:var(--빨강);border-color:#f1b5ae}
.단추.위험:hover{background:var(--빨강연)}
.단추.큰{padding:13px 24px;font-size:15.5px}
.단추.꽉{width:100%}
.글단추{background:none;border:0;padding:0;color:var(--강조);font:inherit;cursor:pointer;text-decoration:underline}

/* ── 도면 격자 바탕(변형 1) */
.격자{background-image:linear-gradient(var(--선) 1px,transparent 1px),linear-gradient(90deg,var(--선) 1px,transparent 1px);
      background-size:32px 32px;background-position:-1px -1px}
.표식{display:inline-flex;align-items:center;gap:8px;font:600 11.5px/1 var(--고정폭);letter-spacing:.06em;color:var(--강조);text-transform:uppercase}
.표식::before{content:"";width:18px;height:1px;background:currentColor}

/* ── 절 */
section{padding:84px 0}
section.면{background:var(--판);border-top:1px solid var(--선);border-bottom:1px solid var(--선)}
h1,h2,h3{color:var(--글자);letter-spacing:-.025em;line-height:1.3}
h1{font-size:clamp(30px,4.4vw,46px);margin:14px 0 16px}
h2{font-size:clamp(24px,3vw,32px);margin:10px 0 12px}
h3{font-size:17px;margin:0 0 8px}
.앞말{color:var(--흐림);font-size:16.5px;max-width:680px}
.가운데{text-align:center}.가운데 .앞말{margin-left:auto;margin-right:auto}

/* ── 첫 화면 */
.첫{padding:72px 0 64px;border-bottom:1px solid var(--선)}
.첫 .단추들{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px 0 12px}
.첫 .밑말{color:var(--흐림);font-size:13.5px}
.미리{margin:44px auto 0;background:var(--판);border:1px solid var(--선진);border-radius:10px;box-shadow:0 18px 40px -18px rgba(15,23,42,.25);
      overflow:hidden;display:grid;grid-template-columns:1fr 330px;text-align:left}
.미리 .띠{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--선);background:var(--면);font-size:12.5px;color:var(--흐림)}
.미리 .띠 b{color:var(--글자);font-weight:600}
.미리 table{width:100%;border-collapse:collapse;font-size:12.5px}
.미리 th{background:var(--면);color:var(--흐림);font-weight:600;text-align:left;padding:8px 10px;border-bottom:1.5px solid var(--선진);white-space:nowrap}
.미리 td{padding:8px 10px;border-bottom:1px solid var(--선);white-space:nowrap}
.미리 td.수{text-align:right;font-variant-numeric:tabular-nums}
.미리 .원가{border-left:1px solid var(--선);padding:14px 16px;font-size:12.5px}
.미리 .원가 div{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--선)}
.미리 .원가 div.합{border:0;margin-top:10px;padding:10px 12px;background:var(--강조연);border-radius:6px;font-weight:700;color:var(--강조진)}
.미리 .원가 span:last-child{font-variant-numeric:tabular-nums}
@media (max-width:900px){.미리{grid-template-columns:1fr}.미리 .원가{border-left:0;border-top:1px solid var(--선)}.미리 .표감쌈{overflow-x:auto}}

/* ── 카드 */
.칸들{display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
.칸들.셋{grid-template-columns:repeat(3,1fr)}
.칸들.둘{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){.칸들,.칸들.셋{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.칸들,.칸들.셋,.칸들.둘{grid-template-columns:1fr}}
.칸{background:var(--판);border:1px solid var(--선);border-radius:8px;padding:22px}
.칸 .번{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:5px;background:var(--강조);color:#fff;font:700 13px/1 var(--고정폭);margin-bottom:14px}
.칸 p{margin:0;color:var(--흐림);font-size:14px}
.칸 .꼬리표{margin-top:14px;padding-top:12px;border-top:1px solid var(--선);font-size:12.5px;color:var(--강조)}

/* ── 요금 */
.요금판{max-width:520px;margin:34px auto 0;background:var(--판);border:1.5px solid var(--강조);border-radius:10px;padding:28px;box-shadow:0 14px 30px -18px rgba(3,105,161,.45)}
.주기{display:inline-flex;background:var(--면);border:1px solid var(--선);border-radius:7px;padding:3px;margin:22px 0 0}
.주기 button{border:0;background:none;padding:7px 16px;border-radius:5px;font:600 13.5px/1 var(--글꼴);color:var(--흐림);cursor:pointer}
.주기 button[aria-pressed="true"]{background:#fff;color:var(--글자);box-shadow:0 1px 2px rgba(15,23,42,.12)}
.주기 .할인{margin-left:6px;padding:2px 6px;border-radius:4px;background:var(--호박연);color:var(--호박);font-size:11.5px}
.값{display:flex;align-items:baseline;gap:6px;margin:14px 0 2px}
.값 b{font-size:40px;color:var(--글자);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.값 span{color:var(--흐림)}
.값아래{color:var(--흐림);font-size:13px;margin:0 0 18px}
.목록{list-style:none;padding:0;margin:0 0 22px}
.목록 li{position:relative;padding:7px 0 7px 26px;border-bottom:1px solid var(--선);font-size:14.5px}
.목록 li::before{content:"";position:absolute;left:4px;top:14px;width:10px;height:6px;border-left:2px solid var(--강조);border-bottom:2px solid var(--강조);transform:rotate(-45deg)}

/* ── 자주 묻는 질문 */
.질문{max-width:820px;margin:30px auto 0}
.질문 details{background:var(--판);border:1px solid var(--선);border-radius:8px;margin-bottom:10px}
.질문 summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:600;color:var(--글자);display:flex;gap:10px}
.질문 summary::-webkit-details-marker{display:none}
.질문 summary::before{content:"Q.";color:var(--강조);font-family:var(--고정폭)}
.질문 details[open] summary{border-bottom:1px solid var(--선)}
.질문 .답{padding:14px 20px 18px 46px;color:var(--본문);font-size:14.5px}
.질문 .답 p{margin:0 0 8px}

/* ── 문서(약관·도움말) */
.문서{max-width:820px;margin:0 auto;padding:56px 24px 90px}
.문서 h1{font-size:32px;margin:6px 0 6px}
.문서 .때{color:var(--흐림);font-size:13.5px;margin:0 0 30px}
.문서 h2{font-size:19px;margin:34px 0 10px;padding-top:6px}
.문서 h3{font-size:16px;margin:20px 0 6px}
.문서 p,.문서 li{font-size:14.5px}
.문서 table{width:100%;border-collapse:collapse;font-size:13.5px;margin:10px 0}
.문서 th,.문서 td{border:1px solid var(--선진);padding:8px 10px;text-align:left;vertical-align:top}
.문서 th{background:var(--면)}
.알림상자{background:var(--강조연);border-left:4px solid var(--강조);padding:14px 18px;border-radius:0 6px 6px 0;margin:18px 0}
.알림상자.호박{background:var(--호박연);border-left-color:var(--호박)}

/* ── 계정 화면(가입·로그인·계정) */
.가운데판{min-height:calc(100vh - 60px);display:grid;place-items:center;padding:40px 16px}
.입력판{width:100%;max-width:420px;background:var(--판);border:1px solid var(--선);border-radius:10px;padding:30px 28px}
.입력판 h1{font-size:22px;margin:0 0 4px}
.입력판 .밑말{margin:0 0 20px;color:var(--흐림);font-size:13.5px}
.입력판 label{display:block;margin:0 0 5px;font-size:13px;color:var(--흐림)}
.입력판 input[type=email],.입력판 input[type=password],.입력판 input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--선진);border-radius:6px;font:inherit;margin-bottom:14px;background:#fff}
.입력판 input:focus{outline:none;border-color:var(--강조);box-shadow:0 0 0 3px #0369a122}
.동의{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--본문);margin:2px 0 16px}
.동의 input{margin-top:4px}
.또는{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--연함);font-size:12px}
.또는::before,.또는::after{content:"";flex:1;height:1px;background:var(--선)}
.아래글{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--선);font-size:13px;color:var(--흐림)}
.소식{display:none;margin:0 0 14px;padding:10px 12px;border-radius:6px;font-size:13.5px}
.소식.탈{display:block;background:var(--빨강연);color:var(--빨강)}
.소식.됨{display:block;background:var(--초록연);color:var(--초록)}
.소식.알{display:block;background:var(--강조연);color:var(--강조진)}
.계정판{max-width:760px;margin:0 auto;padding:40px 24px 90px}
.계정판 .칸{margin-bottom:16px}
.줄{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--선);font-size:14.5px}
.줄:last-child{border-bottom:0}
.줄 > span:first-child{color:var(--흐림)}
.딱지{display:inline-block;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600}
.딱지.초록{background:var(--초록연);color:var(--초록)}.딱지.호박{background:var(--호박연);color:var(--호박)}.딱지.빨강{background:var(--빨강연);color:var(--빨강)}.딱지.회색{background:var(--면);color:var(--흐림)}

/* ── 꼬리 */
.꼬리{background:var(--밤);color:#cbd5e1;padding:44px 0 36px;font-size:12.5px;line-height:1.8}
.꼬리 a{color:#e2e8f0;text-decoration:none}
.꼬리 a:hover{text-decoration:underline}
.꼬리 .위{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;margin-bottom:18px}
.꼬리 .고리{display:flex;flex-wrap:wrap;gap:16px;font-size:13.5px}
.꼬리 .상표{color:#fff}
.꼬리 .사업자{color:#94a3b8}