/* 타건샵 공통 스타일 */
:root{
  --ink:#1f2124; --ink-2:#55575a; --muted:#8a8d91; --line:#e3e4e6; --bg:#f4f4f2; --card:#fff;
  --red:#e0173f; --orange:#f5960f; --blue:#3f74c4; --green:#33863a; --purple:#8640a3;
  --accent:#3f74c4;
  --radius:14px;
  font-family:"Pretendard","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-size:15px;line-height:1.55;word-break:keep-all}
a{color:inherit}
img{max-width:100%}

.btn{appearance:none;border:1px solid #cfd1d4;background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:600;
  padding:8px 14px;border-radius:9px;cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap;transition:background .15s,border-color .15s,transform .05s}
.btn:hover{background:#f6f6f6;border-color:#b9bcc0}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:wait}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.primary:hover{background:#000}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:#ececea}

/* ---------- 메인 페이지 ---------- */
.home-head{background:#fff;border-bottom:1px solid var(--line)}
.home-head .inner{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px}
.home-head img{height:46px}
.home-head nav{margin-left:auto;display:flex;gap:6px;font-weight:600;font-size:14px}
.home-head nav a{text-decoration:none;padding:8px 12px;border-radius:8px;color:var(--ink-2)}
.home-head nav a:hover{background:var(--bg);color:var(--ink)}

.stripe{display:flex;height:5px}
.stripe i{flex:1}
.stripe i:nth-child(1){background:var(--red)} .stripe i:nth-child(2){background:var(--orange)}
.stripe i:nth-child(3){background:var(--blue)} .stripe i:nth-child(4){background:var(--green)}
.stripe i:nth-child(5){background:var(--purple)}

.hero{background:#2c2e31;color:#fff;overflow:hidden;position:relative}
.hero .inner{max-width:1120px;margin:0 auto;padding:64px 24px 72px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:42px;line-height:1.2;margin:0 0 14px;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:#ffd166}
.hero p{color:#c9cbce;font-size:17px;margin:0 0 28px;max-width:30em}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap}
.hero .btn.primary{background:#fff;color:var(--ink);border-color:#fff;padding:13px 22px;font-size:16px}
.hero .btn.primary:hover{background:#ffd166;border-color:#ffd166}
.hero .btn.line{background:transparent;color:#fff;border-color:#6b6e72;padding:13px 22px;font-size:16px}
.hero .btn.line:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.hero .art{justify-self:end;width:100%;max-width:420px}
.hero .art img{width:100%;display:block}

.section{max-width:1120px;margin:0 auto;padding:56px 24px}
.section h2{font-size:24px;margin:0 0 6px;letter-spacing:-.01em}
.section .sub{color:var(--muted);margin:0 0 26px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px 20px;text-decoration:none;
  position:relative;display:flex;flex-direction:column;min-height:190px;transition:transform .15s,box-shadow .15s,border-color .15s}
.card::before{content:"";position:absolute;left:20px;top:0;width:44px;height:5px;border-radius:0 0 4px 4px;background:var(--c,var(--blue))}
.card h3{margin:14px 0 6px;font-size:18px}
.card p{margin:0;color:var(--ink-2);font-size:14px}
.card .go{margin-top:auto;padding-top:16px;font-weight:700;font-size:14px;color:var(--c,var(--blue))}
.card.live:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.08);border-color:#d3d5d8}
.card.soon{opacity:.72}
.card.soon .go{color:var(--muted)}
.card .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.card .ico svg{width:22px;height:22px}

.info{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.info .box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.info dl{display:grid;grid-template-columns:88px 1fr;gap:8px 12px;margin:0;font-size:14px}
.info dt{color:var(--muted)}
.info dd{margin:0;font-weight:600}

.home-foot{border-top:1px solid var(--line);background:#fff;color:var(--muted);font-size:13px}
.home-foot .inner{max-width:1120px;margin:0 auto;padding:22px 24px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.home-foot img{height:26px;opacity:.85}

@media (max-width:900px){
  .hero .inner{grid-template-columns:1fr;padding:44px 20px 52px}
  .hero .art{justify-self:start;max-width:260px;order:-1}
  .hero h1{font-size:32px}
  .cards{grid-template-columns:1fr 1fr}
  .info{grid-template-columns:1fr}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr}
  .home-head nav{display:none}
  .section{padding:40px 16px}
}

/* ---------- 견적서 페이지 ---------- */
.quote-page{background:#e9e9e6}
.topbar{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:8px 18px}
.topbar .brand img{height:34px;display:block}
.topbar-title{font-weight:800;font-size:16px;padding-left:14px;border-left:1px solid var(--line)}
.topbar .actions{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.topbar .sep{width:1px;height:22px;background:var(--line);margin:0 4px}

.quote-wrap{display:flex;gap:22px;justify-content:center;align-items:flex-start;padding:22px 18px 60px}
.tips{position:sticky;top:76px;width:250px;flex:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:13px;color:var(--ink-2)}
.tips h2{font-size:14px;margin:0 0 8px;color:var(--ink)}
.tips ul{margin:0;padding-left:18px}
.tips li{margin:5px 0}
.tips kbd{font:inherit;font-size:11px;border:1px solid #ccc;border-bottom-width:2px;border-radius:4px;padding:0 4px;background:#fafafa}
.tips .saved{margin:12px 0 0;font-size:12px;color:var(--green)}
.paper-scroll{max-width:100%;overflow-x:auto}
.paper{background:#fff;width:210mm;min-height:297mm;padding:10mm;box-shadow:0 2px 4px rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.08)}

.modal{position:fixed;inset:0;z-index:50;background:rgba(20,22,25,.45);display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-card{background:#fff;border-radius:14px;width:min(880px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal-head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:17px}
.modal-head .x{margin-left:auto;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--muted)}
.modal-body{padding:16px 20px;overflow:auto}
.modal-body .hint{margin:0 0 10px;color:var(--ink-2);font-size:13.5px}
.modal-body textarea{width:100%;min-height:150px;border:1px solid #cfd1d4;border-radius:10px;padding:10px 12px;font:inherit;font-size:13.5px;resize:vertical}
.modal-body .row-btns{margin:10px 0}
.modal-foot{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--line)}
.modal-foot .grow{flex:1}
.chk{font-size:13.5px;display:flex;gap:6px;align-items:center;color:var(--ink-2)}
.ptable{width:100%;border-collapse:collapse;font-size:13.5px}
.ptable th{text-align:left;color:var(--muted);font-weight:600;padding:6px;border-bottom:1px solid var(--line)}
.ptable td{padding:4px 6px;border-bottom:1px solid #f0f0f0}
.ptable td:first-child{width:44px;text-align:center}
.ptable select{font:inherit;padding:5px;border:1px solid #d5d7da;border-radius:7px;width:120px}
.ptable input[type=text]{font:inherit;width:100%;padding:5px 8px;border:1px solid #d5d7da;border-radius:7px}
.ptable input.r{text-align:right;width:110px}
.ptable td:last-child{width:124px}
.empty{color:var(--red);font-size:13.5px}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#1f2124;color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast[hidden]{display:none}

@media (max-width:1180px){ .tips{display:none} }
@media (max-width:760px){
  .topbar{flex-wrap:wrap}
  .topbar-title{display:none}
  .topbar .actions{margin-left:0;width:100%}
}

/* ---------- 인쇄 ---------- */
@page{size:A4 portrait;margin:10mm}
@media print{
  html,body{background:#fff !important}
  .no-print,.topbar,.tips,.modal,.toast{display:none !important}
  .quote-wrap{padding:0;display:block}
  .paper-scroll{overflow:visible}
  .paper{width:auto;min-height:0;padding:0;box-shadow:none}
  .sheet{margin:0 auto}
  .sheet .ce:empty::before{content:none !important}
  .sheet td.linked{background:none !important}
  .sheet .ce{background:none !important;box-shadow:none !important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- 매장 안내 (오시는 길 · 영업시간) ---------- */
.visit{--paper:#f3f2ef;--dark:#17181b;--txt2:#5c5f66;--blue2:#1e5bd8;--mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  background:var(--paper);background-image:radial-gradient(#d9d7d1 1.1px,transparent 1.2px);background-size:22px 22px;border-top:1px solid var(--line)}
.visit-inner{max-width:1120px;margin:0 auto;padding:72px 24px 56px}
.visit .mono{font-family:var(--mono);font-size:13px;letter-spacing:.22em;color:#6b6e75;text-transform:uppercase}
.visit-head{margin-bottom:30px}
.visit-head h2{font-size:34px;margin:6px 0 6px;letter-spacing:-.02em}
.visit-head p{margin:0;color:var(--txt2)}
.visit-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:22px;align-items:start}
.vcard{background:rgba(255,255,255,.55);backdrop-filter:blur(2px);border:1px solid #e2e0da;border-radius:22px;padding:30px 30px 28px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.vcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.kicker{font-size:17px;font-weight:600;color:var(--txt2)}
.display{font-size:clamp(46px,6.2vw,76px);line-height:1;font-weight:900;letter-spacing:-.045em;margin:12px 0 18px;color:var(--dark)}
.rule{border:0;border-top:2px solid var(--dark);margin:0 0 18px}
.rule.thin{border-top:1px solid #d5d3cd;margin:6px 0 6px}
.place{margin:0;font-size:24px;color:var(--blue2);letter-spacing:-.02em}
.place b{font-weight:800}
.addr{margin:4px 0 18px;color:var(--txt2);font-size:16px}
.route{border:1px solid #e2e0da;border-radius:18px;overflow:hidden;background:#fff}
.route svg{display:block;width:100%;height:auto;font-family:inherit}
.route text{font-weight:800}
.route .t-w{fill:#fff;font-size:22px}
.route .t-lg{font-size:24px}
.route .t-sm{font-size:17px}
.route .t-st{fill:var(--dark);font-size:30px}
.route .t-blue{fill:var(--blue2);font-size:19px}
.route .t-bld{fill:var(--dark);font-size:36px;letter-spacing:-.02em}
.route .t-sub{fill:#5c5f66;font-size:19px;font-weight:500}
.route .t-room{fill:var(--dark);font-size:25px}
.route .t-road{fill:#6b6e75;font-size:17px;font-weight:600}
.route .dash{animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-40}}
@media (prefers-reduced-motion:reduce){.route .dash{animation:none}}
.ways{display:grid;gap:12px;margin-top:14px}
.way{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid #e2e0da;border-radius:16px;padding:16px 18px}
.way-ico{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff}
.way-ico svg{width:26px;height:26px}
.way-ico.green{background:#00a84d}.way-ico.blue{background:var(--blue2)}
.way-k{display:block;font-size:13px;color:var(--txt2)}
.way strong{display:block;font-size:19px;letter-spacing:-.02em;line-height:1.35}
.way em{display:block;font-style:normal;font-size:14px;color:var(--txt2)}
.maplinks{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.pill{font:inherit;font-size:14px;font-weight:700;text-decoration:none;padding:9px 16px;border-radius:999px;background:var(--dark);color:#fff;border:1px solid var(--dark);cursor:pointer}
.pill:hover{background:#000}
.pill.ghost{background:transparent;color:var(--dark)}
.pill.ghost:hover{background:#fff}

.bars{display:flex;gap:10px;margin:0 0 14px}
.bars i{width:56px;height:7px;border-radius:4px}
.bars i:nth-child(1){background:var(--red)}.bars i:nth-child(2){background:var(--orange)}.bars i:nth-child(3){background:var(--blue)}.bars i:nth-child(4){background:var(--green)}.bars i:nth-child(5){background:var(--purple)}
.days-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.days{margin:0;font-size:30px;font-weight:900;color:var(--blue2);letter-spacing:-.03em}
.status{font-size:13px;font-weight:700;padding:6px 12px 6px 26px;border-radius:999px;position:relative;background:#fff;border:1px solid #e2e0da}
.status::before{content:"";position:absolute;left:11px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#9aa0a6}
.status.on{color:#0b7a3b}.status.on::before{background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.6);animation:pulse 1.8s infinite}
.status.soon{color:#a15c00}.status.soon::before{background:var(--orange)}
.status.off{color:#9b1c2e}.status.off::before{background:var(--red)}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.time{display:flex;align-items:flex-end;justify-content:space-between;padding:4px 0}
.time-l{display:flex;flex-direction:column;padding-bottom:12px}
.time-l b{font-size:22px;color:var(--dark)}
.time-n{font-size:clamp(64px,8.6vw,112px);font-weight:900;line-height:1;letter-spacing:.01em;color:var(--dark);font-variant-numeric:tabular-nums}
.closed{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid #e2e0da;border-radius:18px;padding:18px 20px;margin:18px 0 20px}
.closed-tag{flex:none;background:#c8213a;color:#fff;font-weight:800;font-size:19px;padding:9px 20px;border-radius:999px}
.closed strong{display:block;font-size:21px;letter-spacing:-.02em}
.closed em{display:block;font-style:normal;font-size:14px;color:var(--txt2)}
#nextClosed{display:block;margin-top:2px;font-weight:700;color:#c8213a}
.nobreak{font-size:24px;margin:0 0 6px;letter-spacing:-.03em;color:var(--dark)}
.nobreak-p{margin:0 0 20px;color:var(--txt2);white-space:pre-line}
.cta3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cta-b{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--dark);color:#fff;text-decoration:none;font-weight:800;font-size:16px;padding:16px 8px;border-radius:14px;transition:transform .12s,background .12s}
.cta-b:hover{background:#000;transform:translateY(-2px)}
.cta-b svg{width:20px;height:20px}

.infobar{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:12px 24px;margin-top:22px;background:#fff;border:1px solid #e2e0da;border-radius:16px;padding:16px 22px;font-size:14px}
.infobar span{color:var(--txt2);margin-right:10px}
.infobar b{font-weight:700}
.visit-foot{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:16px}
.handle{font-family:var(--mono);font-size:20px;color:var(--dark);text-decoration:none}
.handle:hover{text-decoration:underline}
.keys{display:flex;gap:10px}
.keys span{width:52px;height:56px;display:grid;place-items:center;padding-top:6px;background:#fff;border:1px solid #dddad3;border-radius:10px;box-shadow:0 4px 0 #d6d3cb;font-family:var(--mono);font-weight:500;font-size:20px;position:relative;transition:transform .08s,box-shadow .08s}
.keys span::before{content:"";position:absolute;top:8px;left:50%;width:22px;height:4px;margin-left:-11px;border-radius:2px;background:var(--k)}
.keys span:hover{transform:translateY(3px);box-shadow:0 1px 0 #d6d3cb}

@media (max-width:980px){
  .visit-grid{grid-template-columns:1fr}
  .infobar{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .visit-inner{padding:52px 16px 40px}
  .vcard{padding:22px 18px;border-radius:18px}
  .vcard-top{flex-direction:column-reverse;gap:4px}
  .place{font-size:20px}
  .days{font-size:24px}
  .closed{flex-direction:column;align-items:flex-start;gap:10px}
  .cta3{grid-template-columns:1fr}
  .infobar{grid-template-columns:1fr}
  .visit-foot{flex-direction:column;align-items:flex-start}
  .keys span{width:46px;height:50px}
}

.subtalk{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 16px;border-radius:14px;background:#fee500;color:#191919;text-decoration:none;font-size:14.5px;font-weight:700;transition:filter .12s}
.subtalk:hover{filter:brightness(.96)}
.subtalk .kk{font-family:var(--mono);font-size:11px;letter-spacing:.08em;background:#191919;color:#fee500;padding:3px 7px;border-radius:6px}
.subtalk b{margin-left:auto}