@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

/* =========================================================
   이음상회 — editorial commerce system
   기하: 직각. 장식: 괘선. 색: 먹 + 한지 + 벽돌.
   ========================================================= */
:root {
  --paper:    #FFFFFF;
  --sand:     #F6F3EE;
  --sand-2:   #EDE8E0;
  --ink:      #100E0C;
  --ink-80:   #34302B;
  --ink-55:   #6E675E;
  --ink-40:   #948C82;
  --rule:     #E2DCD3;
  --rule-2:   #CFC7BB;

  --brick:    #A32B1E;
  --brick-2:  #7C1D13;
  --pine:     #1E4034;

  --wrap:  1320px;
  --gut:   clamp(18px, 4vw, 44px);
  --ease:  cubic-bezier(.4,.14,.2,1);

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-80);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.72;
  letter-spacing: -.014em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -.038em; line-height: 1.18; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
strong, b { font-weight: 700; color: var(--ink); }

::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.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; }

/* 한국어 줄바꿈 */
p, li, span, dd, dt, td, th, label, figcaption { word-break: keep-all; overflow-wrap: break-word; }

/* 숫자는 표 정렬 */
.num, .p-price, .sum-total b, .kpi__n { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* =========================================================
   타입 스케일
   ========================================================= */
.d1 { font-size: clamp(2.4rem, 5.6vw, 4.35rem); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; }
.d2 { font-size: clamp(1.85rem, 3.4vw, 2.8rem);  font-weight: 800; line-height: 1.16; letter-spacing: -.042em; }
.d3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem);   font-weight: 700; line-height: 1.32; }

.body-lg { font-size: clamp(.97rem, 1.15vw, 1.06rem); line-height: 1.85; color: var(--ink-55); }
.meta    { font-size: 12.5px; line-height: 1.6; color: var(--ink-40); letter-spacing: 0; }

/* 섹션 라벨 — 괘선 + 한글. 영문 eyebrow 없음 */
.slabel {
  display: block; padding-top: 13px; border-top: 1.5px solid var(--ink);
  font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: .02em;
}
.slabel--light { border-top-color: rgba(255,255,255,.65); color: #fff; }

.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.shead__t { margin-top: 20px; }
.shead__d { margin-top: 14px; max-width: 46em; }

.sec { padding: clamp(64px, 8vw, 108px) 0; }
.sec--sand { background: var(--sand); }
.sec--ink  { background: var(--ink); color: rgba(255,255,255,.68); }
.sec--ink h1, .sec--ink h2, .sec--ink h3, .sec--ink strong, .sec--ink b { color: #fff; }
.sec--tight { padding: clamp(46px, 5vw, 68px) 0; }

/* =========================================================
   버튼 / 링크 — 직각, 리프트 없음
   ========================================================= */
.btn {
  --bg: var(--ink); --fg: #fff; --bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 30px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
  font-size: 15px; font-weight: 600; letter-spacing: -.02em;
  cursor: pointer; transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { --bg: var(--brick); --bd: var(--brick); --fg: #fff; }
.btn--line  { --bg: transparent; --fg: var(--ink); --bd: var(--rule-2); }
.btn--line:hover { --bg: var(--ink); --bd: var(--ink); --fg: #fff; }
.btn--onink { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.btn--onink:hover { --bg: var(--brick); --bd: var(--brick); --fg: #fff; }
.btn--ghostink { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.3); }
.btn--ghostink:hover { --bg: #fff; --bd: #fff; --fg: var(--ink); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 13.5px; }
.btn--full { width: 100%; }
.btn svg { width: 15px; height: 15px; flex: none; }

.tlink {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  padding-bottom: 3px; border-bottom: 1px solid var(--ink);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.tlink:hover { color: var(--brick); border-color: var(--brick); }
.tlink svg { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.tlink:hover svg { transform: translateX(3px); }
.tlink--light { color: #fff; border-color: rgba(255,255,255,.5); }
.tlink--light:hover { color: #fff; border-color: #fff; }

/* =========================================================
   헤더 — 유틸바 + 메인바
   ========================================================= */
.util { background: var(--ink); color: rgba(255,255,255,.62); font-size: 12px; letter-spacing: -.01em; }
.util__in { display: flex; align-items: center; justify-content: space-between; height: 34px; gap: 20px; }
.util__l { display: flex; gap: 18px; }
.util__r { display: flex; gap: 18px; }
.util a:hover, .util__l span:first-child { color: #fff; }
@media (max-width: 760px) { .util__l { display: none; } .util__in { justify-content: center; } }

.hd { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--rule); }
.hd__in { display: flex; align-items: center; height: 72px; gap: 40px; }

.logo { display: inline-flex; align-items: baseline; gap: 9px; flex: none; }
.logo__ko { font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -.05em; }
.logo__en { font-size: 9.5px; font-weight: 700; letter-spacing: .2em; color: var(--ink-40); }

.gnb { display: flex; gap: 30px; }
.gnb a {
  position: relative; display: block; padding: 26px 0;
  font-size: 15.5px; font-weight: 600; color: var(--ink-80);
  transition: color .18s var(--ease);
}
.gnb a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.gnb a:hover { color: var(--ink); }
.gnb a:hover::after, .gnb a[aria-current="page"]::after { transform: scaleX(1); }
.gnb a[aria-current="page"] { color: var(--ink); }

.hd__r { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.hd__tel { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.hd__tel b { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.hd__tel span { font-size: 10.5px; color: var(--ink-40); letter-spacing: 0; }

.burger {
  display: none; margin-left: auto; width: 40px; height: 40px;
  align-items: center; justify-content: center; gap: 4px; flex-direction: column;
  background: none; border: 0; cursor: pointer;
}
.burger i { display: block; width: 19px; height: 1.5px; background: var(--ink); transition: transform .25s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1000px) {
  .gnb, .hd__r { display: none; }
  .burger { display: flex; }
  .hd__in { height: 60px; }
}

.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); z-index: 80;
  background: var(--paper); border-left: 1px solid var(--rule);
  padding: 26px var(--gut) 32px; overflow-y: auto;
  transform: translateX(101%); transition: transform .38s var(--ease);
}
.drawer.is-open { transform: none; }
.drawer__close { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.drawer__close button { background:none; border:0; cursor:pointer; font-size: 22px; line-height:1; color: var(--ink); }
.drawer__link { display: block; padding: 17px 0; border-bottom: 1px solid var(--rule); font-size: 17px; font-weight: 700; color: var(--ink); }
.drawer__cta { margin-top: 24px; display: grid; gap: 8px; }
.drawer__meta { margin-top: 26px; font-size: 12.5px; color: var(--ink-40); line-height: 1.9; }
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(16,14,12,.5); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.scrim.is-open { opacity: 1; pointer-events: auto; }
body.lock { overflow: hidden; }

/* =========================================================
   히어로
   ========================================================= */
.hero { position: relative; background: var(--ink); color: rgba(255,255,255,.66); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: 0; right: 4%; top: -20%;
  width: 760px; height: 760px; border-radius: 50%;
  background: radial-gradient(circle, rgba(163,43,30,.42) 0%, rgba(163,43,30,.10) 45%, transparent 70%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero__in {
  display: grid; grid-template-columns: 1fr minmax(360px, 46%);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(52px, 6.5vw, 96px) 0 clamp(48px, 6vw, 88px);
}
.hero__t { color: #fff; }
.hero__t em { font-style: normal; color: #E8A99F; }
.hero__d { margin-top: 24px; max-width: 30em; font-size: clamp(.97rem,1.2vw,1.08rem); line-height: 1.86; color: rgba(255,255,255,.66); }
.hero__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero__spec {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-size: 12.5px; color: rgba(255,255,255,.55); letter-spacing: 0;
}
.hero__spec b { color: rgba(255,255,255,.92); font-weight: 600; }
.hero__art { position: relative; }
.hero__art img { width: 100%; filter: drop-shadow(0 40px 46px rgba(0,0,0,.55)); }
@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; padding-top: 40px; }
  .hero__art { order: -1; max-width: 460px; }
}

/* 공지 스트립 */
.notice { background: var(--sand); border-bottom: 1px solid var(--rule); }
.notice__in { display: flex; align-items: center; gap: 14px; height: 46px; font-size: 13px; color: var(--ink-55); }
.notice__tag { flex: none; padding: 3px 9px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.notice__in p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================
   상품 그리드 — 카드 없음. 이미지 + 텍스트.
   ========================================================= */
.pbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding-bottom: 14px; border-bottom: 1.5px solid var(--ink); flex-wrap: wrap;
}
.pbar__tabs { display: flex; gap: 22px; }
.pbar__tab {
  background: none; border: 0; padding: 0 0 2px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--ink-40);
  border-bottom: 2px solid transparent; transition: color .18s var(--ease);
}
.pbar__tab:hover { color: var(--ink-80); }
.pbar__tab.on { color: var(--ink); }
.pbar__tab sup { font-size: 10.5px; font-weight: 600; margin-left: 3px; vertical-align: super; color: var(--ink-40); }
.pbar__tab.on sup { color: var(--brick); }
.pbar__n { font-size: 12.5px; color: var(--ink-40); letter-spacing: 0; }

.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 26px; row-gap: 54px; margin-top: 36px; }
@media (max-width: 1080px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .pgrid { grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 38px; } }

.p { display: block; }
.p.is-off { display: none; }
.p__fig { position: relative; aspect-ratio: 1/1; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.p__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.p:hover .p__fig img { transform: scale(1.045); }
.p__flag {
  position: absolute; top: 0; left: 0; z-index: 2;
  padding: 5px 10px; background: var(--ink); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}
.p__flag--brick { background: var(--brick); }
.p__flag--line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); }

.p__body { padding-top: 15px; }
.p__cat { font-size: 11.5px; font-weight: 600; color: var(--ink-40); letter-spacing: .02em; }
.p__name { margin-top: 6px; font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -.03em; }
.p__desc { margin-top: 7px; font-size: 13px; line-height: 1.65; color: var(--ink-55);
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p__price { margin-top: 11px; display: flex; align-items: baseline; gap: 6px; }
.p__price b { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.035em; }
.p__price span { font-size: 11.5px; color: var(--ink-40); letter-spacing: 0; }
.p__opt { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 4px 5px; }
.p__opt i { font-style: normal; font-size: 11px; color: var(--ink-55); padding: 2px 7px; border: 1px solid var(--rule); letter-spacing: 0; }

.pempty { padding: 60px 0; text-align: center; font-size: 14px; color: var(--ink-40); }

/* =========================================================
   에디토리얼 블록 (카테고리 소개)
   ========================================================= */
.eblock { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px,4vw,64px); }
.eblock + .eblock { margin-top: clamp(52px, 6vw, 88px); padding-top: clamp(52px, 6vw, 88px); border-top: 1px solid var(--rule); }
.eblock--flip .eblock__fig { order: -1; }
@media (max-width: 860px) { .eblock { grid-template-columns: 1fr; } .eblock--flip .eblock__fig { order: 0; } }
.eblock__no { font-size: 12px; font-weight: 700; color: var(--brick); letter-spacing: .1em; }
.eblock__t { margin-top: 14px; }
.eblock__d { margin-top: 16px; max-width: 34em; }
.eblock__list { margin-top: 22px; display: grid; gap: 0; }
.eblock__li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 13.5px; }
.eblock__li:last-child { border-bottom: 1px solid var(--rule); }
.eblock__li b { flex: none; width: 92px; font-size: 13px; }
.eblock__li span { color: var(--ink-55); }
.eblock__cta { margin-top: 26px; }
.eblock__fig { position: relative; display: grid; place-items: center; padding: clamp(20px,3vw,44px); background: #fff; min-height: 260px; border: 1px solid var(--rule); }
.eblock__fig img { filter: drop-shadow(0 22px 26px rgba(16,14,12,.18)); }

/* =========================================================
   정보 3열 (배송/결제/문의) — 아이콘 없이 괘선
   ========================================================= */
.info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1.5px solid var(--ink); }
@media (max-width: 820px) { .info { grid-template-columns: 1fr; } }
.info__c { padding: 28px 30px 32px; border-right: 1px solid var(--rule); }
.info__c:last-child { border-right: 0; }
@media (max-width: 820px) { .info__c { border-right: 0; border-bottom: 1px solid var(--rule); padding-inline: 0; } }
.info__t { font-size: 15px; font-weight: 700; color: var(--ink); }
.info__l { margin-top: 14px; display: grid; gap: 9px; }
.info__row { display: flex; gap: 12px; font-size: 13.2px; line-height: 1.6; }
.info__row b { flex: none; width: 68px; font-weight: 600; color: var(--ink-80); }
.info__row span { color: var(--ink-55); }

/* KPI 라인 */
.kpi { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.16); }
@media (max-width: 760px) { .kpi { grid-template-columns: repeat(2,1fr); } }
.kpi__c { padding: 26px 0 4px; }
.kpi__n { font-size: clamp(1.5rem,2.6vw,2rem); font-weight: 800; color: #fff; letter-spacing: -.04em; line-height: 1.1; }
.kpi__l { margin-top: 7px; font-size: 12.5px; color: rgba(255,255,255,.5); letter-spacing: 0; }

/* =========================================================
   FAQ — 괘선만
   ========================================================= */
.faq { border-top: 1.5px solid var(--ink); }
.faq__i { border-bottom: 1px solid var(--rule); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -.028em;
}
.faq__q i { flex: none; font-style: normal; font-size: 18px; color: var(--ink-40); transition: transform .3s var(--ease); line-height: 1; }
.faq__i.on .faq__q i { transform: rotate(45deg); color: var(--brick); }
.faq__a { height: 0; overflow: hidden; transition: height .34s var(--ease); }
.faq__a > div { padding: 0 0 24px; max-width: 64ch; font-size: 14px; line-height: 1.85; color: var(--ink-55); }

/* =========================================================
   서브 페이지 헤더
   ========================================================= */
.phead { padding: clamp(38px,4.5vw,62px) 0 clamp(30px,3.5vw,46px); border-bottom: 1px solid var(--rule); }
.phead__c { font-size: 12px; color: var(--ink-40); letter-spacing: 0; }
.phead__c a:hover { color: var(--ink); }
.phead__t { margin-top: 14px; }
.phead__d { margin-top: 16px; max-width: 44em; }

/* =========================================================
   테이블형 정보
   ========================================================= */
.dl { border-top: 1.5px solid var(--ink); }
.dl__r { display: flex; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.dl__k { flex: none; width: clamp(96px, 16vw, 152px); font-weight: 700; color: var(--ink); font-size: 13.5px; }
.dl__v { color: var(--ink-55); }

.callout { padding: 20px 22px; background: var(--sand); border-left: 2px solid var(--ink); font-size: 13.2px; line-height: 1.82; color: var(--ink-55); }
.callout b { color: var(--ink); }
.callout--brick { border-left-color: var(--brick); background: #FBF2F0; }

/* =========================================================
   폼
   ========================================================= */
.fgrid { display: grid; grid-template-columns: minmax(0,1fr) 336px; gap: clamp(24px,3.5vw,56px); align-items: start; }
@media (max-width: 980px) { .fgrid { grid-template-columns: 1fr; } }

.fs { border: 0; padding: 0; margin: 0; }
.fs + .fs { margin-top: 38px; }
.fs__h { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); margin-bottom: 22px; }
.fs__h i { font-style: normal; font-size: 12px; font-weight: 800; color: var(--brick); letter-spacing: .06em; }
.fs__h b { font-size: 15px; font-weight: 700; color: var(--ink); }

.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .frow { grid-template-columns: 1fr; } }
.frow + .frow, .ff + .frow, .frow + .ff, .ff + .ff { margin-top: 14px; }
.ff { display: flex; flex-direction: column; gap: 6px; }
.ff__l { font-size: 12.5px; font-weight: 600; color: var(--ink-80); letter-spacing: 0; }
.ff__l em { font-style: normal; color: var(--brick); }
.ff__h { font-size: 12px; color: var(--ink-40); letter-spacing: 0; }

.inp, .sel, .ta {
  width: 100%; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 0;
  font-size: 14.5px; color: var(--ink);
  transition: border-color .18s var(--ease);
}
.inp::placeholder, .ta::placeholder { color: #B3ABA0; }
.inp:focus, .sel:focus, .ta:focus { outline: 0; border-color: var(--ink); }
.ta { min-height: 104px; resize: vertical; line-height: 1.7; }
.sel {
  appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E675E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px;
}

.chk { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.chk input { margin: 3px 0 0; width: 15px; height: 15px; accent-color: var(--brick); flex: none; }
.chk span { font-size: 13px; color: var(--ink-55); line-height: 1.65; }
.chk a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.items { display: grid; gap: 10px; }
.irow { display: grid; grid-template-columns: 1.55fr 1fr .5fr 42px; gap: 8px; align-items: center; }
@media (max-width: 700px) { .irow { grid-template-columns: 1fr 1fr; } .irow .idel { grid-column: 2; justify-self: end; } }
.idel { height: 44px; width: 42px; border: 1px solid var(--rule-2); background: none; cursor: pointer; color: var(--ink-40); font-size: 17px; line-height: 1; transition: all .18s var(--ease); }
.idel:hover { border-color: var(--brick); color: var(--brick); }

.sum { position: sticky; top: 96px; }
.sum__box { border: 1px solid var(--rule-2); padding: 24px; }
.sum__box + .sum__box { margin-top: 14px; }
.sum__t { font-size: 14px; font-weight: 700; color: var(--ink); padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); }
.sum__l { margin-top: 14px; display: grid; gap: 9px; }
.sum__r { display: flex; justify-content: space-between; gap: 12px; font-size: 13.2px; color: var(--ink-55); }
.sum__r b { color: var(--ink); font-weight: 600; }
.sum__e { font-size: 13px; color: var(--ink-40); }
.sum-total { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; }
.sum-total span { font-size: 12.5px; color: var(--ink-40); }
.sum-total b { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.04em; }
.sum__note { margin-top: 12px; font-size: 11.8px; line-height: 1.7; color: var(--ink-40); }

.result { margin-top: 34px; padding-top: 28px; border-top: 1.5px solid var(--ink); }
.result pre {
  margin: 16px 0 0; padding: 20px; background: var(--sand);
  font: inherit; font-size: 13px; line-height: 1.85; color: var(--ink-80);
  white-space: pre-wrap; word-break: break-word;
}

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 90; transform: translate(-50%, 14px);
  padding: 12px 22px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================
   푸터 — 국내 커머스식 밀도
   ========================================================= */
.ft { border-top: 1px solid var(--rule); background: var(--paper); padding-top: clamp(40px,5vw,62px); }
.ft__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.35fr; gap: 34px; padding-bottom: 40px; }
@media (max-width: 900px) { .ft__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ft__top { grid-template-columns: 1fr; gap: 26px; } }
.ft__slogan { margin-top: 16px; font-size: 13px; line-height: 1.85; color: var(--ink-55); max-width: 24em; }
.ft__h { font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: .02em; margin-bottom: 13px; }
.ft__l li + li { margin-top: 8px; }
.ft__l a { font-size: 13.2px; color: var(--ink-55); }
.ft__l a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ft__tel { font-size: 27px; font-weight: 800; color: var(--ink); letter-spacing: -.045em; line-height: 1.15; }
.ft__hours { margin-top: 9px; font-size: 12.5px; line-height: 1.75; color: var(--ink-55); }
.ft__acct { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--rule); font-size: 12.5px; line-height: 1.7; color: var(--ink-55); }

.ft__biz { padding: 22px 0 30px; border-top: 1px solid var(--rule); }
.ft__biz dl { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 11.8px; color: var(--ink-40); letter-spacing: 0; }
.ft__biz dl > span { white-space: nowrap; }
.ft__biz dl b { font-weight: 600; color: var(--ink-55); margin-right: 5px; }
.ft__disc { margin-top: 14px; font-size: 11.8px; line-height: 1.8; color: var(--ink-40); max-width: 80ch; }
.ft__copy { margin-top: 16px; font-size: 11.5px; color: var(--ink-40); letter-spacing: 0; }

/* 모바일 하단 고정 */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; border-top: 1px solid var(--rule); background: var(--paper); }
.mbar a { flex: 1; display: flex; align-items: center; justify-content: center; height: 54px; font-size: 14px; font-weight: 700; }
.mbar a:first-child { color: var(--ink); border-right: 1px solid var(--rule); }
.mbar a:last-child { background: var(--ink); color: #fff; }
@media (max-width: 700px) { .mbar { display: flex; } body { padding-bottom: 54px; } }


/* =========================================================
   반응형 레이아웃 유틸 (인라인 style 금지 — 미디어쿼리가 안 먹음)
   ========================================================= */
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px,4vw,64px); align-items: start; }
.split2--wide { grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); }
@media (max-width: 880px) { .split2, .split2--wide { grid-template-columns: 1fr; gap: 20px; } }

.pgrid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pgrid--3 { grid-template-columns: repeat(2, 1fr); } }

.bandrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bandrow__cta { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) { .bandrow__cta { width: 100%; } .bandrow__cta .btn { flex: 1; padding: 0 14px; } }

.btnrow { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 420px) { .btnrow .btn { flex: 1 1 100%; } }

/* =========================================================
   모바일 미세 조정
   ========================================================= */
@media (max-width: 700px) {
  .drawer { padding-bottom: 92px; }
  .hero__art img { max-height: 250px; width: auto; margin-inline: auto; }
  .hero__in { gap: 18px; }
  .hero__cta { margin-top: 26px; }
  .hero__spec { margin-top: 28px; gap: 6px 18px; }
}

@media (max-width: 520px) {
  .eblock__li { flex-direction: column; gap: 3px; padding: 11px 0; }
  .eblock__li b { width: auto; }
  .dl__r { flex-direction: column; gap: 4px; padding: 13px 0; }
  .dl__k { width: auto; }
  .pbar { align-items: flex-start; }
  .pbar__tabs { gap: 16px; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .pbar__tabs::-webkit-scrollbar { display: none; }
  .pbar__tab { white-space: nowrap; }
  .pbar__n { display: none; }
  .util__r { gap: 14px; font-size: 11.5px; }
  .shead { align-items: flex-start; }
}

/* =========================================================
   등장 — 최소한으로
   ========================================================= */
.rv { opacity: 0; transform: translateY(12px); }
.rv.in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .p:hover .p__fig img { transform: none; }
}