/* ============================================================
   한성인쇄 site.css — "신뢰의 헤리티지" (candidate-1 기반 공유 스타일시트)
   딥 네이비 × 종이 아이보리 × 절제된 레드 포인트
   모든 페이지가 <link rel="stylesheet" href="/assets/css/site.css">로 공유.
   ─ 심사단 수정 반영:
     #1 연락처 전화번호 Display급(.contact-tel)
     #2 헤더 전화 상시 노출(.header-tel — 모바일 44×44 아이콘 버튼)
     #3 히어로 취급품목 라벨(.hero-scope)
     #4 히어로 프레임 광학적 수직 균형(하단 여백 축소)
     #5 공정 스텝 구분자 li + li::before (줄바꿈 시 다음 행 머리로)
     #6 연락처 그리드 컬럼 재배분(주소 칸 넓게, 한 줄 유지)
     #7 연락처 값 밑줄/링크 스타일 통일
     #8 13px 이하 마이크로 텍스트 세리프 금지 → 산세리프 600↑
     #9 모바일 햄버거 44×44 히트영역 + 시각 보더
     #10 모바일 라벨류 letter-spacing 0.2em 이하
     #11 tel:/mailto: 어포던스(인라인 SVG 아이콘 + 불투명 밑줄)
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --navy-950:#101a2e;
  --navy-900:#16223c;
  --navy-800:#1b2a4a;
  --navy-700:#263a63;
  --red-600:#d92b2b;   /* 장식·대형 요소용 */
  --red-700:#b42423;   /* 본문 크기 텍스트용 (AA) */
  --paper:#f6f3ec;
  --paper-warm:#fdfbf6;
  --ink:#232b3d;
  --muted:#5a6375;
  --line:#ddd6c8;
  --line-strong:#c9c1af;
  --paper-on-navy:#f4f1e9;
  --muted-on-navy:#a9b6d0;
  --line-on-navy:rgba(244,241,233,.24);

  --font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --font-serif:"Noto Serif KR","Nanum Myeongjo",NanumMyeongjo,AppleMyungjo,Batang,"Nimbus Roman",Georgia,"Times New Roman",serif;

  --fs-display:clamp(1.8rem,1.02rem + 3.3vw,3.15rem);
  --fs-h2:clamp(1.55rem,1.22rem + 1.4vw,2.1rem);
  --fs-h3:1.3rem;
  --fs-body:1.0625rem;
  --fs-small:.875rem;
  --fs-micro:.8125rem; /* 마이크로 텍스트 하한(13px) — 이 이하 금지 */

  --space-section:clamp(4.5rem,3rem + 5.5vw,7.5rem);
  --container:1120px;
  --header-h:4.5rem;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.78;
  color:var(--ink);
  background:var(--paper);
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
ul,ol{list-style:none}
a{color:inherit}
[id]{scroll-margin-top:calc(var(--header-h) + 1.25rem)}

:focus-visible{outline:2px solid var(--red-600);outline-offset:3px;border-radius:2px}
.hero :focus-visible,
.page-hero :focus-visible,
.error-hero :focus-visible,
.contact :focus-visible,
.site-footer :focus-visible{outline-color:var(--paper-on-navy)}

/* 스킵링크 */
.skip{
  position:absolute;left:50%;top:.6rem;transform:translate(-50%,-300%);
  z-index:100;background:var(--navy-800);color:var(--paper-on-navy);
  padding:.55rem 1.1rem;border-radius:3px;text-decoration:none;
  font-size:var(--fs-small);transition:transform .15s ease-out;
}
.skip:focus{transform:translate(-50%,0)}

.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}

/* 값 링크용 인라인 아이콘 (수정 #11) */
.val-ico{flex:none;width:.85em;height:.85em;fill:currentColor;opacity:.8}

/* ---------- CMYK 캘리브레이션 스트립 ---------- */
.cmyk{display:flex;height:4px}
.cmyk span{flex:1}
.cmyk .c{background:#009fd6}
.cmyk .m{background:#e0007a}
.cmyk .y{background:#f3c400}
.cmyk .k{background:#14181f}

/* ---------- 헤더 ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,243,236,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:stretch;gap:.7rem;
  min-height:var(--header-h);position:relative;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.logo{
  font-style:italic;font-weight:900;font-size:1.7rem;line-height:1;
  letter-spacing:-.06em;display:inline-flex;align-items:baseline;
}
.logo-h{color:var(--navy-800)}
.logo-s{color:var(--red-600);margin-left:-.12em;font-size:1.12em}
.brand-name{
  font-family:var(--font-serif);font-weight:700;font-size:1.22rem;
  color:var(--navy-800);letter-spacing:.14em;
  border-left:1px solid var(--line-strong);padding-left:.75rem;
}

/* 헤더 전화 상시 노출 (수정 #2) */
.header-tel{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  align-self:center;min-height:2.75rem;padding:.4rem 1rem;
  border:1px solid var(--line-strong);border-radius:2px;
  text-decoration:none;white-space:nowrap;
  font-family:var(--font-serif);font-weight:700;font-size:1.02rem;
  letter-spacing:.04em;color:var(--navy-800);
  transition:border-color .16s ease-out,color .16s ease-out;
}
.header-tel:hover{border-color:var(--navy-800)}
.header-tel .tel-ico{flex:none;width:1rem;height:1rem;fill:var(--red-600)}

/* 데스크톱 내비게이션 */
.site-nav ul{display:flex;align-items:stretch;height:100%}
.site-nav li{display:flex;align-items:stretch;position:relative}
.site-nav a{
  display:flex;align-items:center;padding:0 .9rem;
  text-decoration:none;font-size:.95rem;font-weight:600;color:var(--navy-800);
  letter-spacing:.02em;position:relative;
}
.site-nav > ul > li > a::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:1.1rem;
  height:2px;background:var(--red-600);transform:scaleX(0);
  transform-origin:center;transition:transform .18s ease-out;
}
.site-nav > ul > li > a:hover::after,
.site-nav > ul > li > a:focus-visible::after,
.site-nav > ul > li > a[aria-current="page"]::after{transform:scaleX(1)}

.has-sub > a .caret{
  display:inline-block;margin-left:.4em;width:.5em;height:.5em;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-25%);
}
.sub{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);
  min-width:11.5rem;background:var(--paper-warm);
  border:1px solid var(--line-strong);border-top:2px solid var(--navy-800);
  box-shadow:0 14px 30px rgba(22,34,60,.14);
  padding:.45rem 0;display:block;height:auto;
  opacity:0;visibility:hidden;transition:opacity .16s ease-out,transform .16s ease-out,visibility .16s;
}
.has-sub:hover .sub,
.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sub li{display:block}
.sub a{display:block;padding:.55rem 1.15rem;font-weight:500}
.sub a:hover,.sub a:focus-visible{background:var(--paper);color:var(--red-700)}

/* 모바일 토글 (checkbox hack) — 44×44 히트영역 + 시각 보더 (수정 #9) */
.nav-toggle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav-toggle-btn{
  display:none;align-self:center;cursor:pointer;
  width:2.75rem;height:2.75rem;border:1px solid var(--line-strong);border-radius:3px;
  position:relative;flex:none;
}
.nav-toggle-btn .bars,
.nav-toggle-btn .bars::before,
.nav-toggle-btn .bars::after{
  content:"";position:absolute;left:50%;width:1.15rem;height:2px;
  background:var(--navy-800);transform:translateX(-50%);
  transition:transform .18s ease-out,opacity .18s ease-out;
}
.nav-toggle-btn .bars{top:calc(50% - 1px)}
.nav-toggle-btn .bars::before{top:-6px}
.nav-toggle-btn .bars::after{top:6px}
.nav-toggle:checked ~ .nav-toggle-btn .bars{background:transparent}
.nav-toggle:checked ~ .nav-toggle-btn .bars::before{transform:translateX(-50%) translateY(6px) rotate(45deg)}
.nav-toggle:checked ~ .nav-toggle-btn .bars::after{transform:translateX(-50%) translateY(-6px) rotate(-45deg)}
.nav-toggle:focus-visible ~ .nav-toggle-btn{outline:2px solid var(--red-600);outline-offset:3px}

/* ---------- 히어로 (메인) ---------- */
.hero{
  position:relative;overflow:hidden;color:var(--paper-on-navy);
  background:linear-gradient(178deg,var(--navy-900) 0%,var(--navy-800) 58%,#20315a 100%);
}
/* 하프톤 도트 — 인쇄 망점 모티프 (히어로 전용) */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(244,241,233,.085) 1.6px,transparent 2.1px),
    radial-gradient(rgba(244,241,233,.05) 1px,transparent 1.5px);
  background-size:26px 26px,26px 26px;
  background-position:0 0,13px 13px;
  -webkit-mask-image:radial-gradient(130% 95% at 50% 115%,#000 0%,transparent 72%);
  mask-image:radial-gradient(130% 95% at 50% 115%,#000 0%,transparent 72%);
}
.hero-inner{
  position:relative;display:flex;justify-content:center;
  padding-block:clamp(4rem,4vw + 3rem,7rem);
}
/* 책 표지식 이중 괘선 프레임 — 하단 패딩 축소로 광학적 중앙 보정 (수정 #4) */
.hero-frame{
  position:relative;text-align:center;max-width:56rem;width:100%;
  border:1px solid var(--line-on-navy);
  outline:1px solid rgba(244,241,233,.1);outline-offset:7px;
  padding:clamp(2.6rem,5.2vw,4.4rem) clamp(1.25rem,5vw,4rem) clamp(2rem,4vw,3.2rem);
}
/* 재단선(crop marks) */
.crop{position:absolute;width:17px;height:17px;pointer-events:none}
.crop::before,.crop::after{content:"";position:absolute;background:rgba(244,241,233,.42)}
.crop::before{width:100%;height:1px}
.crop::after{width:1px;height:100%}
.crop.tl{top:-25px;left:-25px}.crop.tl::before{bottom:0}.crop.tl::after{right:0}
.crop.tr{top:-25px;right:-25px}.crop.tr::before{bottom:0}.crop.tr::after{left:0}
.crop.bl{bottom:-25px;left:-25px}.crop.bl::before{top:0}.crop.bl::after{right:0}
.crop.br{bottom:-25px;right:-25px}.crop.br::before{top:0}.crop.br::after{left:0}

/* 취급품목+지역 라벨 (수정 #3) — 산세리프 600, 마이크로 하한 준수 */
.hero-scope{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.2em;
  text-indent:.2em;color:var(--muted-on-navy);
}
.hero-scope::before,.hero-scope::after{
  content:"";width:2.4rem;height:1px;background:var(--line-on-navy);
}
.hero h1{
  font-family:var(--font-serif);font-weight:700;
  font-size:var(--fs-display);line-height:1.52;letter-spacing:-.01em;
  margin-top:1.6rem;
}
.hero h1 strong{
  font-weight:700;color:inherit;white-space:nowrap;
  background:linear-gradient(var(--red-600),var(--red-600)) no-repeat left 100%/100% 3px;
  padding-bottom:.12em;
}
.hero-actions{
  margin-top:2.5rem;display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap;
}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-block;padding:.85rem 2.3rem;text-decoration:none;
  font-weight:700;font-size:.98rem;letter-spacing:.08em;border-radius:2px;
  transition:background-color .16s ease-out,color .16s ease-out,border-color .16s ease-out;
}
.btn-solid{background:var(--paper-on-navy);color:var(--navy-900);border:1px solid var(--paper-on-navy)}
.btn-solid:hover{background:#fff;border-color:#fff}
.btn-ghost{border:1px solid rgba(244,241,233,.55);color:var(--paper-on-navy)}
.btn-ghost:hover{border-color:var(--paper-on-navy);background:rgba(244,241,233,.08)}
/* 밝은 배경용 아웃라인 버튼 (오시는길 지도 링크 등) */
.btn-outline{border:1px solid var(--navy-800);color:var(--navy-800);background:transparent}
.btn-outline:hover{background:var(--navy-800);color:var(--paper-on-navy)}

/* 견당(registration) 마크 — 하단 여백 축소 (수정 #4) */
.regmark{margin:2.1rem auto 0;width:22px;height:22px;opacity:.42}

/* ---------- 섹션 공통 ---------- */
.section{padding-block:var(--space-section)}
.section--tint{background:var(--paper-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{text-align:center;max-width:44rem;margin-inline:auto}
/* 섹션 번호 — 산세리프 700 (수정 #8) */
.sec-no{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  font-size:var(--fs-micro);font-weight:700;
  color:var(--red-700);letter-spacing:.18em;text-indent:.18em;
}
.sec-no::before,.sec-no::after{content:"";width:1.9rem;height:1px;background:var(--line-strong)}
.contact .sec-no{color:var(--muted-on-navy)}
.contact .sec-no::before,.contact .sec-no::after{background:var(--line-on-navy)}
.sec-title{
  font-family:var(--font-serif);font-weight:700;font-size:var(--fs-h2);
  color:var(--navy-800);letter-spacing:.06em;margin-top:.7rem;line-height:1.3;
}
.sec-lead{margin-top:1.05rem;color:var(--muted);font-size:1.02rem}

/* ---------- 페이지 히어로 (서브페이지 배너) ---------- */
.page-hero{
  position:relative;overflow:hidden;text-align:center;color:var(--paper-on-navy);
  background:linear-gradient(178deg,var(--navy-900) 0%,var(--navy-800) 70%,#20315a 100%);
}
.page-hero-inner{padding-block:clamp(2.8rem,2vw + 2rem,4.2rem)}
.page-hero-frame{
  max-width:44rem;margin-inline:auto;
  border:1px solid var(--line-on-navy);
  outline:1px solid rgba(244,241,233,.1);outline-offset:5px;
  padding:clamp(1.7rem,3.5vw,2.6rem) clamp(1.2rem,4vw,2.5rem);
}
.page-hero-eyebrow{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.2em;
  text-indent:.2em;color:var(--muted-on-navy);text-transform:uppercase;
}
.page-hero h1{
  font-family:var(--font-serif);font-weight:700;
  font-size:clamp(1.65rem,1.25rem + 1.7vw,2.4rem);
  letter-spacing:.05em;line-height:1.4;margin-top:.75rem;
}
.page-hero-sub{margin-top:.7rem;color:var(--muted-on-navy);font-size:1rem}
/* 글(article) 페이지에서 배너 안에 메타를 넣을 때 */
.page-hero .article-meta{justify-content:center;color:var(--muted-on-navy);margin-bottom:.9rem}
.page-hero .post-cat{border-color:var(--line-on-navy);color:var(--muted-on-navy);background:transparent}

/* ---------- 제품 카드 ---------- */
.products{border-top:1px solid var(--line)}
.card-grid{
  margin-top:clamp(2.4rem,5vw,3.6rem);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.5vw,2rem);
}
/* 교차 링크 등 카드 1장을 중앙에 놓을 때 */
.card-grid--single{grid-template-columns:minmax(0,34rem);justify-content:center}
.card{
  position:relative;background:var(--paper-warm);
  border:1px solid var(--line-strong);border-radius:3px;
  padding:clamp(1.6rem,3vw,2.4rem);
  display:flex;flex-direction:column;gap:1.4rem;
  transition:border-color .18s ease-out,transform .18s ease-out,box-shadow .18s ease-out;
}
.card:hover{
  border-color:var(--navy-800);transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(22,34,60,.1);
}
.card:focus-within{border-color:var(--navy-800)}
.card-head{display:flex;align-items:center;gap:1.1rem}
.card-icon{
  flex:none;width:3.4rem;height:3.4rem;color:var(--navy-800);
  display:grid;place-items:center;
  border:1px solid var(--line-strong);border-radius:50%;
  background:var(--paper);
}
.card-icon svg{width:2.1rem;height:2.1rem}
.card h3{
  font-family:var(--font-serif);font-weight:700;font-size:var(--fs-h3);
  color:var(--navy-800);letter-spacing:.04em;
}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}/* 카드 전체 링크 */
.card h3 a:focus-visible{outline:2px solid var(--red-600);outline-offset:4px}
.card-arrow{
  align-self:flex-end;font-family:var(--font-serif);font-size:1.25rem;
  color:var(--red-700);line-height:1;
  transition:transform .18s ease-out;
}
.card:hover .card-arrow{transform:translateX(5px)}

/* ---------- 공정 스텝 (카드 내 소형) ----------
   번호는 마크업의 <span class="step-no" aria-hidden="true">01</span> (산세리프 700 — 수정 #8)
   구분자 ›는 li + li::before — 줄바꿈 시 다음 행 머리로 따라감 (수정 #5) */
.steps{
  display:flex;flex-wrap:wrap;align-items:baseline;
  row-gap:.55rem;
  border-top:1px dashed var(--line-strong);padding-top:1.3rem;
}
.steps li{display:inline-flex;align-items:baseline;white-space:nowrap}
.steps li + li{margin-left:.55em}
.steps li + li::before{
  content:"›";color:var(--muted);margin-right:.55em;font-family:var(--font-serif);
}
.step-no{
  font-weight:700;font-size:var(--fs-micro);
  color:var(--red-700);margin-right:.38em;letter-spacing:.02em;
}

/* ---------- 공정 스텝 대형 (제품 서브페이지) ---------- */
.process{
  max-width:44rem;margin:clamp(2.4rem,5vw,3.4rem) auto 0;
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
}
.process li{
  display:grid;grid-template-columns:minmax(4.2rem,5.5rem) 1fr;
  align-items:baseline;gap:clamp(.8rem,2vw,1.4rem);
  padding:1.55rem .35rem;
}
.process li + li{border-top:1px dashed var(--line-strong)}
.process-no{
  font-family:var(--font-serif);font-style:italic;font-weight:700;
  font-size:clamp(1.7rem,1.3rem + 1.6vw,2.3rem);line-height:1.1;
  color:var(--red-600);
}
.process h3{
  font-family:var(--font-serif);font-weight:700;
  font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem);
  color:var(--navy-800);letter-spacing:.04em;line-height:1.4;
}
.process-note{
  margin-top:.5rem;color:var(--muted);font-size:.95rem;
  padding-left:.75em;border-left:2px solid var(--red-600);line-height:1.6;
}

/* ---------- 소식 / 블로그 목록 ---------- */
.news{background:var(--paper-warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post-list{max-width:47rem;margin:clamp(2.2rem,4.5vw,3.2rem) auto 0}
.post{
  padding-block:1.9rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.45rem;
}
.post:last-of-type{border-bottom:1px solid var(--line)}
.post-meta{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  font-size:var(--fs-small);color:var(--muted);
}
/* 날짜·칩 — 산세리프 600 (수정 #8) */
.post-meta time{font-weight:600;letter-spacing:.05em}
.post-cat{
  font-size:var(--fs-micro);font-weight:600;border:1px solid var(--line-strong);
  border-radius:999px;padding:.05rem .7rem;color:var(--muted);background:var(--paper);
}
.post h3{
  font-family:var(--font-serif);font-weight:700;font-size:1.28rem;
  line-height:1.5;color:var(--navy-800);
}
.post h3 a{
  text-decoration:none;
  background:linear-gradient(var(--red-600),var(--red-600)) no-repeat left 100%/0 2px;
  transition:background-size .2s ease-out;padding-bottom:.1em;
}
.post h3 a:hover,.post h3 a:focus-visible{background-size:100% 2px;color:var(--red-700)}
.post p{color:var(--muted);font-size:.98rem}
.news-more{text-align:center;margin-top:2.4rem}
.more-link{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-serif);font-weight:700;font-size:1.02rem;
  color:var(--navy-800);text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:.3rem;
  transition:color .16s ease-out,border-color .16s ease-out;
}
.more-link::after{content:"→";color:var(--red-700);transition:transform .18s ease-out}
.more-link:hover{color:var(--red-700);border-color:var(--red-700)}
.more-link:hover::after{transform:translateX(4px)}
/* 글 → 목록 복귀 링크 */
.back-link{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-serif);font-weight:700;font-size:1.02rem;
  color:var(--navy-800);text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:.3rem;
  transition:color .16s ease-out,border-color .16s ease-out;
}
.back-link::before{content:"←";color:var(--red-700);transition:transform .18s ease-out}
.back-link:hover{color:var(--red-700);border-color:var(--red-700)}
.back-link:hover::before{transform:translateX(-4px)}

/* ---------- 글(article) 본문 ---------- */
.article-meta{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  font-size:var(--fs-small);color:var(--muted);
}
.article-meta time{font-weight:600;letter-spacing:.05em}
.article-author{font-weight:600}
.article-body{max-width:44rem;margin-inline:auto;font-size:var(--fs-body)}
.article-body p + p{margin-top:1.15em}
.article-foot{
  max-width:44rem;margin:clamp(2.4rem,5vw,3.2rem) auto 0;
  padding-top:1.5rem;border-top:1px solid var(--line);text-align:center;
}

/* ---------- 정적 댓글 ---------- */
.comments{max-width:44rem;margin:clamp(2.6rem,5vw,3.6rem) auto 0}
.comments-title{
  font-family:var(--font-serif);font-weight:700;font-size:1.28rem;
  color:var(--navy-800);letter-spacing:.04em;
  padding-bottom:1rem;border-bottom:1px solid var(--line-strong);
}
.comments-count{color:var(--red-700);font-style:italic;margin-left:.25em}
.comment{padding-block:1.5rem;border-bottom:1px solid var(--line)}
.comment-meta{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font-size:var(--fs-small);color:var(--muted);
}
.comment-meta time{font-weight:600;font-size:var(--fs-micro);letter-spacing:.05em}
.comment-author{font-weight:700;color:var(--navy-800);font-size:.95rem;font-style:normal}
.comment-badge{
  font-size:var(--fs-micro);font-weight:600;border:1px solid var(--line-strong);
  border-radius:999px;padding:.02rem .6rem;color:var(--red-700);background:var(--paper);
}
.comment-body{margin-top:.55rem}

/* ---------- 협력업체 카드 ---------- */
.partner-grid{
  margin-top:clamp(2.4rem,5vw,3.6rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2vw,1.6rem);
}
.partner{
  background:var(--paper-warm);border:1px solid var(--line-strong);border-radius:3px;
  padding:1.7rem 1.5rem;display:flex;flex-direction:column;gap:1rem;
  transition:border-color .18s ease-out,box-shadow .18s ease-out;
}
.partner:hover{border-color:var(--navy-800);box-shadow:0 12px 26px rgba(22,34,60,.08)}
.partner h3{
  font-family:var(--font-serif);font-weight:700;font-size:1.22rem;
  color:var(--navy-800);letter-spacing:.03em;
  padding-bottom:.9rem;border-bottom:1px dashed var(--line-strong);
}
.partner dl{display:flex;flex-direction:column;gap:.55rem;font-size:.95rem}
.partner dl > div{display:flex;gap:.9em;align-items:baseline}
.partner dt{
  flex:none;width:4.6em;
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;color:var(--muted);
}
.partner dd{color:var(--ink);line-height:1.6}

/* ---------- 오시는길 (회사-소개) ---------- */
/* 밝은 배경 연락처 표 — 주소 칸 넓게 (수정 #6과 동일 원칙) */
.info-grid{
  margin-top:clamp(2.2rem,4.5vw,3rem);
  display:grid;grid-template-columns:1.7fr .9fr .9fr 1.2fr;gap:1px;
  background:var(--line-strong);border:1px solid var(--line-strong);
}
.info-grid > div{background:var(--paper-warm);padding:1.5rem 1.2rem;text-align:center}
.info-grid dt{
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.2em;text-indent:.2em;
  color:var(--muted);
}
.info-grid dd{
  margin-top:.55rem;font-family:var(--font-serif);font-weight:700;
  font-size:1.08rem;color:var(--navy-800);line-height:1.55;
}
.info-grid a{
  display:inline-flex;align-items:baseline;gap:.45em;
  color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(27,42,74,.5);padding-bottom:.08em;
}
.info-grid a:hover{border-bottom-color:var(--navy-800);color:var(--red-700)}
.info-grid a .val-ico{align-self:center}
/* 약도 */
.map-figure{
  max-width:47rem;margin:clamp(2rem,4vw,2.8rem) auto 0;
  background:#fff;border:1px solid var(--line-strong);
  padding:clamp(.6rem,1.5vw,1rem);
}
.map-figure img{width:100%;height:auto}
.map-links{
  display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap;
  margin-top:1.5rem;
}
.map-links .ext{color:var(--red-700);font-family:var(--font-serif)}
.btn-outline:hover .ext{color:inherit}
/* 대중교통/자가용 안내 */
.directions{
  max-width:47rem;margin:clamp(2rem,4vw,2.8rem) auto 0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.1rem,2vw,1.6rem);
}
.direction{
  background:var(--paper-warm);border:1px solid var(--line-strong);border-radius:3px;
  padding:1.6rem 1.5rem;
}
.direction h3{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-serif);font-weight:700;font-size:1.15rem;
  color:var(--navy-800);letter-spacing:.04em;
  padding-bottom:.85rem;border-bottom:1px dashed var(--line-strong);margin-bottom:1rem;
}
.direction h3::before{content:"";flex:none;width:.55rem;height:.55rem;border-radius:50%;background:var(--red-600)}
.direction li{position:relative;padding-left:1.05em;font-size:.98rem;line-height:1.7}
.direction li + li{margin-top:.55rem}
.direction li::before{
  content:"";position:absolute;left:0;top:.78em;width:.5em;height:1px;background:var(--red-600);
}

/* ---------- 연락처 (다크 섹션) ---------- */
.contact{
  background:linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%);
  color:var(--paper-on-navy);
}
.contact .sec-title{color:var(--paper-on-navy)}
.contact .sec-lead{color:var(--muted-on-navy)}
/* Display급 전화번호 — 시각적 1순위 (수정 #1) */
.contact-tel{margin-top:clamp(2.3rem,4.5vw,3.2rem);text-align:center}
.contact-tel-label{
  display:block;font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.2em;text-indent:.2em;color:var(--muted-on-navy);
}
.contact-tel-link{
  display:inline-flex;align-items:center;gap:.34em;
  margin-top:.75rem;padding:.12em .22em .18em;
  font-family:var(--font-serif);font-weight:700;
  font-size:clamp(2rem,1.35rem + 2.9vw,3.2rem);line-height:1.15;
  letter-spacing:.02em;color:var(--paper-on-navy);text-decoration:none;
  background:linear-gradient(var(--red-600),var(--red-600)) no-repeat left 100%/100% 3px;
  transition:color .16s ease-out;
}
.contact-tel-link:hover{color:#fff}
.contact-tel-link .val-ico{width:.62em;height:.62em}
/* 보조 연락처 3칸 — 주소 칸 넓게, 한 줄 유지 (수정 #6) */
.contact-grid{
  margin-top:clamp(2rem,4vw,2.8rem);
  display:grid;grid-template-columns:.85fr 1.15fr 1.45fr;gap:1px;
  background:var(--line-on-navy);border:1px solid var(--line-on-navy);
}
.contact-grid > div{
  background:var(--navy-800);padding:1.7rem 1.4rem;text-align:center;
}
.contact-grid dt{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.2em;text-indent:.2em;
  color:var(--muted-on-navy);
}
/* 값 스타일 통일 — 링크만 불투명 밑줄 + 아이콘 (수정 #7, #11) */
.contact-grid dd{
  margin-top:.65rem;font-family:var(--font-serif);font-weight:700;
  font-size:1.13rem;letter-spacing:.02em;line-height:1.55;
}
.contact-grid a{
  display:inline-flex;align-items:baseline;gap:.45em;
  text-decoration:none;border-bottom:1px solid rgba(244,241,233,.6);padding-bottom:.1em;
}
.contact-grid a:hover{border-bottom-color:var(--paper-on-navy);color:#fff}
.contact-grid a .val-ico{align-self:center}
/* 웹하드 패널 */
.webhard{
  max-width:38rem;margin:clamp(2rem,4vw,2.8rem) auto 0;
  border:1px dashed rgba(244,241,233,.4);border-radius:3px;
  padding:1.7rem clamp(1.2rem,4vw,2.2rem);text-align:center;
}
.webhard-head{display:flex;align-items:center;justify-content:center;gap:.85rem;flex-wrap:wrap}
.webhard-head h3{
  font-family:var(--font-serif);font-weight:700;font-size:1.12rem;letter-spacing:.1em;
}
.webhard-tag{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;
  border:1px solid rgba(244,241,233,.4);border-radius:999px;
  padding:.08rem .75rem;color:var(--muted-on-navy);
}
.webhard-url{margin-top:.9rem}
.webhard-url a{
  color:var(--paper-on-navy);text-decoration:none;
  border-bottom:1px solid rgba(244,241,233,.6);padding-bottom:.1em;
}
.webhard-url a:hover{border-bottom-color:var(--paper-on-navy)}
.webhard-cred{
  margin-top:.8rem;display:inline-flex;gap:1.1em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.95rem;letter-spacing:.03em;
  background:rgba(16,26,46,.55);border-radius:3px;padding:.5rem 1.2rem;
}

/* ---------- 늘벗 회원 명단 ---------- */
.member-list{
  max-width:44rem;margin:clamp(2.2rem,4vw,3rem) auto 0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem 1.7rem;
}
.member-list li{
  font-family:var(--font-serif);font-weight:700;font-size:1.15rem;
  color:var(--navy-800);letter-spacing:.06em;
}

/* ---------- 404 ---------- */
.error-hero{
  position:relative;overflow:hidden;text-align:center;color:var(--paper-on-navy);
  background:linear-gradient(178deg,var(--navy-900) 0%,var(--navy-800) 70%,#20315a 100%);
}
.error-hero .container{padding-block:clamp(4.5rem,8vw,8rem)}
.error-code{
  font-family:var(--font-serif);font-style:italic;font-weight:700;
  font-size:clamp(4.2rem,3rem + 6vw,7.5rem);line-height:1;
  letter-spacing:.04em;
}
.error-zero{color:var(--red-600)}
.error-title{
  font-family:var(--font-serif);font-weight:700;font-size:var(--fs-h2);
  letter-spacing:.05em;line-height:1.4;margin-top:1.3rem;
}
.error-desc{margin-top:.9rem;color:var(--muted-on-navy)}
.error-links{margin-top:2.5rem;display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap}

/* ---------- 푸터 ---------- */
.site-footer{
  background:var(--navy-950);color:var(--muted-on-navy);
  border-top:1px solid rgba(244,241,233,.12);
  padding-block:2.6rem;text-align:center;font-size:var(--fs-small);
}
.footer-brand{
  font-style:italic;font-weight:900;font-size:1.25rem;letter-spacing:-.05em;line-height:1;
}
.footer-brand .logo-h{color:var(--paper-on-navy)}
.footer-contact{margin-top:1.1rem;line-height:2}
.footer-contact a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(169,182,208,.55);padding-bottom:.05em}
.footer-contact a:hover{color:var(--paper-on-navy);border-bottom-color:var(--paper-on-navy)}
.footer-sep{margin-inline:.55em;opacity:.5}
.footer-copy{margin-top:1.2rem;font-size:var(--fs-micro);opacity:.75;letter-spacing:.04em}

/* ---------- 반응형 ---------- */
@media (max-width:960px){
  .contact-grid{grid-template-columns:1fr 1.3fr}
  .contact-grid > div:last-child{grid-column:1 / -1}
  .info-grid{grid-template-columns:1fr 1fr}
  .info-grid > div:first-child{grid-column:1 / -1}
  .partner-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
  .nav-toggle-btn{display:block;order:2}
  .header-tel{
    order:1;width:2.75rem;height:2.75rem;min-height:0;padding:0;
    border-radius:3px;
  }
  .header-tel .tel-ico{width:1.2rem;height:1.2rem}
  .header-tel-num{display:none}
  .site-nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--paper-warm);border-bottom:1px solid var(--line-strong);
    box-shadow:0 18px 34px rgba(22,34,60,.14);
    display:none;
  }
  .nav-toggle:checked ~ .site-nav{display:block}
  .site-nav ul{display:block;height:auto;padding:.6rem 0 1rem}
  .site-nav li{display:block;height:auto}
  .site-nav a{padding:.8rem clamp(1.1rem,4vw,2rem);display:block}
  .site-nav > ul > li > a::after{display:none}
  .site-nav > ul > li > a:hover,
  .site-nav > ul > li > a:focus-visible,
  .site-nav > ul > li > a[aria-current="page"]{color:var(--red-700)}
  .has-sub > a .caret{display:none}
  .sub{
    position:static;transform:none;opacity:1;visibility:visible;
    border:0;box-shadow:none;background:transparent;padding:0;min-width:0;
  }
  .sub a{padding:.55rem clamp(1.1rem,4vw,2rem) .55rem clamp(2.4rem,8vw,3.4rem);color:var(--muted);font-weight:500}
  .sub a::before{content:"·";margin-right:.6em;color:var(--red-700)}
}
@media (max-width:720px){
  .card-grid{grid-template-columns:1fr}
  .card-grid--single{grid-template-columns:1fr}
  .directions{grid-template-columns:1fr}
}
@media (max-width:640px){
  .contact-grid{grid-template-columns:1fr}
  .contact-grid > div{padding:1.35rem 1.2rem}
  .info-grid{grid-template-columns:1fr}
  .info-grid > div:first-child{grid-column:auto}
  .partner-grid{grid-template-columns:1fr}
  .brand-name{letter-spacing:.08em}
  .crop{display:none}
  .hero-frame{outline-offset:5px}
  .webhard-cred{flex-direction:column;gap:.2em}
  /* 라벨류 letter-spacing 축소 (수정 #10) */
  .hero-scope{letter-spacing:.12em;text-indent:.12em}
  .page-hero-eyebrow,
  .contact-tel-label,
  .contact-grid dt,
  .info-grid dt{letter-spacing:.14em;text-indent:.14em}
  .sec-no{letter-spacing:.14em;text-indent:.14em}
  .process li{grid-template-columns:3.4rem 1fr;padding:1.3rem .2rem}
}

/* ---------- 모션 감소 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* ── 자주 묻는 질문 (FAQ / AEO) ───────────────────────────── */
.faq{
  max-width:52rem;
  margin:0 auto;
}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-item:first-child{
  border-top:1px solid var(--line);
}
.faq-item > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:1.35rem .25rem;
  font-family:var(--font-serif);
  font-size:1.15rem;
  font-weight:600;
  color:var(--navy-800);
  transition:color .15s ease;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary::before{
  content:"Q";
  flex:0 0 auto;
  font-family:var(--font-serif);
  font-weight:700;
  color:var(--red-600);
  line-height:1.3;
}
.faq-item > summary::after{
  content:"";
  flex:0 0 auto;
  width:.7rem;
  height:.7rem;
  margin-left:auto;
  margin-top:.4rem;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.faq-item[open] > summary{ color:var(--red-700); }
.faq-item[open] > summary::after{ transform:rotate(-135deg); }
.faq-item > summary:hover{ color:var(--red-700); }
.faq-a{
  padding:0 0 1.4rem 1.85rem;
}
.faq-a p{
  margin:0;
  color:var(--muted);
  font-size:var(--fs-body);
  line-height:1.8;
}
.faq-a a{
  color:var(--red-700);
  text-decoration:underline;
  text-underline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .faq-item > summary,
  .faq-item > summary::after{ transition:none; }
}