/* KERA KOREA - 고객 사이트 */
:root{
  --ink:#0d1626; --ink-2:#16233a; --ink-3:#24344f;
  --gold:#c9a227; --gold-soft:#faf4e2; --gold-dark:#a8871b;
  --bg:#f7f8fa; --panel:#fff; --line:#e4e7ec; --line-2:#eff1f4;
  --text:#121826; --muted:#5f6b7d; --faint:#98a1b0;
  --ok:#0f9d58; --ok-soft:#e8f6ee; --warn:#c77700; --warn-soft:#fdf4e3;
  --danger:#d93b3b; --danger-soft:#fdeceb; --info:#1f5eff; --info-soft:#ecf1ff;
  --r:12px; --r-lg:18px;
  --shadow:0 1px 2px rgba(13,22,38,.05), 0 4px 16px rgba(13,22,38,.06);
  --shadow-lg:0 8px 40px rgba(13,22,38,.12);
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text); overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",
    "Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.3; letter-spacing:-.02em}
h1{font-size:30px} h2{font-size:22px} h3{font-size:17px}
p{margin:0 0 1em}
img{max-width:100%}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
.narrow{max-width:760px; margin:0 auto; padding:0 20px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.02em}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.small{font-size:13px} .tiny{font-size:12px}
.center{text-align:center} .right{text-align:right}
.nowrap{white-space:nowrap}
.hide{display:none !important}
.spacer{flex:1}

/* ---------- 헤더 (밝은 스타일) ---------- */
header.site{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(10px); color:var(--text); border-bottom:1px solid var(--line-2)}
header.site .bar{display:flex; align-items:center; gap:26px; height:64px}
header.site .logo{font-weight:800; font-size:18px; letter-spacing:.06em; color:var(--ink)}
header.site .logo b{color:var(--gold)}
header.site nav{display:flex; gap:22px; align-items:center; font-size:14px; font-weight:600}
header.site nav a{color:#5b6576}
header.site nav a:hover,header.site nav a.on{color:var(--ink)}
header.site nav a.on{box-shadow:inset 0 -2px 0 var(--gold); padding-bottom:3px}
header.site .acts{display:flex; gap:8px; align-items:center; margin-left:auto}
header.site .who{font-size:13px; color:var(--muted)}
header.site .btn.ghost{background:#fff; border-color:var(--line); color:var(--text)}
header.site .btn.ghost:hover{background:#f3f5f8}
.menu-btn{display:none; background:none; border:0; color:var(--ink); font-size:22px; cursor:pointer; padding:4px 8px}
@media(max-width:860px){
  header.site .bar{gap:10px; height:58px}
  header.site .logo{font-size:15px; white-space:nowrap}
  header.site nav{position:absolute; top:58px; left:0; right:0; background:#fff;
    flex-direction:column; align-items:stretch; padding:8px 20px 16px; gap:0; display:none;
    border-top:1px solid var(--line-2); box-shadow:0 12px 24px rgba(13,22,38,.08)}
  header.site nav.open{display:flex}
  header.site nav a{padding:13px 0; border-bottom:1px solid var(--line-2)}
  header.site nav a.on{box-shadow:none; padding-bottom:13px}
  header.site .who{display:none}
  header.site .acts{margin-left:auto; gap:6px}
  header.site .acts .btn{padding:6px 10px; font-size:12.5px}
  .menu-btn{display:block; order:3; margin-left:2px}
}
@media(max-width:420px){
  header.site .acts a[href="/mypage"], header.site .acts a[href="/admin"]{display:none}
}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 20px; border-radius:10px; border:1px solid var(--line); background:#fff;
  color:var(--text); font:inherit; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:.15s}
.btn:hover{background:#f3f5f8}
.btn.primary{background:var(--ink); border-color:var(--ink); color:#fff}
.btn.primary:hover{background:var(--ink-2)}
.btn.gold{background:var(--gold); border-color:var(--gold); color:#1b1500}
.btn.gold:hover{background:var(--gold-dark); color:#fff}
.btn.ghost{background:transparent; border-color:#3a4a66; color:#fff}
.btn.ghost:hover{background:#1d2a42}
.btn.outline{background:#fff; border-color:var(--line); color:var(--text)}
.btn.outline:hover{border-color:#c9d0db; background:#fafbfc}
.btn.danger{color:var(--danger); border-color:#f0c9c8; background:#fff}
.btn.danger:hover{background:var(--danger-soft)}
.btn.sm{padding:7px 13px; font-size:13px; border-radius:8px}
.btn.lg{padding:15px 30px; font-size:16px; border-radius:12px}
.btn.block{width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---------- 히어로 ---------- */
.hero{background:linear-gradient(160deg,#0d1626 0%,#16233a 60%,#1d2f4d 100%); color:#fff;
  padding:72px 0 88px; position:relative; overflow:hidden}
.hero:after{content:''; position:absolute; right:-140px; top:-140px; width:460px; height:460px;
  border-radius:50%; background:radial-gradient(circle,rgba(201,162,39,.22),transparent 65%)}
.hero .tag{display:inline-block; border:1px solid rgba(201,162,39,.5); color:var(--gold);
  border-radius:20px; padding:5px 14px; font-size:12.5px; font-weight:600; margin-bottom:18px;
  letter-spacing:.03em}
.hero h1{font-size:42px; font-weight:800; margin-bottom:14px; letter-spacing:-.03em}
.hero h1 em{font-style:normal; color:var(--gold)}
.hero p.lead{font-size:17px; color:#bcc7d8; max-width:560px; margin-bottom:28px}
.hero .cta{display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1}
@media(max-width:760px){ .hero{padding:48px 0 56px} .hero h1{font-size:30px} .hero p.lead{font-size:15px} }

/* ---------- 섹션 / 카드 ---------- */
section.block{padding:64px 0}
section.block.tight{padding:40px 0}
.sec-head{text-align:center; margin-bottom:36px}
.sec-head .eyebrow{color:var(--gold-dark); font-weight:700; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:8px}
.sec-head h2{font-size:27px}
.sec-head p{color:var(--muted); max-width:620px; margin:6px auto 0}
.grid{display:grid; gap:18px}
.grid > *{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px; box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.card .ico{width:42px; height:42px; border-radius:11px; background:var(--gold-soft);
  display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.panel .hd{padding:16px 20px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:10px}
.panel .hd h3{margin:0; flex:1}
.panel .bd{padding:20px}

/* ---------- 진행 단계 ---------- */
.steps-h{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; counter-reset:s}
.steps-h > *{min-width:0}
@media(max-width:820px){.steps-h{grid-template-columns:repeat(2,1fr)}}
.steps-h .s{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:20px 18px; position:relative}
.steps-h .s:before{counter-increment:s; content:counter(s); position:absolute; top:-12px; left:18px;
  width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700}
.steps-h .s h4{margin:8px 0 5px; font-size:15px}
.steps-h .s p{margin:0; font-size:13.5px; color:var(--muted)}

/* ---------- 진행 타임라인 ---------- */
.tl-head{display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:linear-gradient(135deg,#0d1626,#1d2f4d); color:#fff;
  border-radius:14px; padding:16px 20px; margin-bottom:6px}
.tl-now-k{font-size:11.5px; color:#9fadc2; letter-spacing:.04em; font-weight:600}
.tl-now-v{font-size:19px; font-weight:800; color:var(--gold); letter-spacing:-.02em; margin-top:2px}
.tl-prog{flex:1; min-width:170px}
.tl-prog-top{display:flex; justify-content:space-between; font-size:11.5px; color:#9fadc2;
  font-weight:600; margin-bottom:6px}
.tl-bar{height:6px; border-radius:6px; background:rgba(255,255,255,.16); overflow:hidden}
.tl-bar i{display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg,var(--ok),var(--gold)); transition:width .6s ease}
.tl-head .btn{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff;
  font-size:15px; padding:6px 11px}
.tl-head .btn:hover{background:rgba(255,255,255,.22)}
.tl-desc{font-size:13.5px; color:var(--muted); padding:12px 4px 16px}

.tl{list-style:none; margin:0; padding:0}
.tl .step{display:grid; grid-template-columns:30px 1fr; gap:14px; position:relative; padding-bottom:20px}
.tl .step:last-child{padding-bottom:0}
.tl .step:before{content:''; position:absolute; left:14px; top:32px; bottom:-2px; width:2px;
  background:var(--line); border-radius:2px}
.tl .step:last-child:before{display:none}
.tl .step.done:before{background:var(--ok)}
.tl .ring{width:30px; height:30px; border-radius:50%; border:2px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
  color:var(--faint); z-index:1; transition:.2s}
.tl .step.done .ring{background:var(--ok); border-color:var(--ok); color:#fff}
.tl.plain .step.done .ring{background:var(--ink); border-color:var(--ink)}
.tl.plain .step.done:before{background:var(--line)}
.tl .step.cur .ring{background:var(--gold); border-color:var(--gold); color:#1b1500;
  box-shadow:0 0 0 5px var(--gold-soft); animation:tlpulse 2.2s ease-in-out infinite}
@keyframes tlpulse{0%,100%{box-shadow:0 0 0 5px var(--gold-soft)}50%{box-shadow:0 0 0 9px rgba(201,162,39,.14)}}
.tl .body{padding-top:4px; min-width:0}
.tl .ttl{font-weight:700; font-size:14.5px; color:var(--faint); letter-spacing:-.01em}
.tl .step.done .ttl{color:var(--text)}
.tl .step.cur .ttl{color:var(--gold-dark); font-size:15.5px}
.tl .meta{font-size:12.5px; color:var(--faint); margin-top:2px}
.tl .step.cur .meta{color:var(--muted)}
.tl .note-line{font-size:12.5px; color:var(--muted); background:#f5f7fa; border-left:3px solid var(--line);
  border-radius:0 8px 8px 0; padding:7px 11px; margin-top:7px}
.tl .step.todo .ttl{font-weight:600}

/* 주소 입력 */
.addr-row{display:flex; gap:10px; align-items:flex-end; margin-bottom:16px}
.addr-row label.f{flex:0 0 150px}
.addr-row .btn{flex:0 0 auto; height:42px}

/* ---------- 폼 ---------- */
label.f, div.f{display:block; margin-bottom:16px}
label.f > span, div.f > span{display:block; font-size:13px; color:var(--muted); font-weight:600; margin-bottom:6px}
label.f > span.req:after, div.f > span.req:after{content:" *"; color:var(--danger)}
.qbtn{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--muted);
  font-size:11px; font-weight:800; cursor:pointer; padding:0; margin-left:5px; line-height:1;
  vertical-align:middle; transition:.12s}
.qbtn:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
input,select,textarea{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  font:inherit; color:var(--text); background:#fff; outline:none; transition:.12s}
input:focus,select:focus,textarea:focus{border-color:var(--ink-3); box-shadow:0 0 0 3px rgba(36,52,79,.1)}
input[readonly],input:disabled{background:#f5f6f8; color:var(--muted)}
textarea{resize:vertical; min-height:88px}
.hint{font-size:12.5px; color:var(--faint); margin-top:5px}
.err-txt{font-size:13px; color:var(--danger); margin-top:6px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.check{display:flex; gap:9px; align-items:flex-start; cursor:pointer; padding:7px 0; font-size:14px}
.check input{width:auto; margin-top:3px; flex:0 0 auto; accent-color:var(--ink)}

/* ---------- 배지 ---------- */
.badge{display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700;
  background:#eef1f5; color:#4b5563; white-space:nowrap}
.badge.gold{background:var(--gold-soft); color:var(--gold-dark)}
.badge.ok{background:var(--ok-soft); color:var(--ok)}
.badge.warn{background:var(--warn-soft); color:var(--warn)}
.badge.danger{background:var(--danger-soft); color:var(--danger)}
.badge.info{background:var(--info-soft); color:var(--info)}
.badge.ink{background:var(--ink); color:#fff}

/* ---------- 표 ---------- */
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:12px 12px; border-bottom:1px solid var(--line-2); text-align:left}
th{font-size:12.5px; color:var(--muted); font-weight:700; background:#fafbfc; white-space:nowrap}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:#fafbfd}

/* ---------- 알림 박스 ---------- */
.note{border-radius:var(--r); padding:14px 16px; font-size:14px; display:flex; gap:10px; align-items:flex-start}
.note .ic{flex:0 0 auto; font-size:16px; line-height:1.4}
.note.info{background:var(--info-soft); color:#173f9e}
.note.warn{background:var(--warn-soft); color:#8a5a00}
.note.ok{background:var(--ok-soft); color:#0a6b3c}
.note.danger{background:var(--danger-soft); color:#9b2626}
.note.plain{background:#f2f4f7; color:var(--muted)}

/* ---------- 푸터 ---------- */
footer.site{background:var(--ink); color:#93a0b4; padding:40px 0 30px; font-size:13px; margin-top:60px}
footer.site .logo{color:#fff; font-weight:800; letter-spacing:.06em; font-size:16px}
footer.site .logo b{color:var(--gold)}
footer.site a{color:#b9c4d4}
footer.site a:hover{color:#fff}
footer.site .foot-top{display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #22304a}
footer.site .links{display:flex; gap:18px; flex-wrap:wrap; margin-left:auto; font-size:13px}

footer.site .biz{color:#8b98ac; font-size:12.5px; line-height:1.9}
footer.site .biz-row{display:flex; flex-wrap:wrap; column-gap:26px; row-gap:2px}
footer.site .biz-i{white-space:nowrap}
footer.site .biz-i b{color:#cfd8e6; font-weight:700; margin-right:8px; font-size:12px}
footer.site .biz-sub{color:#6d7a8e}
footer.site .biz-link{display:inline-block; margin-left:6px; padding:1px 7px; border-radius:4px;
  border:1px solid #37465f; color:#9fadc2; font-size:11px; vertical-align:1px}
footer.site .biz-link:hover{background:#22304a; color:#fff}
footer.site .biz-note{color:#67748a; margin-top:14px; font-size:12px; line-height:1.7}
footer.site .biz-copy{color:#5d6a7e; margin-top:12px; padding-top:12px;
  border-top:1px solid #1b2739; font-size:12px; letter-spacing:.02em}

@media(max-width:760px){
  footer.site .foot-top{gap:14px}
  footer.site .links{margin-left:0; gap:14px}
  footer.site .biz-row{flex-direction:column; column-gap:0}
  footer.site .biz-i{white-space:normal}
}

/* ---------- 토스트 / 모달 ---------- */
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:28px; background:var(--ink);
  color:#fff; padding:13px 22px; border-radius:11px; box-shadow:var(--shadow-lg); z-index:300;
  font-weight:600; font-size:14px; animation:tin .2s ease}
.toast.err{background:var(--danger)}
@keyframes tin{from{opacity:0; transform:translate(-50%,10px)} to{opacity:1; transform:translate(-50%,0)}}
.modal-bg{position:fixed; inset:0; background:rgba(13,22,38,.6); display:flex; align-items:flex-start;
  justify-content:center; padding:40px 16px; overflow:auto; z-index:200}
.modal{background:#fff; border-radius:16px; width:100%; max-width:560px; box-shadow:var(--shadow-lg)}
.modal.wide{max-width:900px}
.modal .hd{padding:18px 22px; border-bottom:1px solid var(--line-2); display:flex; gap:10px; align-items:center}
.modal .hd h3{margin:0; flex:1}
.modal .hd [data-x]{width:32px; height:32px; padding:0; border-radius:8px; font-size:15px;
  color:var(--muted); flex:0 0 auto}
.modal .hd [data-x]:hover{background:#f0f2f5; color:var(--text)}
.modal .bd{padding:22px; max-height:calc(100vh - 220px); overflow:auto}
.modal .ft{padding:16px 22px; border-top:1px solid var(--line-2); display:flex; gap:9px}
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.92); display:flex; align-items:center;
  justify-content:center; z-index:400; cursor:zoom-out}
.lightbox img{max-width:94vw; max-height:94vh; object-fit:contain}

/* ---------- 사진 ---------- */
.photos{display:flex; gap:9px; flex-wrap:wrap}
.photo{position:relative; width:84px; height:116px; border-radius:9px; overflow:hidden;
  border:1px solid var(--line); background:#f1f3f6}
.photo img{width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in}
.photo .tag{position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.62); color:#fff;
  font-size:10px; text-align:center; padding:2px}
.photo .x{position:absolute; top:4px; right:4px; width:20px; height:20px; border:0; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; cursor:pointer; font-size:12px; line-height:1; padding:0}
.photo.add{display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-style:dashed; cursor:pointer; color:var(--muted); font-size:11px; gap:2px}
.photo.add:hover{border-color:var(--ink); color:var(--ink); background:#f8f9fb}

/* ---------- 마이페이지 레이아웃 ---------- */
.mp{display:grid; grid-template-columns:210px 1fr; gap:26px; align-items:start}
.mp > *{min-width:0}
@media(max-width:820px){ .mp{grid-template-columns:1fr} }
.mp-nav{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:8px;
  box-shadow:var(--shadow); position:sticky; top:78px}
@media(max-width:820px){ .mp-nav{position:static; display:flex; overflow-x:auto} }
.mp-nav a{display:block; padding:11px 14px; border-radius:9px; font-weight:600; font-size:14px;
  color:var(--muted); white-space:nowrap}
.mp-nav a:hover{background:#f4f6f9; color:var(--text)}
.mp-nav a.on{background:var(--ink); color:#fff}
.page-head{padding:28px 0 18px}
.wrap.page-head{padding:28px 20px 18px}
.page-head h1{font-size:26px; margin:0}
.page-head p{color:var(--muted); margin:6px 0 0}

/* ---------- 카드 입력 블록 ---------- */
.cardbox{border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:14px; background:#fff}
.cardbox .hd{display:flex; gap:8px 10px; align-items:center; margin-bottom:14px; flex-wrap:wrap}
.cardbox .hd .n{background:var(--ink); color:#fff; border-radius:8px; width:26px; height:26px;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex:0 0 auto}
.cardbox .hd b{flex:1; font-size:15px; min-width:120px}
.sticky-total{position:sticky; bottom:0; background:#fff; border-top:2px solid var(--ink);
  box-shadow:0 -6px 24px rgba(13,22,38,.08); padding:14px 0; z-index:20; margin-top:20px}
.sum-line{display:flex; justify-content:space-between; padding:7px 0; font-size:14px}
.sum-line.total{border-top:1px solid var(--line); margin-top:8px; padding-top:12px;
  font-size:18px; font-weight:800}

.only-mobile{display:none}
@media(max-width:860px){ .only-mobile{display:block} }

/* 마이페이지 좁은 화면 보정 */
@media(max-width:820px){
  .mp-nav{gap:4px; padding:6px; -webkit-overflow-scrolling:touch}
  .mp-nav a{padding:10px 13px; font-size:13.5px}
  .note .btn{flex:0 0 auto}
  .note{flex-wrap:wrap}
}
@media(max-width:520px){
  .page-head h1{font-size:22px}
  .card{padding:18px}
  .panel .bd{padding:16px}
  .sum-line{font-size:13.5px}
  .sum-line.total{font-size:16px}
}

/* 접수 내역 송장 입력 */
.trk-cell{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.trk-cell select{width:112px; padding:7px 9px; font-size:12.5px}
.trk-cell input{width:132px; padding:7px 9px; font-size:12.5px}
.trk-cell .btn{padding:7px 11px; font-size:12.5px}
.trk-val{font-size:13px; font-weight:700; letter-spacing:.01em}
.trk-val span{display:block; font-size:11.5px; color:var(--faint); font-weight:500}
@media(max-width:760px){
  .trk-cell select,.trk-cell input{width:100%}
  .addr-row{flex-wrap:wrap}
  .addr-row label.f{flex:1 1 140px}
}


/* ---------- 메인 히어로 (밝은 · 3D 슬랩 링) ---------- */
.hero2{position:relative; overflow:hidden; background:
  radial-gradient(1200px 520px at 78% 55%, #ffffff 0%, #f6f7f9 55%, #eef0f4 100%);
  border-bottom:1px solid var(--line-2)}
.hero2 .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); align-items:center; gap:24px;
  min-height:600px; padding-top:40px; padding-bottom:40px}
.hero2 .tag{display:inline-block; border:1px solid var(--line); background:#fff; color:#4b5563;
  border-radius:30px; padding:7px 16px; font-size:12px; font-weight:700; letter-spacing:.06em;
  margin-bottom:22px; box-shadow:0 1px 2px rgba(13,22,38,.04)}
.hero2 h1{font-size:50px; line-height:1.18; font-weight:800; letter-spacing:-.035em; color:var(--ink); margin-bottom:18px}
.hero2 p.lead{font-size:16.5px; color:#5b6576; max-width:520px; margin-bottom:32px; line-height:1.75}
.hero2 .cta{display:flex; gap:10px; flex-wrap:wrap}
.hero2 .cta .btn.lg{padding:16px 28px; font-size:15.5px}
.hero2 .trust{display:flex; gap:22px; margin-top:34px; flex-wrap:wrap; color:#6b7484; font-size:13px}
.hero2 .trust b{display:block; color:var(--ink); font-size:20px; letter-spacing:-.02em}
.hero2 .reveal{opacity:0; transform:translateY(14px); animation:heroIn .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero2 .reveal.d1{animation-delay:.08s} .hero2 .reveal.d2{animation-delay:.16s}
.hero2 .reveal.d3{animation-delay:.24s} .hero2 .reveal.d4{animation-delay:.32s}
@keyframes heroIn{to{opacity:1; transform:none}}

/* 오른쪽 그림 영역: 영상 또는 3D 애니메이션 */
.hero-media{position:relative; height:520px; min-width:0; display:flex; align-items:center; justify-content:center}
.hero-media video{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%)}

.stage{position:absolute; left:50%; top:50%; margin:-260px 0 0 -320px; width:640px; height:520px; perspective:2600px; perspective-origin:50% 30%;
  transform-origin:50% 50%}
.stage .floor{position:absolute; left:50%; top:63%; width:640px; height:180px; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(13,22,38,.16), rgba(13,22,38,.06) 55%, transparent 100%);
  filter:blur(6px)}
.stage .tilt{position:absolute; left:50%; top:47%; width:0; height:0; transform-style:preserve-3d;
  transform:rotateX(-21deg)}
.stage .spin{position:absolute; transform-style:preserve-3d; animation:ringSpin 28s linear infinite}
@keyframes ringSpin{from{transform:rotateY(0deg)} to{transform:rotateY(-360deg)}}
.stage .ring{position:absolute; width:520px; height:520px; left:-260px; top:-260px; border-radius:50%;
  transform:translateY(36px) rotateX(90deg); border:3px solid #d4af37;
  box-shadow:0 0 0 1px rgba(255,236,170,.6) inset, 0 0 18px rgba(212,175,55,.35)}
.stage .ring.r2{width:534px; height:534px; left:-267px; top:-267px; border:1px solid rgba(212,175,55,.45); box-shadow:none}
.stage .center{position:absolute; left:-130px; top:-74px; width:260px; text-align:center;
  animation:ringCounter 28s linear infinite; transform-style:preserve-3d}
@keyframes ringCounter{from{transform:rotateY(0deg) rotateX(21deg)} to{transform:rotateY(360deg) rotateX(21deg)}}
.stage .center .mk{font-size:46px; font-weight:900; letter-spacing:.04em; color:var(--ink); line-height:1}
.stage .center .mk span{color:#d4af37}
.stage .center .sub{font-size:13px; font-weight:800; letter-spacing:.32em; color:#1f2a44; margin-top:8px}
.stage .center .line{width:56px; height:2px; background:#d4af37; margin:10px auto 0}

.slab{position:absolute; left:-48px; top:-82px; width:96px; height:164px; transform-style:preserve-3d}
.slab .bob{position:absolute; inset:0; animation:slabBob 5s ease-in-out infinite}
@keyframes slabBob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
.slab .case{position:absolute; inset:0; border-radius:6px; padding:5px 5px 6px;
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(236,240,245,.82) 40%, rgba(255,255,255,.9));
  border:1px solid rgba(160,170,185,.55);
  box-shadow:0 10px 22px rgba(13,22,38,.18), inset 0 0 0 2px rgba(255,255,255,.7), inset 0 0 12px rgba(150,165,190,.25)}
.slab .case:after{content:''; position:absolute; inset:0; border-radius:6px; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.65) 45%, transparent 58%);
  background-size:260% 100%; animation:gloss 6s ease-in-out infinite}
@keyframes gloss{0%,100%{background-position:120% 0} 50%{background-position:-20% 0}}
.slab .label{height:30px; border:1.5px solid #c8102e; border-radius:2px; background:#fff; padding:2px 4px;
  display:flex; justify-content:space-between; gap:3px; font-family:Arial,Helvetica,sans-serif; color:#222}
.slab .label .l{font-size:4.6px; line-height:1.25; font-weight:700; text-transform:uppercase; overflow:hidden}
.slab .label .r{font-size:4.6px; line-height:1.25; font-weight:700; text-align:right; white-space:nowrap}
.slab .label .r b{display:block; font-size:9px; line-height:1}
.slab .label .bc{height:4px; margin-top:1px; background:repeating-linear-gradient(90deg,#222 0 1px,transparent 1px 2px,#222 2px 4px,transparent 4px 5px)}
.slab .well{margin-top:6px; height:116px; border-radius:3px; background:rgba(255,255,255,.6);
  box-shadow:inset 0 0 0 1px rgba(170,180,195,.5); display:flex; align-items:center; justify-content:center}
.slab .art{width:80px; height:110px; border-radius:4px; overflow:hidden; position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.slab .art img, .slab .art svg{width:100%; height:100%; object-fit:cover; display:block}
.slab .art:after{content:''; position:absolute; inset:0; mix-blend-mode:color-dodge; opacity:.35;
  background:linear-gradient(125deg, transparent 20%, rgba(255,120,200,.6) 35%, rgba(120,220,255,.6) 50%, rgba(255,240,120,.6) 65%, transparent 80%);
  background-size:300% 300%; animation:holo 5s linear infinite}
@keyframes holo{from{background-position:0% 50%} to{background-position:300% 50%}}

@media(max-width:1100px){ .stage{transform:scale(.85)} .hero2 h1{font-size:42px} }
@media(max-width:900px){
  .hero2 .wrap{grid-template-columns:minmax(0,1fr); min-height:0; padding-top:36px; padding-bottom:12px; gap:0}
  .hero2 .copy{text-align:center} .hero2 p.lead{margin-left:auto; margin-right:auto}
  .hero2 .cta, .hero2 .trust{justify-content:center}
  .hero-media{height:380px; margin-top:-10px}
  .stage{transform:scale(.62)}
}
@media(max-width:480px){
  .hero2 h1{font-size:32px} .hero2 p.lead{font-size:15px}
  .hero-media{height:300px}
  .stage{transform:scale(.5)}
}
@media(prefers-reduced-motion:reduce){
  .stage .spin, .stage .center, .slab .bob, .slab .case:after, .slab .art:after{animation:none}
}
.stage-only{position:fixed; inset:0; background:#fff; overflow:hidden}
.stage-only .stage{transform:scale(1.05)}

/* ---------- 마이페이지: 등급 진행 상태 ---------- */
.prog-head{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.prog-head h2{margin:0 0 4px}
.prog-head p{margin:0}
.prog-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.pchip{display:inline-flex; align-items:center; gap:10px; border:1px solid #cfd5df; background:#fff; color:#4b5563;
  border-radius:30px; padding:8px 16px; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:.15s}
.pchip b{font-size:15px; color:#9aa3b2; font-weight:800; min-width:10px; text-align:right}
.pchip.has b{color:var(--ink)}
.pchip:hover{border-color:var(--ink)}
.pchip.on{background:var(--ink); border-color:var(--ink); color:#fff}
.pchip.on b{color:var(--gold)}
.pchip.muted-chip{border-style:dashed}
.pstat{display:inline-block; min-width:96px; padding:6px 12px; border:1.5px solid #c8102e; color:#c8102e; border-radius:4px;
  font-weight:800; font-size:13px; background:#fff; white-space:nowrap; text-align:center}
.pstat.st-done,.pstat.st-shipped_customer,.pstat.st-arrived_kr,.pstat.st-graded{border-color:var(--ok); color:var(--ok)}
.pstat.st-awaiting_payment,.pstat.st-payment_review,.pstat.st-awaiting_card,.pstat.st-submitted{border-color:var(--warn); color:var(--warn)}
.pstat.st-cancelled{border-color:#c3c8d0; color:#8a93a3}
.pstat.st-hold{border-color:var(--warn); color:var(--warn); border-style:dashed}
.prog-table th{background:#f3f5f8}
.pager{display:flex; justify-content:center; gap:6px; padding:16px}
.pager .pg{min-width:36px; height:36px; border:1px solid var(--line); background:#fff; border-radius:6px; font:inherit; cursor:pointer; color:#4b5563}
.pager .pg.on{border-color:var(--info); color:var(--info); font-weight:700}
.pager .pg:disabled{opacity:.4; cursor:default}
.prog-guide{list-style:none; margin:0; padding:0}
.prog-guide li{display:flex; gap:14px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-2)}
.prog-guide li:last-child{border-bottom:0}
@media(max-width:760px){
  .pchip{padding:7px 12px; font-size:12.5px; gap:7px}
  table.prog-table thead{display:none}
  table.prog-table, table.prog-table tbody, table.prog-table tr, table.prog-table td{display:block; width:100%}
  table.prog-table tr{padding:12px 16px; border-bottom:1px solid var(--line)}
  table.prog-table td{border:0; padding:3px 0; text-align:left !important}
  table.prog-table td[data-l]::before{content:attr(data-l); display:inline-block; width:78px; color:var(--faint); font-size:12px}
  table.prog-table td.right{text-align:right !important}
}
.prog-table th,.prog-table td{padding:12px 8px}
.prog-table .trk-cell{flex-wrap:nowrap; gap:4px}
.prog-table .trk-cell select{width:88px; padding:6px} .prog-table .trk-cell input{width:96px; padding:6px}
.prog-table .trk-cell .btn{padding:6px 9px}
.prog-table .pstat{min-width:76px; padding:5px 7px; font-size:12.5px}
@media(max-width:760px){ .prog-table .trk-cell{min-width:0; flex-wrap:wrap} }

/* ---------- 주소 · 배송지 ---------- */
.addr-box{border:1px solid var(--line); border-radius:12px; padding:14px 16px 4px; margin-bottom:16px; background:#fafbfc}
.addr-box-h{display:flex; flex-direction:column; gap:2px; margin-bottom:10px}
.addr-card{border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:10px; background:#fff; display:flex; gap:12px; align-items:flex-start}
.addr-card.def{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset}
.addr-pick{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:8px; cursor:pointer}
.addr-pick:hover{border-color:#c9d0db}
.addr-pick input{width:auto; flex:0 0 auto; margin-top:4px}
.addr-pick > div{flex:1; min-width:0}
.addr-pick.on{border-color:var(--ink); background:#fafbfc}
.ship-link{display:inline-block; margin-top:3px; font-size:12px; color:var(--info); text-decoration:underline; cursor:pointer; background:none; border:0; padding:0; font-family:inherit}

/* ---------- 결제 단계 · 결제 수단 ---------- */
.pay-steps{display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap}
.pay-steps .ps{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--faint)}
.pay-steps .ps span{width:24px; height:24px; border-radius:50%; border:1.5px solid #cfd5df; display:flex; align-items:center; justify-content:center; font-size:12px; background:#fff}
.pay-steps .ps.cur{color:var(--ink)} .pay-steps .ps.cur span{background:var(--ink); border-color:var(--ink); color:#fff}
.pay-steps .ps.done{color:var(--ok)} .pay-steps .ps.done span{background:var(--ok); border-color:var(--ok); color:#fff}
.pay-steps i{width:22px; height:1.5px; background:#d8dde5}
.pm-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pm-tile{display:flex; flex-direction:column; gap:4px; text-align:left; border:1.5px solid var(--line); border-radius:12px; background:#fff;
  padding:16px; cursor:pointer; font:inherit; color:var(--text); transition:.15s}
.pm-tile b{font-size:16px} .pm-tile span{font-size:12.5px; color:var(--muted)}
.pm-tile:hover{border-color:#b9c1ce}
.pm-tile.on{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink) inset; background:#fafbfc}
.pm-tile:disabled{opacity:.5; cursor:not-allowed}
@media(max-width:560px){ .pm-grid{grid-template-columns:1fr} .pay-steps i{width:10px} }