:root{
  --ink:#12151c; --paper:#f4f5f1; --paper-2:#ffffff; --paper-line:#e2e3dd;
  --text:#181a20; --text-mute:#6b6f76;
  --blue:#2f5eff; --blue-dark:#2249d6; --red:#e0392b;
  --radius:14px; --maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:'Pretendard','IBM Plex Sans KR',sans-serif; background:var(--paper); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased;}
.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:0.01em;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}

header{position:sticky; top:0; z-index:50; background:rgba(244,245,241,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--paper-line);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.nav{display:flex; align-items:center; justify-content:space-between; height:76px;}
.logo img{height:30px; width:auto;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 18px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; border:1px solid transparent; white-space:nowrap; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;}
.btn:hover{transform:translateY(-1px);}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}
.btn-ghost{color:var(--text); border-color:var(--paper-line); background:transparent;}
.btn-solid{background:var(--ink); color:#fff;}
.btn-blue{background:var(--blue); color:#fff; box-shadow:0 8px 20px rgba(47,94,255,.20);}
.btn-blue:hover{background:var(--blue-dark);}
.btn-block{width:100%;}

.auth-main{min-height:calc(100vh - 76px); display:flex; align-items:center; justify-content:center; padding:48px 20px;}
.auth-card{width:100%; background:var(--paper-2); border:1px solid var(--paper-line); border-radius:var(--radius); box-shadow:0 20px 50px rgba(17,24,39,.06); padding:36px;}
.auth-card.narrow{max-width:400px;}
.auth-card.wide{max-width:560px;}
.auth-title{font-size:20px; font-weight:700; letter-spacing:-0.01em; margin:0 0 22px;}

.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px;}
.field label .req{color:var(--red); margin-left:2px;}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"]{
  width:100%; padding:11px 13px; border:1px solid var(--paper-line); border-radius:8px;
  font-size:14px; font-family:inherit; color:var(--text); background:#fff; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,94,255,.12);}
.field input.err{border-color:var(--red); background:#fdf4f3;}
.field .hint{font-size:12px; color:var(--text-mute); margin-top:5px;}
.field .err-msg{font-size:12px; color:var(--red); margin-top:5px;}
.field-row{display:flex; gap:12px;}
.field-row .field{flex:1;}

.pwd-wrap{position:relative;}
.pwd-wrap input{padding-right:42px !important;}
.pwd-toggle{position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text-mute); font-size:12px; font-family:'IBM Plex Mono',monospace;}

.section-divider{display:flex; align-items:center; gap:10px; margin:24px 0 14px;}
.section-divider span{font-size:12px; font-weight:700; color:var(--text-mute); white-space:nowrap;}
.section-divider::after{content:""; flex:1; border-top:1px solid var(--paper-line);}

.check-row{display:flex; align-items:flex-start; gap:8px; margin-bottom:10px; font-size:13px; color:var(--text);}
.check-row input{margin-top:3px;}

.auth-error{background:#fdf1f0; color:var(--red); border:1px solid #f6d4d0; border-radius:8px; padding:10px 13px; font-size:13px; margin-bottom:16px;}

.auth-foot{margin-top:20px; text-align:center; font-size:13px; color:var(--text-mute);}
.auth-foot a{color:var(--blue); font-weight:600;}
.auth-foot a:hover{text-decoration:underline;}

.spinner{width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.success-panel{text-align:center; padding:12px 0 4px;}
.success-icon{width:56px; height:56px; margin:0 auto 18px; border-radius:50%; background:#e9f9f1; color:#17c989; display:flex; align-items:center; justify-content:center; font-size:26px;}
.success-panel h2{font-size:19px; margin:0 0 8px;}
.success-panel p{font-size:14px; color:var(--text-mute); margin:0 0 24px;}

@media (max-width:480px){
  .field-row{flex-direction:column; gap:0;}
  .auth-card{padding:26px 22px;}
}

/* ── 요금제 결제 확인 화면(checkout.html) 전용 ───────────────────────────── */
.checkout-main{max-width:640px; margin:0 auto; padding:40px 20px 64px;}
.checkout-back{font-size:13px; color:var(--text-mute); margin-bottom:6px; display:inline-block;}
.checkout-back:hover{color:var(--text); text-decoration:underline;}
.checkout-title{font-size:24px; font-weight:700; letter-spacing:-0.01em; margin:4px 0 22px;}

.status-bar{background:#eaf7f1; border:1px solid #cdeadd; border-radius:10px; padding:12px 16px; font-size:13px; color:var(--text); margin-bottom:18px;}
.status-bar b{font-weight:700;}

.plan-card{background:var(--paper-2); border:1px solid var(--paper-line); border-radius:var(--radius); padding:26px; margin-bottom:18px;}
.plan-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px;}
.plan-head .label{font-size:13px; color:var(--text-mute); margin:0 0 4px;}
.plan-head .name{font-size:18px; font-weight:700; margin:0;}
.plan-head .price{font-size:21px; font-weight:700; text-align:right;}
.plan-head .price .unit{font-size:13px; font-weight:400; color:var(--text-mute); margin-left:2px;}

.limits-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
.limits-grid .item{display:flex; justify-content:space-between; background:#f7f8f4; border-radius:8px; padding:10px 13px; font-size:13px;}
.limits-grid .item span:first-child{color:var(--text-mute);}
.limits-grid .item span:last-child{font-weight:600;}

.plan-note{font-size:12px; color:var(--text-mute); margin:0 0 16px;}

/* EC店長 연동 할인(2026-09-16) — plan-head 정가 표시 + cost-row 최종 청구금액 양쪽에 붙는다 */
.ec-tencho-badge{display:inline-block; background:#eaf7f1; border:1px solid #cdeadd; color:#1f8a5c; font-size:12px; font-weight:700; border-radius:999px; padding:3px 10px; margin:0 0 14px;}
.price-original{font-size:13px; font-weight:400; color:var(--text-mute); text-decoration:line-through; margin-right:6px;}
.cost-amount-original{font-size:14px; font-weight:400; color:var(--text-mute); text-decoration:line-through; margin-right:8px;}

.cost-row{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--paper-line); padding-top:14px;}
.cost-row .cost-label{font-size:14px; font-weight:600;}
.cost-row .cost-amount{font-size:19px; font-weight:700;}

.payment-card{background:var(--paper-2); border:1px solid var(--paper-line); border-radius:var(--radius); padding:22px 26px; margin-bottom:18px;}
.section-label{font-size:13px; font-weight:700; color:var(--text); margin:0 0 12px;}
.card-registered{display:flex; align-items:center; justify-content:space-between; background:#f7f8f4; border-radius:8px; padding:11px 14px; font-size:13px;}
.card-registered button{background:none; border:none; color:var(--blue); font-size:12px; cursor:pointer; padding:0;}
.card-registered button:hover{text-decoration:underline;}

.checkout-loading{display:flex; align-items:center; justify-content:center; padding:80px 0; color:var(--text-mute); font-size:14px;}

/* ── 언어 선택 드롭다운 (로그인/가입/결제/요금제관리 헤더 공용) ─────────────────── */
.lang-switcher{position:relative;}
.lang-dropdown{display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:130px; background:var(--paper-2); border:1px solid var(--paper-line); border-radius:12px; box-shadow:0 12px 30px rgba(15,23,42,0.12); overflow:hidden; z-index:100;}
.lang-dropdown a{display:block; padding:10px 16px; font-size:14px; color:var(--text);}
.lang-dropdown a:hover{background:var(--paper);}
.lang-dropdown a.active{font-weight:700; color:var(--blue);}