/* ============================================================
   또렷PRINT v14 — 디자인 정리(폴리시) 오버라이드
   style.css 뒤에 한 줄만 추가해서 사용합니다.
   <link rel="stylesheet" href="/style.css">
   <link rel="stylesheet" href="/polish.css">   ← 추가
   ------------------------------------------------------------
   목적: ① 겹쳐 쌓인 예전 규칙(3번 덮어쓴 .hero/.pimg/.pbody) 위에
        최종 규칙만 다시 정의 ② 4종으로 흩어진 파랑 → 1종
        ③ 카드·폼·표·푸터의 여백과 글자 크기 통일
   ============================================================ */

:root {
  --brand: #0b62d6;        /* 사이트 기본 파랑(링크·강조) */
  --brand-deep: #0a4fa8;
  --accent: #d4006e;       /* 주문 버튼·가격 강조 */
  --surface: #ffffff;
  --surface-2: #f4f6fa;
  --ink-2: #343a48;
  --ink-3: #6b7280;
  --hair: #e6e9f0;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --sh-1: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 26px -16px rgba(16, 24, 40, .22);
  --sh-2: 0 14px 38px -18px rgba(16, 24, 40, .30);
  --step: 0;
}

img { max-width: 100%; }

/* ---------- 1. 상단 크롬 정리: 회색 띠 2줄 → 얇게 ---------- */
.userbar { background: #fff; border-bottom: 1px solid var(--hair); }
.userbar .wrap { padding-top: 6px; padding-bottom: 6px; gap: 14px; }
.userbar a, .userbar .who, .userbar button.linklike { font-size: .82rem; color: var(--ink-3); }
.utility { background: #14161d; }
.utility .wrap { padding-top: 5px; padding-bottom: 5px; gap: 16px; }
.utility, .utility a { font-size: .8rem; }
.top .bar { min-height: 64px; }
.menu a { padding: 9px 13px; font-size: .95rem; }

/* ---------- 2. 히어로: 비율·여백·사진 프레임 ---------- */
.hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 32px;
  padding: 52px 48px;
  border: 1px solid #f0ead8;
  border-radius: 28px;
  box-shadow: 0 24px 60px -40px rgba(20, 22, 29, .35);
}
.hero h1 { font-size: clamp(1.95rem, 4vw, 2.9rem); line-height: 1.28; }
.hero h1 em { background: linear-gradient(transparent 66%, var(--y) 66% 94%, transparent 94%); }
.lead { font-size: 1rem; max-width: 34em; }
.hero-photo { position: relative; }
.hero-photo::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -13px; height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c) 0 25%, var(--m) 25% 50%, var(--y) 50% 75%, var(--k) 75% 100%);
  opacity: .85;
}
.hero-photo img {
  aspect-ratio: 16 / 10; max-height: none; object-fit: cover;
  border-radius: 18px; box-shadow: 0 18px 44px -20px rgba(18, 35, 70, .45);
}
.cta .btn.big { padding: 14px 28px; }

/* ---------- 3. 섹션 제목: 오른쪽 헤어라인 ---------- */
.sec {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 20px; font-size: 1.45rem; font-weight: 800;
}
.sec::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.block { margin-bottom: 56px; }

/* ---------- 4. 상품 카드: 사진·글자·CTA 정리 ---------- */
.pgrid { gap: 22px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pcard {
  border: 1px solid var(--hair); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); transition: transform .18s ease, box-shadow .18s ease;
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.pimg { aspect-ratio: 4 / 3; background: var(--surface-2); }
.pimg img.product-photo { transform: scale(1.001); }
.pbody { min-height: 0; padding: 16px 18px 18px; gap: 6px; }
.pbody h3 { font-size: 1.16rem; letter-spacing: -.02em; }
.pbody p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; color: var(--ink-3); font-size: .9rem; line-height: 1.55;
}
.go {
  align-self: flex-start; margin-top: 12px; padding: 8px 14px;
  border: 1.5px solid var(--accent); border-radius: 999px;
  color: var(--accent); font-size: .88rem; font-weight: 800;
}
.go::after { content: " →"; }
.pcard:hover .go { background: var(--accent); color: #fff; }

/* ---------- 5. 3단 안내 카드 ---------- */
.why { gap: 18px; }
.why > div {
  padding: 24px 22px; border: 1px solid var(--hair); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); border-top: 3px solid var(--hair); transition: box-shadow .18s ease;
}
.why > div:hover { box-shadow: var(--sh-2); }
.why > div:nth-child(1) { border-top-color: var(--c); }
.why > div:nth-child(2) { border-top-color: var(--m); }
.why > div:nth-child(3) { border-top-color: var(--k); }
.why h3 { margin: 12px 0 6px; font-size: 1.08rem; }
.why p { font-size: .92rem; line-height: 1.6; }
.n { width: 36px; height: 36px; }

/* ---------- 6. 주문 폼: 단계 번호 + 필드 정리 ---------- */
.layout .col { counter-reset: step; }
.layout > .col > fieldset {
  counter-increment: step;
  padding: 20px 22px 8px; margin-bottom: 16px;
  border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.layout > .col > fieldset > legend {
  display: flex; align-items: center; gap: 9px;
  padding: 0 6px; font-size: 1.02rem; font-weight: 800;
}
.layout > .col > fieldset > legend::before {
  content: counter(step);
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--ink); color: #fff;
  font-size: .76rem; font-weight: 800; letter-spacing: 0;
}
.field { grid-template-columns: 104px 1fr; margin-bottom: 12px; align-items: start; }
.field > span { padding-top: 10px; color: var(--ink-3); font-size: .88rem; font-weight: 600; }
input, select, textarea { min-height: 44px; border-color: #dde1ea; border-radius: var(--r-sm); }
textarea { min-height: 0; }
.hint { max-width: 56ch; margin: 4px 0 12px; color: var(--ink-3); font-size: .84rem; line-height: 1.6; }
.hint.hl {
  background: #fff; border-left: 4px solid var(--m); border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--hair); font-size: .9rem; font-weight: 700;
}
.back { font-size: .88rem; }
.ohead { border-radius: var(--r-lg); padding: 16px 26px 16px 16px; }
.ohead h1 { font-size: 1.6rem; }

/* 합계 상자는 검정 테두리+노란 그림자 → 부드러운 카드로 */
.summary {
  border: 1px solid var(--hair); border-top: 3px solid var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 22px;
}
.summary h2 { font-size: 1.05rem; letter-spacing: -.02em; }
.summary dl { gap: 6px 0; }
.summary dt { color: var(--ink-3); font-size: .9rem; }
.summary .total { color: var(--accent); font-size: 1.55rem; }
.summary .total dt { color: var(--ink); font-size: .95rem; font-weight: 800; }
.summary button.primary { border-radius: var(--r-md); }
.summary button.primary.alt { background: #fff; border-color: #ccd2de; color: var(--ink); font-weight: 700; }
.summary button.primary.alt:hover { border-color: var(--ink); }

/* ---------- 7. 제작 가이드 ---------- */
.guide-intro { border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.guide-grid.three > .guide-check-card,
.guide-grid.three > div {
  border: 1px solid var(--hair); border-radius: var(--r-md); box-shadow: var(--sh-1);
  overflow: hidden;
}
.gimg { border-radius: var(--r-md); }

/* 좁은 화면에서 5열 표가 뭉개지지 않게: 표만 가로 스크롤 */
@media (max-width: 760px) {
  main table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  main table th, main table td { font-size: .84rem; }
}

/* ---------- 8. 푸터 ---------- */
.foot { margin-top: 0; padding: 44px 0 40px; }
.foot .cols { gap: 32px; }
.foot h2 { font-size: .95rem; letter-spacing: -.01em; color: #9ba1b0; font-weight: 700; }
.foot ul { font-size: .88rem; line-height: 1.75; color: #c3c7d2; }
.foot .big { font-size: 1.45rem; }
.foot .legal { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .82rem; color: #9ba1b0; }
.foot .legal a { color: #d6d9e2; text-decoration: none; margin-right: 16px; }

/* ---------- 9. 따라다니는 메뉴: 검정 오프셋 그림자 제거 ---------- */
.float {
  border: 1px solid var(--hair); border-radius: var(--r-md);
  box-shadow: var(--sh-2); background: #fff;
}
.fi { width: 66px; padding: 12px 4px; font-size: .76rem; border-top: 1px solid var(--hair); }
.fi-tel { background: #f2f8ff; } .fi-quote { background: #fdf1f7; } .fi-top { background: #fffbea; }

/* ---------- 10. 접근성: 링크 대비 조정 ---------- */
a { color: var(--brand); }
.go { color: var(--accent); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ---------- 11. 작은 화면 보정 ---------- */
@media (max-width: 860px) {
  .hero { padding: 26px 20px; gap: 18px; border-radius: 22px; }
  .hero h1 { font-size: 1.72rem; }
  .lead { font-size: .95rem; }
  .hero-photo img { aspect-ratio: 4 / 3; }
  .sec { font-size: 1.25rem; margin-bottom: 14px; }
  .pgrid { gap: 11px; }
  .pbody { padding: 12px 12px 14px; }
  .pbody h3 { font-size: 1rem; }
  .pbody p { font-size: .84rem; -webkit-line-clamp: 1; }
  .go { padding: 6px 11px; font-size: .8rem; }
  .why > div { padding: 18px; }
  .field { grid-template-columns: 1fr; }
  .field > span { padding-top: 0; }
  .float { border-radius: 0; box-shadow: 0 -6px 18px -10px rgba(0, 0, 0, .25); }
  .fi { font-size: .74rem; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 1.6rem; }
  .menu a { font-size: .82rem; padding: 8px 2px; }
}

/* 결제 화면: 주문 옵션 수정 링크 */
.editlink { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; text-decoration: none; padding: 3px 10px; border: 1px solid currentColor; border-radius: 999px; }
.editlink:hover { background: rgba(0,0,0,.05); }