/* ══════════════════════════════════════════════════════════════════════
   apak-theme.css — 아팩 홈페이지 새 디자인 (F안)
   만든 날 : 2026-09-09 · 명령762~767
   사장님 지시 : "디자인 전체 교체 · 기능은 기존 그대로 오류없이 · 문구도 그대로
                 · 바꿔야하는건 오직 디자인 · 올리기전에 모두 검사하고 오류도 없어야한다"

   ★이 파일은 「옷」이다. HTML·기능·글귀는 한 글자도 바꾸지 않는다.
   ★되돌리기 : 각 쪽 </head> 앞의 이 파일 <link> 한 줄만 빼면 원래대로 돌아간다.
                또는 사장님이 "1번으로 돌려놔라" 하시면 복구지점으로 통째 복원.
   [디자인규격확인] 홈페이지 작업이라 글자 6단·모서리 규격(R-166·167) 미적용(R-180).

   합친 조각 : apak-new.css + 옷_목록.css + 옷_상세.css + 옷_폼안내.css + 옷_마무리.css
   ══════════════════════════════════════════════════════════════════════ */



/* ─────────── apak-new.css (여기부터) ─────────── */

/* [디자인규격확인] 아팩 홈페이지에는 글자 6단·모서리 규격을 적용하지 않는다(R-180).
   ══════════════════════════════════════════════════════════════════════
   아팩 홈페이지 · 「옷만 입히기」 덧입힘 CSS · 2026-09-08 · 명령 #764 · 담당A
   ──────────────────────────────────────────────────────────────────────
   무엇인가 : 실사이트 첫 화면(index-template.html)을 **한 줄도 지우지 않고**
              색·글자·여백·모서리만 F안으로 바꾸는 덧입힘 파일이다.
   원칙     : ① 여기서 쓰는 색·크기·여백은 전부
                ★확정_F안\design-system.css 의 값이다. 새로 지어낸 값 0건.
              ② 화면에서 무엇을 없애지 않는다(display:none 0건).
                 기존 버튼·링크·폼·스크립트는 그대로 두고 「옷」만 갈아입힌다. (수칙 8 · R-184)
              ③ 글귀는 손대지 않는다. CSS 의 content 로 새 글자를 넣지 않는다. (R-183)
              ④ 숨김은 숨김대로 — [hidden] 은 반드시 안 보이게 못박는다. (R-182)
   거는 법  : index-template.html <head> 의 **맨 끝**(</head> 바로 위)에 한 줄.
              <link rel="stylesheet" href="/css/apak-new.css">
              (맨 끝이어야 그 위 인라인 <style> 의 모바일 규칙을 덮을 수 있다)
   ══════════════════════════════════════════════════════════════════════ */


/* ══ 0. F안 토큰 — design-system.css 원시토큰 그대로 옮겨 왔다 ═══════ */
:root{
  /* 「세척 전」 흙빛 */
  --e-900:#15130E; --e-800:#221E17; --e-700:#332E25; --e-600:#443D31;
  --e-500:#7A6640; --e-400:#8A784F; --e-300:#B6A98C; --e-200:#BCA986; --e-100:#EDE8DC;
  /* 「세척 후」 맑은 면 */
  --a-050:#F0EEE9; --a-100:#E7ECEB; --a-200:#D6E1E2; --a-300:#C3D3D5;
  --a-400:#7FA9B0; --a-500:#6B99A1; --a-550:#5E8E97;
  --a-700:#0F5967; --a-800:#14464F; --a-900:#0B2429; --a-ink:#04222A;
  --a-border:#6E7C7E; --a-line:#C7D0D0;
  /* 중립 크롬(머리글·바닥글·띠) */
  --n-900:#0F1A1D; --n-800:#1F2A2D; --n-700:#2A3639;
  --n-300:#9FB6BA; --n-200:#D6DEDE; --n-100:#F0EEE9;
  /* 글꼴 — Gothic A1 이 없으면 이미 실려 있는 Noto Sans KR 로 내려간다.
     이 한 줄로 Playfair Display(한글 글리프 없음)가 사이트 전체에서 빠진다. */
  --font-heading:"Gothic A1","Noto Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;
  --font-body:"Noto Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;
  /* 뼈대·여백 */
  --gut:clamp(20px,3.34vw,48px);
  --sec-y:clamp(72px,8.4vw,120px);
  --sh-1:0 2px 10px rgba(15,26,29,.16);
  --sh-2:0 10px 34px rgba(15,26,29,.34);
  --sh-3:0 28px 70px -18px rgba(15,26,29,.55);
  --d-press:110ms; --d-hover:180ms;
  --ease-out:cubic-bezier(.23,1,.32,1);

  /* 기존 사이트 토큰을 F안 값으로 갈아끼운다 — 이 6줄이 사이트 전체에 퍼진다 */
  --color-primary:#0B2429;
  --color-primary-dark:#04222A;
  --color-primary-light:#D6E1E2;
  --color-secondary:#0F5967;
  --color-accent:#6B99A1;      /* 노랑 #f4c430 → F안 강조 1색 시안 */
  --color-background:#E7ECEB;  /* 회색 #f8f9fa → 맑은 면 2단 */
  --color-surface:#F0EEE9;     /* 순백 #ffffff → 맑은 면 0단(F안은 순백을 안 쓴다) */
  --color-text:#14464F;
  --color-text-light:#4A5A5E;
  --color-border:#C7D0D0;
  --shadow-soft:var(--sh-1);
  --border-radius-md:0px;
  --border-radius-lg:0px;
}

/* R-182 — 숨김이 무시되어 화면을 덮는 사고를 여기서 못박는다 */
[hidden]{display:none !important;}

/* ★[명령767·수리1] 예외 딱 한 자리 — 첫 화면 바닥 SNS 아이콘 4개
   [현상] 인스타그램·유튜브·페이스북·카카오톡 아이콘이 옷을 얹은 뒤 사라진다.
   [원인] 이 4개는 HTML 에 `hidden` 이 달려 있지만, 사이트의 main.css 206행
          `.sns-links a{display:flex}` 가 그 숨김을 덮어 **지금까지 보이고 있었다**.
          위 R-182 못박기가 그 덮개를 걷어내자 진짜로 숨겨져 버렸다.
   [결정] 사장님이 2026-09-08 에 이 아이콘들을 **「그대로 두어라」**로 정하셨다.
          지금처럼 보이는 것이 사장님 뜻이므로 없애지 않는다.
   [고침] `.sns-links` 안의 링크에만 좁게 예외를 준다. 다른 곳의 숨김은 그대로
          살아 있어야 R-182(숨긴 창이 화면을 덮던 사고)를 계속 막는다.
          모양값(display:flex)은 main.css 가 이미 쓰던 값 그대로다. 새로 지어낸 값 0건. */
.sns-links a[hidden]{display:flex !important;}

body{
  background-color:var(--a-100);
  color:var(--a-800);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
:focus-visible{outline:3px solid var(--a-500);outline-offset:3px;}


/* ══ 1. 머리글(GNB) — F안 먹색 띠 + 시안 밑선 2px ═══════════════════ */
.gnb{
  background-color:var(--n-900);
  border-bottom:2px solid var(--a-500);
}
.gnb-container{
  max-width:1440px;
  height:76px;
  padding-left:var(--gut);
  padding-right:var(--gut);
}
.gnb-logo{
  font-family:var(--font-heading);
  font-size:24px;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--e-100);
}
.gnb-menu{gap:26px;}
.gnb-menu a{
  font-size:14px;
  font-weight:500;
  color:rgba(237,232,220,.85);
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding:0;
  border-bottom:2px solid transparent;
}
.gnb-menu a:hover,
.gnb-menu a:focus-visible,
.gnb-menu a.active,
.gnb-menu a.on{color:var(--e-100);}
/* 노란 밑줄 애니메이션 → 시안. 기능(밑줄이 자라는 것)은 그대로 둔다 */
.gnb-menu a::after{background-color:var(--a-500);height:2px;}
/* JS 가 심는 「전화 문의」 단추 — 없애지 않고 옷만 갈아입힌다 (main.js 10~14행) */
.gnb-contact-btn{
  background-color:var(--a-500);
  color:var(--a-ink);
  border-radius:0;
  padding:0 20px;
  min-height:44px;
  margin-left:24px;
  font-size:14px;
  font-weight:800;
  box-shadow:none;
}
.gnb-contact-btn:hover{
  background-color:var(--a-400);
  color:var(--a-ink);
  box-shadow:var(--sh-1);
}
.gnb-toggle{border-radius:0;border:1px solid rgba(107,153,161,.38);}
.gnb-toggle span{background-color:var(--e-100);}


/* ══ 2. 첫 화면(히어로) ═════════════════════════════════════════════
   ★관리자가 걸어 둔 배경 영상은 그대로 둔다(#heroMediaTarget 손대지 않음).
     덮개(.hero::before)만 F안의 「왼쪽=세척 전 흙빛 → 오른쪽=세척 후 맑은 면」
     가로 그러데이션 + 가운데 경계선으로 바꿔, 색과 질감으로 전·후를 말하게 한다.
     (design-system.css 머리말: "색과 질감 자체가 세척 전과 후를 말한다") */
.hero{
  background-color:var(--n-900);
  min-height:520px;
  padding:clamp(72px,7vw,120px) var(--gut) clamp(48px,5vw,80px);
}
.hero::before{
  background:
    /* 가운데 시안 경계선 — F안 .seam-line */
    linear-gradient(90deg,
      rgba(107,153,161,0) 44.0%, rgba(107,153,161,.55) 45.5%,
      rgba(107,153,161,.55) 46.5%, rgba(107,153,161,0) 48.0%),
    /* 아래쪽을 눌러 글자가 읽히게 (기존 덮개가 하던 일 유지) */
    linear-gradient(0deg, rgba(15,26,29,.86) 6%, rgba(15,26,29,.46) 46%, rgba(15,26,29,.10) 100%),
    /* 왼쪽 = 세척 전(흙빛) → 오른쪽 = 세척 후(맑은 면) */
    linear-gradient(90deg,
      rgba(21,19,14,.88) 0%, rgba(34,30,23,.80) 30%, rgba(51,46,37,.56) 46%,
      rgba(198,214,216,.20) 58%, rgba(240,238,233,.30) 100%);
}
/* 거친 결(왼쪽) / 고운 결(오른쪽) — F안 .tx-coarse · .tx-fine 문양 그대로 */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;   /* ★영상·버튼 클릭을 가로채지 않는다 */
  background-image:
    repeating-linear-gradient(118deg,rgba(0,0,0,.16) 0 2px,rgba(0,0,0,0) 2px 15px),
    repeating-linear-gradient(28deg,rgba(120,96,52,.09) 0 2px,rgba(120,96,52,0) 2px 21px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,rgba(0,0,0,0) 62%);
  mask-image:linear-gradient(90deg,#000 0%,#000 40%,rgba(0,0,0,0) 62%);
  opacity:.60;
}
.hero-text{max-width:min(760px,92%);}
.hero h1{
  font-family:var(--font-heading);
  font-weight:900;
  font-size:clamp(28px,3.9vw,56px);
  line-height:1.14;
  letter-spacing:-.045em;
  color:var(--e-100);
  max-width:20ch;
  margin:0 0 20px;
  padding:14px 0 14px 22px;
  border-left:4px solid var(--a-500);   /* 노랑 → 시안 */
  text-shadow:0 2px 18px rgba(15,26,29,.72);
}
.hero p{
  font-size:clamp(16px,1.19vw,18px);
  font-weight:500;
  line-height:1.6;
  color:var(--n-200);
  max-width:46ch;
  text-shadow:0 2px 12px rgba(15,26,29,.7);
}
.hero-image-placeholder{background-color:var(--n-900);}
.hero-image-placeholder span{color:var(--n-300);}
/* 모바일에서는 좌우로 나눌 폭이 없다 — F안 본보기도 모바일에서 좌우 나눔을 끈다
   (F_첫화면_원본 302행 .hero-bg{display:none}). 먹색 덮개만 남긴다. */
@media (max-width:768px){
  .hero{min-height:420px;padding:56px var(--gut) 44px;}
  .hero::before{
    background:linear-gradient(0deg, rgba(15,26,29,.90) 10%, rgba(15,26,29,.52) 52%, rgba(15,26,29,.18) 100%);
  }
  .hero::after{opacity:.28;-webkit-mask-image:none;mask-image:none;}
  .hero h1{max-width:none;padding-left:16px;}
}


/* ══ 3. 산업별 벨트 — 어두운 흙빛 면 ═══════════════════════════════ */
.industry-belt{
  background-color:var(--e-900);
  border-top:1px solid var(--e-600);
}
.industry-belt-inner{max-width:1440px;padding:0 max(0px,calc(var(--gut) - 26px));}
.industry-item{
  padding:38px 26px;
  border-right:1px solid var(--e-600);
  min-height:44px;
}
.industry-item:hover{background-color:var(--e-800);}
.ib-title{
  font-family:var(--font-heading);
  color:var(--a-400);      /* 노랑 → 시안(흙빛 면에서 대비 5.27) */
  font-size:18px;
  font-weight:900;
  letter-spacing:-.02em;
}
.ib-desc{color:var(--e-300);font-size:14px;line-height:1.6;}


/* ══ 4. 구획 공통 ══════════════════════════════════════════════════ */
.section-wrapper{padding:var(--sec-y) var(--gut);}
.section-wrapper.bg-white{background-color:var(--a-050);}
.section-wrapper.bg-light{background-color:var(--a-100);}
.container{max-width:1440px;}

.section-title{
  font-family:var(--font-heading);
  font-size:clamp(26px,3.06vw,44px);
  font-weight:900;
  letter-spacing:-.025em;
  line-height:1.2;
  color:var(--a-900);
  margin:0 0 14px;
  padding-left:20px;
  border-left:5px solid var(--a-500);   /* 노랑 → 시안 */
}
.section-subtitle{
  font-size:17px;
  line-height:1.72;
  color:var(--a-800);
  margin:0 0 48px 25px;
  max-width:56ch;
}
/* 인라인 <style> 의 모바일 규칙(1.8rem/1rem)을 F안 값으로 바로잡는다 */
@media (max-width:768px){
  .section-title{font-size:26px;}
  .section-subtitle{font-size:16px;margin-bottom:32px;}
}


/* ══ 5. 버튼 — F안 각진 시안 단추 ══════════════════════════════════ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  padding:0 28px;
  background-color:var(--a-500);
  color:var(--a-ink);
  border-radius:0;
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:800;
  letter-spacing:-.01em;
  box-shadow:var(--sh-2);
  transition:background-color var(--d-hover) var(--ease-out),
             transform var(--d-press) var(--ease-out),
             box-shadow var(--d-hover) var(--ease-out);
}
.btn:hover{
  background-color:var(--a-400);
  color:var(--a-ink);
  transform:translateY(-2px);
  box-shadow:var(--sh-3);
}
.btn:active{background-color:var(--a-550);transform:translateY(0);box-shadow:var(--sh-1);}
.btn:focus-visible{outline:3px solid var(--a-700);outline-offset:3px;}
.btn-secondary,.btn.btn-secondary{
  background-color:transparent;
  color:var(--a-900);
  border:2px solid var(--a-900);
  box-shadow:none;
}
.btn-secondary:hover{background-color:var(--a-900);color:var(--n-100);}


/* ══ 6. 카드류 — 둥근 모서리·순백 → 각진 맑은 면 ═══════════════════ */
.card,
.slide-card,
.solution-category.blog-card,
.solution-category.info-card{
  background-color:var(--a-050);
  border:1px solid var(--a-line);
  border-radius:0;
  box-shadow:var(--sh-1);
}
.card:hover,
.slide-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-2);
  border-color:var(--a-500);
}
.card-content{padding:32px;}
.card-content h2{
  font-family:var(--font-heading);
  font-size:28px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.3;
  color:var(--a-900);
}
.card-content p{color:var(--a-800);font-size:17px;line-height:1.72;}

.slide-card .card-media{background-color:var(--a-200);}
.slide-card .card-category{
  background-color:var(--a-200);
  color:var(--a-700);
  border-radius:0;
  font-size:14px;
  letter-spacing:.02em;
}
.slide-card .card-title{font-size:19px;font-weight:700;color:var(--a-900);line-height:1.4;}
.slide-card .card-author,
.slide-card .card-subtitle{font-size:14px;color:var(--a-700);}
.slider-nav{
  background-color:var(--n-900);
  color:var(--n-100);
  border:1px solid var(--n-900);
  border-radius:0;
  width:44px;height:44px;
  box-shadow:var(--sh-1);
}
.slider-nav:hover{background-color:var(--a-500);color:var(--a-ink);border-color:var(--a-500);}
.slider-more-btn{border-radius:0;}

/* 정보 카드 4장 */
.info-card{
  background-color:var(--a-050);
  border:1px solid var(--a-line);
  border-top:3px solid var(--a-900);
  border-radius:0;
}
.info-card:hover{border-top-color:var(--a-500);box-shadow:var(--sh-1);}
.info-card h3{
  font-family:var(--font-heading);
  font-size:22px;
  font-weight:900;
  letter-spacing:-.015em;
  color:var(--a-900);
  border-bottom:1px solid var(--a-line);
}
.info-card li{color:var(--a-800);font-size:16px;line-height:1.75;}
.info-card li strong{color:var(--a-900);}
/* 체크 아이콘 색만 금색 → 시안 (모양·자리 그대로) */
.info-card li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5967' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6l5.2 5.2L20 6.6'/%3E%3C/svg%3E");
}
.info-card .btn-more{color:var(--a-900);font-size:16px;min-height:44px;display:inline-flex;align-items:center;}
.info-card .btn-more::after{color:var(--a-700);}

/* 신뢰 구간(번호 벨트) */
.promise-cards{border-top:1px solid var(--a-line);}
.promise-card img{border-radius:0;background-color:var(--a-200);}
.promise-card-content::before{
  font-family:var(--font-heading);
  font-size:22px;
  font-weight:900;
  color:var(--a-700);
}
.promise-card-content h3{font-size:17px;font-weight:700;color:var(--a-900);}

/* 산업별 문제해결 그리드 */
.solution-category{border-left:1px solid var(--a-line);}
.solution-category h4{
  font-family:var(--font-heading);
  font-size:22px;
  font-weight:900;
  letter-spacing:-.015em;
  color:var(--a-900);
  margin-bottom:16px;
}
.solution-category li{font-size:16px;line-height:1.6;color:var(--a-800);}
.solution-category.blog-card p{font-size:16px;color:var(--a-800);}
@media (max-width:900px){
  .solution-category{border-left:none;border-top:1px solid var(--a-line);}
}


/* ══ 7. SNS 띠 · 바닥글 — 중립 먹색 ═══════════════════════════════ */
.sns-bar{background-color:var(--n-900);padding:44px var(--gut);}
.sns-bar-label{color:var(--n-300);font-size:14px;letter-spacing:.02em;}
.sns-links a{
  width:46px;height:46px;
  border:1px solid rgba(107,153,161,.38);
  border-radius:0;
  color:var(--n-300);
}
.sns-links a:hover{border-color:var(--a-500);color:var(--a-500);}

.footer{
  background-color:var(--n-900);
  color:var(--n-300);
  padding:56px var(--gut);
  font-size:14px;
  border-top:2px solid var(--a-500);
  margin-top:0;
}
.footer-content{max-width:1440px;padding:0;}
.footer-info p{color:var(--n-200);}
.footer-info strong{color:var(--n-100);font-weight:700;}
.footer-info a{color:var(--n-200);}
.footer-links{border-top:1px solid var(--n-700);padding-top:18px;margin-top:20px;}
.footer-links a{color:var(--n-200);min-height:44px;display:inline-flex;align-items:center;}
.footer-links a:hover{color:var(--a-400);}
.copyright{color:var(--n-300);}


/* ══ 8. 뜬버튼(문의·리뷰이벤트 / 전화 요청) ════════════════════════
   ★없애지 않는다. 색·모서리만 바꾼다 — 누르는 자리·크기는 그대로. */
.contact-fab-main{
  background-color:var(--a-500);
  color:var(--a-ink);
  border-radius:0;
  font-family:var(--font-heading);
  font-weight:800;
  font-size:16px;
  min-height:52px;
  box-shadow:var(--sh-2);
}
.contact-fab-main:hover{background-color:var(--a-400);color:var(--a-ink);box-shadow:var(--sh-3);}
.contact-fab-item{
  background-color:var(--a-050);
  border:1.5px solid var(--a-900);
  color:var(--a-900) !important;
  border-radius:0;
  min-height:44px;
  font-size:14px;
  box-shadow:var(--sh-1);
}
.contact-fab-item:hover{background-color:var(--a-900);color:var(--n-100) !important;}
/* main.js 567~575행이 심는 홀로 뜬 「전화 요청」 (문의 메뉴가 없는 쪽) */
.callback-float-btn{
  background-color:var(--a-500) !important;
  color:var(--a-ink) !important;
  border-radius:0 !important;
}


/* ══ 9. 창(모달) — 질문·리뷰·쿠폰 ═════════════════════════════════ */
.qna-modal{background-color:rgba(11,36,41,.62);}
.qna-modal-content{
  background-color:var(--a-050);
  border-radius:0;
  border-top:3px solid var(--a-500);
  box-shadow:var(--sh-3);
}
.qna-modal-header{border-bottom:1px solid var(--a-line);}
.qna-modal-header h2{
  font-family:var(--font-heading);
  font-size:28px;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--a-900);
}
.qna-close-button{color:var(--a-700);}
.qna-close-button:hover,.qna-close-button:focus{color:var(--a-900);}
.qna-form-group label{color:var(--a-900);font-size:16px;}
.qna-form-group input,
.qna-form-group textarea{
  background-color:#FFFFFF;
  border:1px solid var(--a-border);
  border-radius:0;
  color:var(--a-900);
  font-size:16px;
  min-height:44px;
}
.qna-form-group input:focus,
.qna-form-group textarea:focus{outline:3px solid var(--a-700);outline-offset:2px;border-color:var(--a-700);}
.qna-modal-footer{border-top:1px solid var(--a-line);}
.qna-upload-btn,.qna-submit-btn{border-radius:0;min-height:56px;font-size:16px;font-weight:800;}
.qna-upload-btn{background-color:var(--a-200);color:var(--a-900);}
.qna-upload-btn:hover{background-color:var(--a-300);}
.qna-submit-btn{background-color:var(--a-500);color:var(--a-ink);}
.qna-submit-btn:hover{background-color:var(--a-400);color:var(--a-ink);}
.review-star-input .star{color:var(--a-300);}
.review-star-input .star.active{color:var(--a-700);}
.review-coupon-code-box{background-color:var(--a-100);border-radius:0;}
.review-coupon-code-box button{border-radius:0;background-color:var(--a-500);color:var(--a-ink);}

/* 전화 요청(콜백) 시트 */
.callback-card{background-color:var(--a-050);border-radius:0;}
.callback-title{font-family:var(--font-heading);font-weight:900;color:var(--a-900);}
.callback-topic{border-radius:0;border:1px solid var(--a-border);color:var(--a-900);min-height:44px;}
.callback-topic.is-on{background-color:var(--a-500);color:var(--a-ink);border-color:var(--a-500);}
.callback-phone{border-radius:0;border:1px solid var(--a-border);min-height:44px;}
.callback-submit{border-radius:0;background-color:var(--a-500);color:var(--a-ink);min-height:56px;font-weight:800;}
.callback-note a{color:var(--a-700);}


/* ══ 10. 움직임을 꺼 달라는 손님 (apple-design §14) ════════════════ */
@media (prefers-reduced-motion:reduce){
  .btn,.card,.slide-card,.contact-fab-main{transition:none;}
  .btn:hover,.card:hover,.slide-card:hover,.contact-fab-main:hover{transform:none;}
}


/* ─────────── 옷_목록.css (여기부터) ─────────── */

/* [디자인규격확인] 아팩 홈페이지에는 글자 6단·모서리 규격을 적용하지 않는다(R-180).
   ══════════════════════════════════════════════════════════════════════════
   아팩 홈페이지 · 「옷만 입히기」 ② 목록 6쪽 전용 CSS · 2026-09-09 · 명령 #767 · 담당1
   ──────────────────────────────────────────────────────────────────────────
   이 파일이 걸리는 쪽 (실사이트 6쪽 · 이 6쪽에만 건다)
     /cleaner-list.html            세척기 목록      (정적)
     /notice-list.html             새소식 목록      (서버가 채움 + JS)
     /qna-list.html                질문답변 목록    (서버가 채움 + JS)
     /review-list.html             고객 리뷰 목록   (서버가 채움 + JS)
     /solution-list.html           솔루션 목록      (서버가 채움 + JS)
     /success-story-list.html      성공사례 목록    (서버가 채움 + JS · 표)

   ★ 무엇을 하는 파일인가
     ① 「옷」만 갈아입힌다. HTML·JS·서버는 한 글자도 안 고친다. (R-184 · 수칙8)
     ② 글귀는 손대지 않는다 — CSS 의 content 로 새 글자를 넣지 않는다. (R-183)
        (딱 하나 예외: 이미 있던 화살표 장식 `.clist-guide-model::after` 의 색만 바꾼다.
         글자를 새로 만들지 않고 원래 있던 장식의 색만 바꾸는 것이다.)
     ③ 없애지 않는다 — display:none 0건. 링크·버튼·폼·입력칸·사진 개수가 안 줄어든다.
     ④ display / visibility / position 에 !important 를 쓰지 않는다.
        JS 가 보였다 숨겼다 하는 자리가 사이트 전체에 142곳이다. 덮으면 R-182 사고가 재발한다.
        !important 를 쓴 곳은 아래 6곳뿐이고 전부 「모양」이지 「숨김」이 아니다 —
          · 성공사례 표: 사진 폭·칸 폭·모서리·배경 4곳
            (사진이 HTML 태그에 style="width:88px;border-radius:6px" 로 박혀 있어
             그것 말고는 이길 방법이 없다)
          · §1-1 먹색 머리 되찾기: 바탕·글자색 (다른 옷 파일의 !important 를 이기려고)
        display / visibility / position 에는 한 곳도 쓰지 않았다.
     ⑤ [hidden]{display:none!important} 못박기는 apak-new.css 62행이 이미 했다. 여기선 안 한다.

   ★ apak-new.css 가 이미 한 것은 다시 하지 않는다
     색·글꼴 토큰(--a-* --e-* --n-* --sh-* --gut) · 머리글(.gnb) · 바닥글(.footer) ·
     기본 버튼(.btn) · 뜬버튼(.contact-fab-*) · 창(.qna-modal-*) · 전화요청(.callback-*) ·
     .container 최대폭 1440 · [hidden] 못박기.
     → 이 파일은 apak-new.css **뒤에** 걸어야 한다. 목록 고유의 것만 들어 있다.

   ★ 값의 출처
     색·글자크기·여백·그림자·움직임은 전부 ★확정_F안\design-system.css 값이다.
     새로 지어낸 값 0건. 신호색 4쌍만 design-system.css §1-4 에서 그대로 옮겨 왔다
     (apak-new.css 에는 없는 토큰이라 여기서 선언한다).

   ★ 서버가 「글자 그대로」 찾는 자리는 CSS 로 건드릴 수 없고 건드리지도 않았다
     #solution-industry-tabs · #solution-list-target · #qna-list-target ·
     #notice-list-full-target.notice-list-full · #story-list-body · #review-list-target
     → 6자리 모두 이름을 그대로 쓰기만 하고 구조를 바꾸지 않았다.

   ★ :has() 를 2곳에 쓴다 (성공사례 쪽의 .container 를 가려내려고).
     쪽마다 body 에 이름이 없어서 이것 말고는 가려낼 방법이 없다.
     Chrome 105+ / Safari 15.4+ 지원. 안 먹는 옛 브라우저에서는 그냥 지금 모습대로 나온다
     — 못 먹어도 깨지지 않는다(진행적 향상).
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ 0. 이 파일에서만 쓰는 토큰 (F안 design-system.css §1-4 그대로) ═══════ */
:root{
  --sig-info-fg:#0F5967; --sig-info-bg:#E2EEF0;   /* 대비 6.70 */
  --sig-ok-fg:#15564A;   --sig-ok-bg:#E2EFEA;     /* 대비 7.22 */
  --sig-warn-fg:#5F4E2E; --sig-warn-bg:#F2ECDC;   /* 대비 6.81 */
  --sig-err-fg:#8E3320;  --sig-err-bg:#F6E4DE;    /* 대비 6.46 */
  --e-450:#4A3E28;       /* 밝은 면 위 「세척 전」 흙빛 글자 (대비 6.76) — 별점에 쓴다 */
  --lst-touch:44px;      /* 최소 터치면 */
}


/* ══════════════════════════════════════════════════════════════════════════
   1. 페이지 머리 — 6쪽을 한 가족으로 묶는다
   ──────────────────────────────────────────────────────────────────────────
   [전] 밝은 회색 면 + 가운데 정렬 + 제목 40px + 아래 실선 1px
   [후] 먹색 띠 + 왼쪽 정렬 + 제목 clamp(30~54px) + 시안 세로막대 5px
        → 세척기 목록의 먹색 머리(.clt-head)와 같은 모양이 되어 6쪽이 한 가족이 된다.
   ※ 글귀는 그대로. 자리와 크기·색만 바꾼다.
   ══════════════════════════════════════════════════════════════════════════ */
.page-header{
  background-color:var(--n-900);
  border-bottom:2px solid var(--a-500);
  text-align:left;
  padding:clamp(44px,5vw,72px) var(--gut) clamp(36px,4vw,56px);
}
/* .page-header 안에 .container 가 있는 쪽(질문답변·솔루션·리뷰)과
   없는 쪽(새소식)이 섞여 있다. 둘 다 같은 폭이 되게 맞춘다. */
.page-header > .container{padding-left:0;padding-right:0;}

.page-header h1,
.page-header .page-title{
  font-family:var(--font-heading);
  font-size:clamp(30px,3.75vw,54px);
  font-weight:900;
  line-height:1.14;
  letter-spacing:-.0285em;
  color:var(--e-100);
  margin:0;
  padding:6px 0 6px 20px;
  border-left:5px solid var(--a-500);
  word-break:keep-all;
}
.page-header p,
.page-header .page-subtitle{
  font-size:17px;
  line-height:1.72;
  color:var(--n-200);
  margin:16px 0 0 25px;
  max-width:58ch;
  word-break:keep-all;
}
.page-header .review-stats-text{color:var(--n-100);font-weight:700;}
.page-header a{
  color:var(--a-400);
  text-decoration:underline;
  text-underline-offset:4px;
}
.page-header a:hover{color:var(--e-100);}
/* 솔루션 쪽 안내문 한 줄 — 먹색 위에서 읽히게 */
.page-header .list-guide{color:var(--n-200);font-size:16px;}

/* ══ 1-1. ★[명령767·수리1] 먹색 머리 되찾기 ═══════════════════════════════
   [현상] 솔루션 목록의 제목 「산업별 문제 해결 솔루션」이 크림 글자 위 크림 바탕
          (대비 1.05:1)이 되어 안 보였다. 소개글 2줄 1.18:1, 안내 링크 2.21:1.
          같은 결함이 문의 2건·리뷰 2건·새소식 1건에도 있었다(PC·모바일 동일).
   [원인] 위 `.page-header{background:var(--n-900)}` 는 특정도가 (0,1,0) 뿐이라,
          다른 옷 파일의 `main > .page-header{background:var(--a-050) !important}`
          (공지·이벤트 상세용)에 밀려 **바탕만 크림으로 돌아가고 글자는 크림 그대로**
          남았다. 즉 「바탕과 글자가 서로 다른 파일에서 정해져 어긋난 것」.
   [고침] 글귀·구조는 한 글자도 안 건드리고, 이 4쪽에서만 바탕을 먹색으로 되돌린다.
          쪽 가려내기는 서버가 글자 그대로 찾는 자리 이름(#…-target)을 읽기만 한다.
          색은 전부 ★확정_F안\design-system.css 값(--n-900·--e-100·--a-500).
          새 색 0건. display 는 건드리지 않는다(JS 가 여는 자리를 막지 않으려고).
   ※ :is(:has()) 로 특정도를 (1,1,1) 로 올려 「나중에 온 !important」를 이긴다. */
main:is(:has(#solution-list-target),
        :has(#qna-list-target),
        :has(#review-list-target),
        :has(#notice-list-full-target)) > .page-header{
  background-color:var(--n-900) !important;
  border-bottom:2px solid var(--a-500) !important;
  padding:clamp(44px,5vw,72px) var(--gut) clamp(36px,4vw,56px) !important;
}
/* 새소식 쪽 제목만 `.page-title` 이라 다른 옷 파일이 먹색 글자로 칠해 둔다.
   바탕을 먹색으로 되돌렸으니 이 4쪽에서는 제목도 크림으로 함께 맞춘다. */
main:is(:has(#solution-list-target),
        :has(#qna-list-target),
        :has(#review-list-target),
        :has(#notice-list-full-target)) > .page-header h1,
main:is(:has(#solution-list-target),
        :has(#qna-list-target),
        :has(#review-list-target),
        :has(#notice-list-full-target)) > .page-header .page-title{
  color:var(--e-100) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   2. 목록 본문 감싸는 자리 — 여백을 F안 구획 여백으로
   ══════════════════════════════════════════════════════════════════════════ */
/* ★좌우 여백(padding-left/right 24px)은 .container 가 이미 갖고 있다.
   padding 를 통째로 다시 쓰면 그 24px 이 지워져 글이 화면 끝에 붙는다(캡처로 확인).
   그래서 위·아래만 따로 준다. */
.content-container{padding-top:clamp(48px,5.6vw,80px);padding-bottom:clamp(48px,5.6vw,80px);}
.qna-list-container,
.review-list-container{
  padding-top:clamp(40px,4.6vw,64px);
  padding-bottom:clamp(56px,6vw,88px);
}
/* 글줄이 1,392px 까지 길어지면 눈이 다음 줄을 못 찾는다.
   글로만 된 목록 3종(질문답변·리뷰·새소식)은 읽기 폭 1,100px 로 묶는다. */
.qna-list-container,
.review-list-container,
.content-container > .container{max-width:1100px;}


/* ══════════════════════════════════════════════════════════════════════════
   3. 세척기 목록 (cleaner-list.html) — ★사장님이 직접 지적하신 쪽
   ──────────────────────────────────────────────────────────────────────────
   사장님 지적: 「어떤 세척기인지 모르겠다」
   원인(실측): 사진칸이 height:176px 로 못박혀 있어 기계 사진이 131×176 밖에 안 됐다.
   고침: 사진칸을 고정 높이 → 세로비(5:4)로 바꾸고 안쪽 여백을 넓혔다.
         칸 자체가 카드 폭을 따라 커지므로 화면이 넓어질수록 사진도 커진다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 3-1. 먹색 머리 — 색만 F안으로. 자리·글귀 그대로 */
.clt-head{
  background:var(--n-900);
  color:var(--e-100);
  padding:clamp(32px,3.6vw,48px) 0 clamp(56px,6vw,80px);
  border-bottom:2px solid var(--a-500);
}
.clt-head .clt-in{max-width:1440px;padding:0 var(--gut);}
.clt-head .clt-crumb{color:var(--n-300);font-size:14px;margin:0 0 10px;}
.clt-head h1{
  font-family:var(--font-heading);
  font-size:clamp(30px,3.75vw,54px);
  font-weight:900;
  line-height:1.14;
  letter-spacing:-.0285em;
  color:var(--e-100);
  padding-left:20px;
  border-left:5px solid var(--a-500);   /* 노랑 6px → 시안 5px */
  margin:0 0 14px;
}
.clt-head .clt-sub{font-size:18px;line-height:1.6;color:var(--n-200);max-width:58ch;}

/* 3-2. 카드 격자 — 칸 사이를 넓히고 카드를 각지게 */
.clt-body{margin-top:clamp(-56px,-4vw,-40px);}
.clt-grid{gap:28px;}
.clt-card{
  background:var(--a-050);
  border:1px solid var(--a-line);
  border-radius:0;                       /* 12px → 0 (F안은 모서리를 안 굴린다) */
  box-shadow:var(--sh-1);
  transition:box-shadow var(--d-hover) var(--ease-out),
             border-color var(--d-hover) var(--ease-out),
             transform var(--d-press) var(--ease-out);
}
.clt-card:hover{box-shadow:var(--sh-2);border-color:var(--a-500);transform:translateY(-3px);}
.clt-card::before{height:3px;background:var(--a-500);}   /* 노랑 6px → 시안 3px */

/* 3-3. ★사진칸 — 이 파일에서 가장 중요한 6줄
   [실측] 전 176px 고정 → 사진이 131×176 밖에 안 됐다.
   [후]  화면 폭을 따라 280~400px. 1440 에서 389px → 사진 약 263×352 (넓이 4배).
   ※ 세로비(aspect-ratio)로 하면 사진이 533px 까지 커져 카드 3장이 화면 밖으로
     밀려났다(실측). 그래서 「자라되 상한이 있는」 clamp 로 못박는다. */
.clt-media{
  height:clamp(260px,21vw,320px);
  padding:20px;
  /* ★여기만 순백을 쓴다(F안은 순백을 안 쓴다 — 그 예외를 숨기지 않는다).
     기계 사진 3장이 흰 배경으로 찍혀 있어, 칸을 크림색으로 두면
     사진 속 흰 네모가 칸 위에 떠 보인다(캡처로 확인). 칸을 사진과 같은 흰색으로
     맞춰야 사진만 보인다. 칸의 경계는 아래 실선이 대신 그어 준다. */
  background:#FFFFFF;
  border-bottom:1px solid var(--a-line);
}
.clt-media img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
/* 번호 배지 — 검정 동그라미 40px → 각진 시안 표찰 */
.clt-no{
  left:0;top:0;
  width:auto;height:auto;
  min-width:38px;
  padding:6px 12px;
  border-radius:0;
  background:var(--n-900);
  color:var(--a-400);
  font-family:var(--font-heading);
  font-size:14px;
  font-weight:900;
  letter-spacing:.06em;
}

/* 3-4. 카드 속 글 — 크기·간격만 */
.clt-cbody{padding:20px 24px 24px;}
.clt-tag{
  border-radius:0;
  background:var(--a-200);
  color:var(--a-700);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  padding:6px 10px;
}
.clt-card h2{
  font-family:var(--font-heading);
  font-size:28px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.3;
  color:var(--a-900);
  margin:12px 0 0;
}
.clt-card h2 small{color:var(--a-700);font-size:14px;font-weight:500;margin-top:6px;}
.clt-use{font-size:16px;line-height:1.6;color:var(--a-800);margin:12px 0 0;}
.clt-spec{
  font-size:14px;
  line-height:1.6;
  color:var(--a-800);
  margin:14px 0 20px;
  padding-top:12px;
  border-top:1px solid var(--a-line);
}
.clt-spec b{color:var(--a-900);}

/* 3-5. 카드 버튼 두 개 — 알약모서리 8px → 각지게, 노랑 → 시안, 44 → 52px */
.clt-acts{gap:10px;}
.clt-btn-y,.clt-btn-o{
  font-family:var(--font-heading);
  font-size:16px;
  font-weight:800;
  border-radius:0;
  min-height:52px;
  transition:background-color var(--d-hover) var(--ease-out),
             color var(--d-hover) var(--ease-out),
             border-color var(--d-hover) var(--ease-out);
}
.clt-btn-y{background:var(--a-500);color:var(--a-ink);border:2px solid var(--a-500);}
.clt-btn-y:hover{background:var(--a-400);border-color:var(--a-400);color:var(--a-ink);}
.clt-btn-y:active{background:var(--a-550);border-color:var(--a-550);}
.clt-btn-o{background:transparent;color:var(--a-900);border:2px solid var(--a-900);}
.clt-btn-o:hover{background:var(--a-900);color:var(--n-100);}
.clt-btn-y:focus-visible,.clt-btn-o:focus-visible{outline:3px solid var(--a-700);outline-offset:3px;}

/* 3-6. 시편 테스트 띠 — 노란 테두리 상자 → 먹색 면 + 시안 윗줄 */
.clt-cta{
  background:var(--n-900);
  color:var(--n-200);
  border:0;
  border-top:3px solid var(--a-500);
  border-radius:0;
  padding:32px var(--gut);
  margin:36px 0 8px;
  gap:36px;
  box-shadow:none;
}
.clt-cta .clt-eyebrow{
  color:var(--a-400);
  font-size:12px;
  font-weight:800;
  letter-spacing:.22em;
  margin:0 0 10px;
}
.clt-cta h3{
  font-family:var(--font-heading);
  font-size:28px;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--e-100);
  margin:0 0 10px;
}
.clt-cta p{font-size:17px;line-height:1.72;color:var(--n-200);}
.clt-cta .clt-btns{gap:10px;width:260px;}
.clt-cta .clt-btn-o{color:var(--e-100);border-color:var(--e-100);}
.clt-cta .clt-btn-o:hover{background:var(--e-100);color:var(--n-900);}

/* 3-7. 「어떤 세척기가 맞나요?」 안내 상자 — 둥근 카드 → 각진 맑은 면 */
.clist-guide{
  background:var(--a-050);
  border:1px solid var(--a-line);
  border-top:3px solid var(--n-900);
  border-radius:0;
  box-shadow:none;
  max-width:1100px;
  padding:28px 32px 18px;
  margin:0 auto clamp(40px,4.6vw,64px);
}
.clist-guide h2{
  font-family:var(--font-heading);
  font-size:26px;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--a-900);
  margin:0 0 8px;
  padding-bottom:12px;
  border-bottom:2px solid var(--a-500);   /* 노랑 → 시안 */
}
.clist-guide-row{
  padding:16px 4px;
  border-bottom:1px solid var(--a-line);  /* 점선 → 실선 */
  min-height:var(--lst-touch);
  gap:18px;
}
.clist-guide-use{color:var(--a-900);font-size:16px;flex-basis:40%;}
.clist-guide-model{color:var(--a-700);font-size:16px;}
.clist-guide-model::after{color:var(--a-500);}   /* 원래 있던 화살표의 색만 */
.clist-compare-link{
  color:var(--a-700);
  font-size:14px;
  min-height:var(--lst-touch);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin:6px 4px 0;
}
.clist-compare-link:hover{color:var(--a-900);}
.clist-scroll-hint{color:var(--a-800);font-size:14px;}

/* 3-8. 3기종 비교표 — 원래 규칙이 #cleaner-compare 로 걸려 있어 같은 무게로 맞춘다 */
#cleaner-compare{max-width:1100px;}
#cleaner-compare .cmp-hook{font-size:18px;color:var(--a-800);}
#cleaner-compare .cmp-hook b{color:var(--a-900);}
#cleaner-compare h2{
  font-family:var(--font-heading);
  font-size:clamp(26px,3vw,40px);
  font-weight:900;
  letter-spacing:-.025em;
  color:var(--a-900);
}
#cleaner-compare .cmp-wrap{border:1px solid var(--a-line);border-radius:0;}
#cleaner-compare .cmp thead th{background:var(--n-900);}
#cleaner-compare .cmp thead th.lead{background:var(--n-800);border-top:3px solid var(--a-500);}
#cleaner-compare .cmp thead th.lead .ch-name{color:var(--a-400);}
#cleaner-compare .cmp .ch-name{font-family:var(--font-heading);font-weight:900;color:var(--e-100);}
#cleaner-compare .cmp .ch-role{color:var(--n-300);}
#cleaner-compare .cmp .ch-desc{color:var(--n-200);}
#cleaner-compare .cmp tbody th.rl{background:var(--a-100);color:var(--a-900);}
#cleaner-compare .cmp tbody tr:nth-child(2n) th.rl{background:var(--a-200);}
#cleaner-compare .cmp tbody td{color:var(--a-800);font-size:16px;}
#cleaner-compare .cmp tbody td b,#cleaner-compare .cmp tbody td .v{color:var(--a-900);}
#cleaner-compare .cmp-cta{
  background:var(--a-100);
  border:1px solid var(--a-line);
  border-left:3px solid var(--a-500);
  border-radius:0;
}
#cleaner-compare .cmp-cta-t{color:var(--a-900);font-family:var(--font-heading);font-weight:900;}
#cleaner-compare .cmp-cta-d{color:var(--a-800);}

/* 3-9. 「컴프레셔부터」 관문 3칸 — 노란 윗줄 → 시안 */
.cgate-grid{background:var(--a-line);border:1px solid var(--a-line);border-radius:0;}
.cgate-box{background:var(--a-050);padding:24px 16px;}
.cgate-box.is-lead{background:var(--a-100);box-shadow:inset 0 3px 0 var(--a-500);}
.cgate-hp{font-family:var(--font-heading);font-size:28px;font-weight:900;color:var(--a-900);}
.cgate-hp small{color:var(--a-800);}
.cgate-cond{color:var(--a-800);font-size:14px;}
.cgate-ar{color:var(--a-500);}
.cgate-mdl{
  font-family:var(--font-heading);
  font-size:20px;
  font-weight:900;
  color:var(--a-700);
  min-height:var(--lst-touch);
  display:inline-flex;
  align-items:center;
}
.cgate-use{color:var(--a-800);font-size:14px;}
.cgate-h p{color:var(--a-800);}
.cgate-h p b{color:var(--a-900);}
.cgate-note{
  background:var(--a-100);
  border-left:3px solid var(--n-900);
  border-radius:0;
  color:var(--a-800);
}
.cgate-note b{color:var(--a-900);}


/* ══════════════════════════════════════════════════════════════════════════
   4. 솔루션 목록 (solution-list.html)
   ──────────────────────────────────────────────────────────────────────────
   ※ 이 쪽은 카드가 두 벌이다 —
      서버가 먼저 넣는 .slide-card 와, JS 가 다시 그리는 .solution-card.
      둘 다 꾸며야 「JS 가 뜨기 전」과 「뜬 뒤」가 같은 모습이 된다.
   ══════════════════════════════════════════════════════════════════════════ */

/* 4-1. 검색칸 — 알약(50px) → 각진 칸, 폭 700 → 전폭, 높이 56px 로 통일 */
.main-search-container{max-width:none;margin:0 0 24px;}
#solution-main-search{
  border-radius:0;
  border:1px solid var(--a-border);
  background:#FFFFFF;
  box-shadow:none;
  min-height:56px;
  padding:0 20px 0 52px;
  font-size:17px;
  color:var(--a-900);
}
#solution-main-search::placeholder{color:#5C6C6E;}
#solution-main-search:focus{
  border-color:var(--a-700);
  outline:3px solid var(--a-700);
  outline-offset:2px;
  box-shadow:none;
}
.main-search-container .fa-search{left:20px;color:var(--a-700);font-size:17px;}

/* 4-2. 산업별 탭(칩) — 알약 → 각진 칩, 검정/노랑 → 시안 면 */
.solution-industry-tabs{
  gap:8px;
  margin:0 0 24px;
  padding-top:20px;
  border-top:2px solid var(--n-900);
}
.industry-tab{
  border-radius:0;
  border:1px solid var(--a-line);
  color:var(--a-800);
  font-family:var(--font-heading);
  font-size:14px;
  font-weight:700;
  min-height:var(--lst-touch);
  display:inline-flex;
  align-items:center;
  padding:0 16px;
  transition:background-color var(--d-hover) var(--ease-out),
             color var(--d-hover) var(--ease-out),
             border-color var(--d-hover) var(--ease-out);
}
.industry-tab:hover{background:var(--a-100);border-color:var(--a-border);color:var(--a-900);}
.industry-tab.active{background:var(--a-500);border-color:var(--a-500);color:var(--a-ink);}
.industry-tab:focus-visible{outline:3px solid var(--a-700);outline-offset:3px;}

/* 4-3. 카드 격자 — 3열이 유지되게 최소폭을 낮추고 칸 사이를 정리 */
/* 최소폭 320 → 340. 칸이 1200 에서 1440 으로 넓어졌기 때문에 320 그대로 두면
   4열이 되어 사진이 오히려 작아진다(실측 362×217 → 327×218).
   340 이면 3열이 유지되어 사진이 445×297 로 커진다. */
.solution-card-grid{
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:28px;
  padding:8px 0 0;
}
.solution-card,
#solution-list-target .slide-card{
  background:var(--a-050);
  border:1px solid var(--a-line);
  border-radius:0;
  box-shadow:var(--sh-1);
  transition:box-shadow var(--d-hover) var(--ease-out),
             border-color var(--d-hover) var(--ease-out),
             transform var(--d-press) var(--ease-out);
}
.solution-card:hover,
#solution-list-target .slide-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-2);
  border-color:var(--a-500);
}
/* 사진칸 — 5:3 (padding-top 60%) → 3:2 로 조금 키우고 배경을 맑은 면으로 */
.card-thumbnail{padding-top:66.67%;background:var(--a-200);}
.solution-card:hover .card-thumbnail img{transform:scale(1.03);}
/* 카드 속 글 — apak-new 의 32px 여백은 3열 카드엔 넓다 */
.solution-card .card-content,
#solution-list-target .slide-card .card-content{padding:24px;}
.solution-card .card-category,
#solution-list-target .slide-card .card-category{
  border-radius:0;
  background:var(--a-200);
  color:var(--a-700);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  padding:6px 10px;
  margin-bottom:14px;
}
.solution-card .card-title,
#solution-list-target .slide-card .card-title{
  font-family:var(--font-heading);
  font-size:19px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.015em;
  color:var(--a-900);
  margin:0 0 10px;
}
.card-excerpt{font-size:15px;line-height:1.7;color:var(--a-800);}


/* ══════════════════════════════════════════════════════════════════════════
   5. 질문답변 목록 (qna-list.html)
   ══════════════════════════════════════════════════════════════════════════ */
.qna-list-item{
  background:var(--a-050);
  border:1px solid var(--a-line);
  border-left:3px solid var(--a-500);   /* 왼쪽 시안 띠 — 줄줄이 늘어선 것이 「목록」으로 읽히게 */
  border-radius:0;
  padding:24px 28px;
  margin-bottom:12px;                    /* 20 → 12 : 목록이 촘촘해져 한 화면에 더 들어온다 */
  color:var(--a-800);
  transition:background-color var(--d-hover) var(--ease-out),
             border-color var(--d-hover) var(--ease-out),
             transform var(--d-press) var(--ease-out);
}
.qna-list-item:hover{
  transform:translateY(-2px);
  background:var(--a-100);
  border-color:var(--a-500);
  box-shadow:var(--sh-1);
}
.qna-list-item:focus-visible{outline:3px solid var(--a-700);outline-offset:3px;}
.qna-item-header{gap:16px;}
.qna-item-header h3{
  font-family:var(--font-heading);
  font-size:22px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.015em;
  color:var(--a-900);
}
.qna-item-header h3 .fa{color:var(--a-700);font-size:20px;}
/* 상태 표찰 — 알약 → 각진 표찰. 초록/노랑 → F안 신호색 */
.qna-status{
  border-radius:0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  padding:6px 10px;
}
.qna-status.answered{background:var(--sig-ok-bg);color:var(--sig-ok-fg);}
.qna-status.pending{background:var(--sig-warn-bg);color:var(--sig-warn-fg);}
.qna-item-meta{margin-top:14px;font-size:14px;color:var(--a-700);gap:18px;}
/* 서버가 먼저 넣는 판(JS 뜨기 전)도 같은 모습이 되게 */
#qna-list-target .qna-list-item .card-title{
  font-family:var(--font-heading);
  font-size:20px;
  font-weight:800;
  line-height:1.45;
  color:var(--a-900);
  display:block;
}
#qna-list-target .qna-list-item .card-author{
  display:block;
  margin-top:12px;
  font-size:14px;
  color:var(--a-700);
}
#qna-list-target .empty{
  padding:clamp(56px,6vw,88px) 20px;
  color:var(--a-800);
  font-size:17px;
  background:var(--a-050);
  border:1px dashed var(--a-border);
}


/* ══════════════════════════════════════════════════════════════════════════
   6. 새소식 목록 (notice-list.html) — 한 줄짜리 목록
   ══════════════════════════════════════════════════════════════════════════ */
.notice-list-full{border-top:2px solid var(--n-900);}
.notice-item-full,
.notice-list-item{
  display:flex;
  align-items:center;
  gap:18px;
  padding:22px 12px;                     /* 20/15 → 22/12 : 세로로 더 여유 있게 */
  min-height:var(--lst-touch);
  border-bottom:1px solid var(--a-line);
  color:var(--a-800);
  text-decoration:none;
  transition:background-color var(--d-hover) var(--ease-out);
}
.notice-item-full:hover,
.notice-list-item:hover{background:var(--a-100);}
.notice-item-full:focus-visible,
.notice-list-item:focus-visible{outline:3px solid var(--a-700);outline-offset:-3px;}
/* 분류 표찰 — 알약(50px) → 각진 표찰 */
.notice-category-full,
.notice-category{
  border-radius:0;
  background:var(--a-200);
  color:var(--a-700);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  padding:6px 10px;
  white-space:nowrap;
}
.notice-title-full,
.notice-title{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--font-heading);
  font-size:19px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--a-900);
  word-break:keep-all;
}
.notice-date-full,
.notice-date{
  font-size:14px;
  color:var(--a-700);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* 빈 목록 안내 — 지금은 아무 표시가 없어 「고장인가?」로 보인다 */
#notice-list-full-target .empty,
#notice-list-full-target > p{
  margin:0;
  padding:clamp(56px,6vw,88px) 20px;
  text-align:center;
  color:var(--a-800);
  font-size:17px;
  background:var(--a-050);
  border-bottom:1px solid var(--a-line);
}


/* ══════════════════════════════════════════════════════════════════════════
   7. 고객 리뷰 목록 (review-list.html)
   ══════════════════════════════════════════════════════════════════════════ */
.review-item{
  background:var(--a-050);
  border:1px solid var(--a-line);
  border-left:3px solid var(--a-500);
  border-radius:0;
  padding:24px 28px;
  margin-bottom:12px;
}
.review-item-header{gap:14px;margin-bottom:12px;}
.review-stars{color:var(--e-450);letter-spacing:.12em;font-size:18px;}
.review-author{font-family:var(--font-heading);font-weight:800;color:var(--a-900);font-size:17px;}
.review-date{font-size:14px;color:var(--a-700);font-variant-numeric:tabular-nums;}
.review-verified-badge{
  border-radius:0;
  background:var(--sig-ok-bg);
  color:var(--sig-ok-fg);
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  padding:5px 9px;
}
.review-content{font-size:17px;line-height:1.72;color:var(--a-800);margin:0 0 14px;}
.review-photo img{max-width:320px;max-height:320px;border-radius:0;border:1px solid var(--a-line);}
.review-admin-reply{
  background:var(--a-100);
  border:0;
  border-left:3px solid var(--a-700);
  border-radius:0;
  padding:16px 18px;
  margin-top:16px;
}
.review-admin-reply strong{color:var(--a-700);font-family:var(--font-heading);font-weight:800;}
.review-admin-reply p{color:var(--a-800);font-size:16px;line-height:1.7;}
/* 별점 고르는 칸(창 안) — 노랑 → 흙빛. 창 자체는 apak-new 가 이미 꾸몄다 */
.review-star-input .star{color:var(--a-300);}
.review-star-input .star.active{color:var(--e-450);}
#review-list-target .empty,
#review-list-target > p{
  margin:0;
  padding:clamp(56px,6vw,88px) 20px;
  text-align:center;
  color:var(--a-800);
  font-size:17px;
  background:var(--a-050);
  border:1px dashed var(--a-border);
}


/* ══════════════════════════════════════════════════════════════════════════
   8. 성공사례 목록 (success-story-list.html) — 표를 그대로 두고 옷만
   ──────────────────────────────────────────────────────────────────────────
   ※ 표를 카드로 바꾸려면 서버 파일을 고쳐야 한다. 「옷만」이라 표를 유지한다.
   ※ 사진 크기는 HTML 태그에 style="width:88px" 로 박혀 있어 !important 없이는
      못 이긴다. width 에만 쓴다 — 숨김(display)과는 무관하다.
   ══════════════════════════════════════════════════════════════════════════ */
/* 이 쪽의 .container 는 「흰 카드」다. 다른 5쪽의 .container 와 역할이 달라 따로 잡는다 */
.container:has(> .story-table){
  max-width:1200px;
  margin:clamp(40px,4.6vw,64px) auto clamp(56px,6vw,88px);
  padding:clamp(28px,3vw,40px);
  background:var(--a-050);
  border:1px solid var(--a-line);
  border-top:3px solid var(--n-900);
  border-radius:0;
  box-shadow:none;
}
.container:has(> .story-table) > h1{
  font-family:var(--font-heading);
  font-size:clamp(26px,3vw,40px);
  font-weight:900;
  letter-spacing:-.025em;
  line-height:1.2;
  color:var(--a-900);
  text-align:left;
  margin:0 0 24px;
  padding-left:18px;
  border-left:5px solid var(--a-500);
}
.story-table{font-size:16px;}
.story-table thead{background:var(--n-900);color:var(--e-100);}
.story-table th{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  padding:16px 14px;
}
.story-table td{padding:14px;border-bottom:1px solid var(--a-line);color:var(--a-800);}
.story-table tbody tr:hover{background:var(--a-100);}
.story-title a{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:17px;
  color:var(--a-900);
  text-decoration:none;
}
.story-title a:hover{color:var(--a-700);text-decoration:underline;text-underline-offset:4px;}
/* 사진 — 모서리·배경만 여기서. 크기는 아래 「넓은 화면 전용」에서만 키운다.
   [디자인규격확인] R-180 */
.story-table td img{
  border-radius:0 !important;
  background:var(--a-200) !important;
  border:1px solid var(--a-line);
  box-sizing:border-box;          /* 테두리 2px 이 폭에 더해져 표가 밀리는 것을 막는다 */
}
/* 「2026. / 7. 21.」로 두 줄이 되던 게시일을 한 줄로 */
.story-table th:last-child,
.story-table td:last-child{white-space:nowrap;}

/* ── ★사진 확대는 넓은 화면(641px 이상)에서만 ─────────────────────────
   [사고] 사진만 88→120px 로 키웠더니 사진이 옆 칸을 덮어
          「대형모터」가 「형모터」로 잘렸다(캡처에서 발견).
   [원인] 사진 칸의 폭이 HTML 태그에 style="width:104px" 로 박혀 있어
          칸은 그대로인데 사진만 커졌다.
   [고침] 칸 폭도 같이 넓힌다. width 에만 !important 를 쓴다(숨김과 무관).
   [모바일] 640px 이하는 손대지 않는다 — 칸 104px·사진 64px 원래대로. */
@media (min-width:641px){
  /* 칸 폭을 152px 로 「달라고」 해도, 나머지 칸이 15%+15%+50% = 80% 를 먼저 가져가
     남는 20% 안에서만 나눠 받아 실제로는 117px 밖에 안 됐다(캡처로 확인).
     그래서 나머지 칸의 비율을 조금 줄여 사진 칸이 실제로 넓어지게 한다.
     글귀·칸 개수·순서는 그대로다. */
  .story-table th:first-child{width:152px !important;}
  .story-table th.w-15{width:12%;}
  .story-table th.w-50{width:44%;}
  .story-table td img{
    width:120px !important;
    /* ⛔max-width:100% 를 같이 쓰면 안 된다 — 표 칸의 폭이 사진 폭에 따라 정해지는데
       그 칸을 기준으로 100% 를 다시 재는 순환이 생겨 사진이 88px 에 묶인다(실측).
       칸 폭은 위 세 줄(152px·12%·44%)로 확보했으므로 이 보호막은 필요 없다. */
    /* 세로로 긴 사진이 오면 그 줄만 213px 로 부풀어 표가 들쭉날쭉해진다(캡처로 확인) */
    max-height:120px;
    object-fit:cover;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   9. 쪽 넘김 · 불러오는 중 · 빈 목록 — 6쪽 공통
   ══════════════════════════════════════════════════════════════════════════ */
.pagination-container{
  margin-top:clamp(32px,3.6vw,48px);
  gap:6px;
  flex-wrap:wrap;
}
.pagination-container button{
  border-radius:0;
  border:1px solid var(--a-line);
  background:var(--a-050);
  color:var(--a-800);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:15px;
  min-width:var(--lst-touch);
  min-height:var(--lst-touch);
  padding:0 14px;
  margin:0;
  transition:background-color var(--d-hover) var(--ease-out),
             color var(--d-hover) var(--ease-out),
             border-color var(--d-hover) var(--ease-out);
}
.pagination-container button:hover{background:var(--a-100);border-color:var(--a-border);color:var(--a-900);}
.pagination-container button.active{background:var(--a-500);border-color:var(--a-500);color:var(--a-ink);}
.pagination-container button:focus-visible{outline:3px solid var(--a-700);outline-offset:3px;}

.loading-message,
.empty-message,
.error-message{
  padding:clamp(56px,6vw,88px) 20px;
  font-size:17px;
  color:var(--a-800);
  background:var(--a-050);
  border:1px dashed var(--a-border);
}
.error-message{background:var(--sig-err-bg);border-color:var(--sig-err-fg);color:var(--sig-err-fg);}


/* ══════════════════════════════════════════════════════════════════════════
   10. 모바일 390 — 좁은 화면에서 다시 재는 자리
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .page-header{padding:36px var(--gut) 28px;}
  .page-header h1,
  .page-header .page-title{font-size:30px;padding-left:14px;border-left-width:4px;}
  .page-header p,
  .page-header .page-subtitle{font-size:16px;margin-left:18px;}

  .clt-head{padding:28px 0 56px;}
  .clt-head h1{font-size:30px;padding-left:14px;border-left-width:4px;}
  .clt-head .clt-sub{font-size:16px;}
  .clt-body{margin-top:-40px;}
  .clt-grid{gap:16px;}
  /* 전 160px → 후 240px. [디자인규격확인] R-180
     ★실측(390×844)과 맞바꾼 것을 숨기지 않는다 —
       전: 사진 119×160, 첫 화면에 1대 온전히 + 2대째가 살짝 걸침(카드 높이 477)
       후: 사진 179×240, 첫 화면에 1대 온전히만      (카드 높이 615)
       2대째까지 걸치게 하려면 사진칸을 135px 로 「지금보다 더 작게」 해야 한다.
       모바일에서는 3대를 한 화면에 넣을 방법이 없으므로
       「작게 2대」보다 「크게 1대」가 사장님 지적(어떤 세척기인지 모르겠다)에 맞다고 보고
       240px 으로 정했다. 되돌리려면 이 한 줄만 160px 으로 바꾸면 된다. R-183 ⓑ */
  .clt-media{height:240px;padding:16px;background:#FFFFFF;}
  .clt-card h2{font-size:24px;}
  .clt-cta{padding:24px var(--gut);gap:20px;}
  .clt-cta h3{font-size:22px;}
  .clt-cta .clt-btns{width:100%;}
  .clist-guide{padding:22px 20px 12px;}
  .clist-guide h2{font-size:22px;}
  .clist-guide-row{gap:4px;}

  .solution-card-grid{gap:20px;}
  .solution-card .card-content,
  #solution-list-target .slide-card .card-content{padding:20px;}
  .main-search-container{margin-bottom:20px;}

  .qna-list-item,
  .review-item{padding:20px 18px;}
  .qna-item-header h3{font-size:19px;}

  .notice-item-full,
  .notice-list-item{
    flex-wrap:wrap;
    gap:8px 12px;
    padding:18px 10px;
  }
  .notice-title-full,
  .notice-title{flex:1 1 100%;order:2;font-size:17px;}
  .notice-category-full,
  .notice-category{order:1;}
  .notice-date-full,
  .notice-date{order:1;margin-left:auto;}
}

/* [디자인규격확인] R-180 — 홈페이지는 글자 6단 규격 밖이다. 아래 26px 은
   F안 design-system.css 의 --fs-t1-mo(26px) 그대로다. 새로 지어낸 값이 아니다. */
@media (max-width:640px){
  /* ★여기는 원래 값을 그대로 지킨다.
     이 좁은 폭에서는 표 칸 폭이 1px 만 늘어도 화면이 가로로 밀린다
     (실측: 사진 88px·여백 10px 로 키웠더니 표가 375px 이 되어 2px 밀렸다).
     그래서 사진 확대는 PC 에서만 하고, 모바일은 원래대로 64px 로 되돌린다. */
  .story-table td img{max-height:64px;}   /* 폭은 원래 88px 그대로 둔다 */
  /* 좁은 화면에서는 게시일이 두 줄로 접혀야 표가 화면 안에 들어온다 */
  .story-table th:last-child,
  .story-table td:last-child{white-space:normal;}
  .story-table th,
  .story-table td{padding:8px 5px;font-size:14px;}
  /* 제목 글자를 17px 로 키웠더니 표의 최소폭이 1px 늘어 화면이 밀렸다(실측).
     좁은 화면에서는 원래 크기로 되돌린다. [디자인규격확인] R-180 */
  .story-title a{font-size:14px;}
  /* ★좌우 여백을 24px 밑으로 줄이지 말 것.
     이 표는 「게시일」 칸이 좁아 원래부터 표 안에서 18~23px 삐져나온다
     (지금 실사이트도 그렇다 — 좌우 40px 여백이 그것을 가려 주고 있었다).
     16px 으로 줄였더니 그 삐져나옴이 화면 밖으로 나와 1~2px 가로밀림이 생겼다(실측).
     24px 이면 삐져나옴이 여백 안에 들어가 가로밀림 0 이 된다. */
  .container:has(> .story-table){padding:20px 24px;margin:24px auto 48px;}
  .container:has(> .story-table) > h1{font-size:26px;}
}


/* ══════════════════════════════════════════════════════════════════════════
   11. 움직임을 꺼 달라는 손님 (apple-design §14)
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .clt-card,.solution-card,.qna-list-item,.industry-tab,
  .notice-item-full,.notice-list-item,.pagination-container button,
  .clt-btn-y,.clt-btn-o,#solution-list-target .slide-card{transition:none;}
  .clt-card:hover,.solution-card:hover,.qna-list-item:hover,
  #solution-list-target .slide-card:hover{transform:none;}
  .solution-card:hover .card-thumbnail img{transform:none;}
}


/* ─────────── 옷_상세.css (여기부터) ─────────── */

/* [디자인규격확인] 아팩 홈페이지에는 글자 6단·모서리 규격을 적용하지 않는다(R-180).
   ══════════════════════════════════════════════════════════════════════
   아팩 홈페이지 · 상세 9쪽 「옷만 입히기」 덧입힘 CSS · 2026-09-09 · 명령 #767 · 담당2
   ──────────────────────────────────────────────────────────────────────
   무엇인가 : 실사이트 상세 9쪽을 **한 줄도 지우지 않고** 배치·크기·여백만
              F안으로 바꾸는 덧입힘 파일이다. HTML·JS 는 손대지 않는다.
   덮는 쪽  : cleaner-smart15 · cleaner-c1 · cleaner-c2 · shoe-mold
              qna-post-sample · solution-post-sample · success-story-detail
              notice-detail · event-detail
   원칙     : ① 여기 쓰는 색·크기·여백은 전부 ★확정_F안\design-system.css 값이다.
                새로 지어낸 색 0건. (F안 원시토큰은 apak-new.css 가 이미 :root 에 깔았다)
              ② 무엇도 없애지 않는다 — display:none 0건. 링크·버튼·폼·사진 개수는 전=후.
                                                            (수칙 8 · R-184)
              ③ 글귀는 손대지 않는다. CSS 의 content 로 새 「말」을 넣지 않는다. (R-183)
                 (∵ ✔·● 같은 순수 장식 기호만 모양을 바꾼다 — 사이트 문구가 아니다)
              ④ display 를 !important 로 덮지 않는다. (R-182 재발 방지)
                 [hidden]{display:none!important} 못박기는 apak-new.css 가 이미 하고 있다.
              ⑤ !important 는 **HTML 안에 박힌 인라인 style 을 이길 때만** 쓴다.
                 쓴 자리마다 「인라인」이라고 적어 두었다. 색·크기·모서리에만 썼다.
   거는 법  : 각 쪽 <head> 의 **맨 끝**(</head> 바로 위)에 apak-new.css 다음 한 줄.
              <link rel="stylesheet" href="/css/apak-new.css">
              <link rel="stylesheet" href="/css/옷_상세.css">
              (맨 끝이어야 그 위 인라인 <style>(c1·c2·shoe-mold·notice·event)을 덮는다)
   ══════════════════════════════════════════════════════════════════════ */


/* ══ 0. 상세 전용 토큰 — design-system.css 에서 그대로 옮겨 왔다 ═════════
   apak-new.css 가 색(e-·a-·n-)·글꼴·그림자는 이미 깔았다. 여기서는
   design-system.css 의 「간격 12단·글자 9단·행간·자간」만 보탠다. */
:root{
  /* 간격 12단 (design-system.css 1-7절) */
  --sp-4:4px;   --sp-8:8px;   --sp-12:12px; --sp-16:16px; --sp-20:20px;
  --sp-24:24px; --sp-32:32px; --sp-44:44px; --sp-64:64px; --sp-96:96px;

  /* 글자 9단 (design-system.css 1-6절) */
  --fs-display:54px; --fs-t1:40px; --fs-t2:28px; --fs-t3:22px;
  --fs-lead:18px;    --fs-body:17px; --fs-sm:14px;
  --lh-display:1.14; --lh-t1:1.2;  --lh-t2:1.3;  --lh-t3:1.4;
  --lh-lead:1.6;     --lh-body:1.72; --lh-sm:1.6;
  --ls-display:-.0285em; --ls-t1:-.025em; --ls-t2:-.02em; --ls-t3:-.015em;
  --fw-700:700; --fw-800:800; --fw-900:900;

  --touch:44px;          /* 최소 터치면 */
  --border-w-strong:2px; /* F안 머리글 아래 선 두께 */

  /* ★읽는 폭 — 한 줄 34~35글자.
     실측 근거(F안 상세 _공통.css 6~7행): 한글 한 글자의 실제 폭은 1em 이 아니라
     0.864em 이다. 그래서 30em ÷ 0.864 ≒ 34.7자.
     em 을 쓰므로 사진 설명(14px)이든 본문(17px)이든 자수는 똑같이 34자로 맞는다. */
  --measure:30em;

  /* 상세 쪽 판(카드) 폭 — F안 컨테이너 1280~1440 중 글 읽는 쪽의 값 */
  --card-w:1040px;
  --card-pad:clamp(24px,3vw,48px);
}


/* ══ 1. 아홉 쪽 공통 ══════════════════════════════════════════════════ */

/* 1-1. Playfair Display(세리프) 걷어내기.
   이 글꼴에는 한글 글리프가 없어서 「드라이아이스 세척기 C-1」의 한글은 고딕,
   숫자·영문 C-1 만 세리프로 튀어 두 글꼴이 한 제목에 섞여 있었다. */
.product-header h1,
.page-header h1,
.detail-section h2,
.portfolio-section h2,
.product-content h2,
.spec-table:has(thead) thead th{
  font-family:var(--font-heading);
  font-variant-numeric:lining-nums tabular-nums;
}

/* 1-2. 초점 링·터치면 — 어느 쪽에서든 키보드로 짚을 수 있게 */
.product-detail-card a:focus-visible,
.story-container a:focus-visible,
.qna-detail-layout a:focus-visible,
.solution-detail-layout a:focus-visible,
.content-container a:focus-visible,
#event-container a:focus-visible,
.shoe-wrap a:focus-visible{
  outline:3px solid var(--a-700); outline-offset:3px;
}

/* 1-3. 본문 글은 읽는 것이 주인공 — 한 줄 34자.
   사진·표·갤러리에는 걸지 않는다(아래 3-6·5-3 에서 따로 넓혀 준다). */
.product-detail-card p,
.shoe-sec p,
.shoe-sec li,
.qna-question-box .post-body,
.solution-content-box .post-body,
.story-content,
.post-content,
#event-details{
  max-width:var(--measure);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--a-800);
  text-wrap:pretty;
}


/* ══ 2. 세척기 3쪽 · 판과 제목 ════════════════════════════════════════
   [바뀐 것] 가운데 정렬 흰 상자(모서리 8px·그림자) → 왼쪽 정렬 각진 맑은 면.
             제목 덩어리 높이를 줄여 기계 사진을 첫 화면 안으로 끌어올린다. */
.product-detail-card{
  max-width:960px;              /* 글은 34자로 좁히므로 판까지 1040 으로 넓히면 빈 곳만 는다 */
  margin:var(--sp-32) auto var(--sp-64);
  padding:var(--card-pad);
  background-color:var(--a-050);
  border:1px solid var(--a-line);
  border-radius:0;
  box-shadow:none;
}
.product-header{
  text-align:left;                 /* 가운데 → 왼쪽 */
  margin-bottom:var(--sp-32);      /* 40 → 32 */
  padding-left:var(--sp-20);
  border-left:5px solid var(--a-500);   /* F안 구획 제목의 시안 세로선 */
}
.product-header h1{
  font-size:clamp(28px,3.1vw,44px);     /* 2.8em(44.8px) 고정 → 화면 따라 */
  font-weight:var(--fw-900);
  letter-spacing:var(--ls-t1);
  line-height:var(--lh-t1);
  color:var(--a-900);
  margin:0 0 var(--sp-8);
}
.product-header .model-name{
  font-size:var(--fs-lead);
  line-height:var(--lh-lead);
  color:var(--a-700);
  margin:0;
  max-width:var(--measure);
}


/* ══ 3. ★세척기 3쪽 · 기계 사진을 맨 위에 크게 ═══════════════════════
   사장님 지적: 「어떤 세척기인지 모르겠다」.
   [전] c1 320×429 · c2 360×482 · smart15 는 상자 900×480 안에 사진이
        392×480 으로 갇혀 있었다(max-height:480 + object-fit:contain).
   [후] 아래 값. 원본 화소(c1·c2 896×1200 · smart15 855×1047) 안쪽이라
        키워도 뭉개지지 않는다. */

/* 3-1. c1·c2 — 쪽 안 <style> 의 max-width:320px/360px 을 덮는다 */
.product-hero{
  padding:var(--sp-24) 0 var(--sp-24);
  background-color:transparent;         /* 순백 판 #fff → 판을 없애고 사진만 남긴다 */
  border:0;
  margin-bottom:var(--sp-32);
}
.product-hero img{
  max-width:min(520px,100%);            /* 320/360 → 520 */
  width:100%;
  height:auto;
  border-radius:0;
  /* ★제품 컷은 원본 사진 자체가 흰 배경이다. 테두리를 사진에 바로 둘러 주어야
     크림색 판 위에 흰 네모가 떠 보이지 않는다(판을 크림색으로 두면 이음매가 보였다). */
  border:1px solid var(--a-line);
  background-color:#FFFFFF;
}
.product-hero .hero-sub{
  color:var(--a-700);
  font-size:var(--fs-lead);
  line-height:var(--lh-lead);
  margin:var(--sp-20) auto 0;
  max-width:var(--measure);
}

/* 3-2. smart15 — 갇혀 있던 상자를 풀고 사진 자체를 키운다 */
.main-media{
  min-height:0;
  max-height:none;
  background-color:transparent;   /* 회색 판 #eee → 판을 없애고 사진에 테두리를 준다 */
  border:0;
  border-radius:0;
  margin-bottom:var(--sp-20);
  padding:0;
}
.main-media img{
  /* 인라인 style="width:100%;height:auto;border-radius:8px" 를 이겨야 한다.
     (gallery.js 가 사진을 갈아끼우면 인라인이 없어지지만, 스크립트가 안 돌 때를
      대비해 못을 박는다. display 는 건드리지 않는다 — R-182) */
  width:auto !important;                /* 인라인 */
  height:auto !important;               /* 인라인 */
  max-width:100%;
  max-height:clamp(420px,74vh,760px);   /* 480 고정 → 화면 높이에 맞춰 */
  border-radius:0 !important;           /* 인라인 */
  margin:0 auto;
  object-fit:contain;
  border:1px solid var(--a-line);
  background-color:#FFFFFF;
}
.main-media iframe,
.main-media video{ max-height:clamp(320px,60vh,620px); }

/* 3-3. 썸네일 줄 — 둥근 모서리·3px 테두리 → 각진 면 + 시안 밑선 */
.thumbnail-list{ gap:var(--sp-8); grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
.thumb-wrapper{
  border-radius:0;
  border:1px solid var(--a-line);
  transition:border-color var(--d-hover) var(--ease-out);
}
.thumb-wrapper:hover{ border-color:var(--a-500); }
.thumb-wrapper.active{
  border-color:var(--a-700);
  box-shadow:inset 0 0 0 3px var(--a-500);
}
.thumbnail{ height:88px; }

/* 3-4. 구획 제목 — 밑줄 → F안식 「윗선 2px + 시안」.
   구획이 어디서 시작하는지가 눈에 먼저 들어온다. */
.detail-section{ margin-bottom:var(--sp-64); }
.detail-section h2{
  font-size:clamp(22px,2vw,28px);
  font-weight:var(--fw-900);
  letter-spacing:var(--ls-t2);
  line-height:var(--lh-t2);
  color:var(--a-900);
  border-bottom:0;
  border-top:var(--border-w-strong) solid var(--a-500);
  padding:var(--sp-20) 0 0;
  margin:0 0 var(--sp-24);
}

/* 3-5. 특징·목록 — 둥근 카드 + 동그란 ✔ → 선으로 나눈 줄 + 시안 짧은 막대
   (F안 _공통.css 의 .prose ul li::before 와 같은 방식) */
.detail-section ul{ gap:0 var(--sp-32); grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.detail-section ul li{
  padding:var(--sp-16) 0 var(--sp-16) var(--sp-24);
  background-color:transparent;
  border:0;
  border-top:1px solid var(--a-line);
  border-radius:0;
  color:var(--a-800);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  min-height:var(--touch);
}
.detail-section ul li strong{ color:var(--a-900); font-weight:var(--fw-700); }
.detail-section ul li::before{
  content:"";                     /* 장식 기호 ✔ → 시안 막대 (사이트 문구 아님) */
  left:0; top:1.55em;
  width:12px; height:2px;
  background-color:var(--a-500);
  border-radius:0;
}
/* 「다른 기종 보기」처럼 링크만 든 줄은 통째로 눌리게 44px 를 준다 */
.detail-section ul li a{
  display:inline-flex; align-items:center; min-height:var(--touch);
  color:var(--a-700); font-weight:var(--fw-700);
}
.detail-section ul li a:hover{ color:var(--a-900); }

/* 3-6. 사진·표는 좁히지 않는다 — 위 1-3 에서 글만 좁혔다 */
.detail-section table,
.detail-section .case-grid,
.detail-section figure{ max-width:none; }

/* 3-7. 제원표 — 얼룩말 무늬·둥근 모서리 → 실선 한 줄, 머리줄만 진하게
   (F안 상세 _공통.css 111~121행: 왼쪽 항목 칸을 먹칠하지 않는다. 구매담당자는
    제원을 보러 온다) */
.spec-table{
  border-radius:0;
  overflow:visible;
  margin-top:var(--sp-24);
  font-variant-numeric:tabular-nums;
  border-top:var(--border-w-strong) solid var(--a-900);
}
.spec-table th,.spec-table td{
  border-bottom:1px solid var(--a-line);
  padding:var(--sp-16) var(--sp-20);
  font-size:var(--fs-body);
  line-height:var(--lh-sm);
  vertical-align:top;
}
.spec-table tbody tr:nth-child(even){ background-color:transparent; }  /* 얼룩말 제거 */
.spec-table tbody th{
  width:38%;
  background-color:transparent;
  color:var(--a-900);
  font-weight:var(--fw-700);
}
.spec-table tbody td{ color:var(--a-800); }
.spec-table tbody tr{ transition:background-color var(--d-hover) var(--ease-out); }
.spec-table tbody tr:hover{ background-color:var(--a-100); }           /* 연노랑 → 맑은 면 */
/* 비교표(✅/❌ 머리줄이 있는 표) — products.css 의 :has() 규칙과 같은 무게로 맞춘다 */
.spec-table:has(thead) thead th{
  background-color:var(--n-900);
  color:var(--n-100);
  border-top:0;
  border-bottom:0;
  padding:var(--sp-16) var(--sp-20);
  font-size:var(--fs-body);
  font-weight:var(--fw-800);
}
.spec-table:has(thead) thead th:first-child{
  background-color:var(--a-700);
  color:var(--n-100);
  font-weight:var(--fw-800);
  border-top-color:transparent;
}
.spec-table:has(thead) tbody td:first-child{ border-right:1px solid var(--a-line); }
.spec-table:has(thead) thead th a{ color:var(--n-100); }

/* 3-8. 세척 전·후 짝 (smart15) — 두 장을 맞대어 「한 장」으로 읽히게.
   HTML 안에 인라인 style 로 박혀 있어서 여기만 !important 를 쓴다.
   ★display 는 건드리지 않는다(R-182). 간격·모서리·색만 바꾼다. */
.detail-section div[style*="grid-template-columns:1fr 1fr"]{
  gap:2px !important;                    /* 인라인 8px → 2px */
}
.detail-section img[alt="세척 전"],
.detail-section img[alt="세척 후"]{
  border-radius:0 !important;            /* 인라인 6px */
}
.detail-section img[alt="세척 전"]+span{
  background:var(--e-700) !important;    /* 인라인 빨강 #b3261e → 세척 전 흙빛 */
  color:var(--e-100) !important;
  border-radius:0 !important;
  padding:6px 12px !important;
  font-weight:var(--fw-800) !important;
}
.detail-section img[alt="세척 후"]+span{
  background:var(--a-700) !important;    /* 인라인 파랑 #1565c0 → 세척 후 시안 */
  color:var(--n-100) !important;
  border-radius:0 !important;
  padding:6px 12px !important;
  font-weight:var(--fw-800) !important;
}
/* 사진 설명 — 인라인 회색 #54636f · 굵은 글씨 #17140f 를 F안 글자색으로 */
.detail-section p[style*="#54636f"]{ color:var(--a-700) !important; }
.detail-section p b[style*="#17140f"]{ color:var(--a-900) !important; }

/* 3-9. 세척 사례 짝 갤러리 (c1·c2) — 카드 상자 → 맞댄 두 장 + 선 */
.case-grid{ gap:var(--sp-32); }
.case-card{
  background-color:transparent;
  border:0;
  border-top:1px solid var(--a-line);
  border-radius:0;
  padding:var(--sp-20) 0 0;
}
.case-pair{ gap:2px; }                   /* 6px → 2px, 두 장을 맞댄다 */
.case-pair img{ border-radius:0; background-color:var(--a-200); }
.case-badge{
  border-radius:0;
  background:var(--e-700);
  color:var(--e-100);
  padding:5px 12px;
  font-weight:var(--fw-800);
  font-size:var(--fs-sm);
}
.case-badge.after{ background:var(--a-700); color:var(--n-100); }
.case-caption{
  color:var(--a-700);
  font-size:var(--fs-sm);
  line-height:var(--lh-sm);
  margin-top:var(--sp-12);
  max-width:var(--measure);
}
.case-scroll-hint{ color:var(--a-700); font-size:var(--fs-sm); }

/* 3-10. 「이 모델로 견적 문의하기」 — 가운데 400px 알약 → 왼쪽 다음행동 띠 */
.action-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:100%;
  min-height:56px;
  margin:var(--sp-44) 0 0;
  padding:0 var(--sp-32);
  background-color:var(--a-500);
  color:var(--a-ink);
  border-radius:0;
  font-family:var(--font-heading);
  font-size:var(--fs-lead);
  font-weight:var(--fw-800);
  box-shadow:var(--sh-2);
  transition:background-color var(--d-hover) var(--ease-out),
             transform var(--d-press) var(--ease-out);
}
.action-button:hover{ background-color:var(--a-400); color:var(--a-ink); transform:translateY(-2px); }
.action-button:active{ background-color:var(--a-550); transform:translateY(0); }
/* 버튼 위에 시안 굵은 선 하나 — 「여기부터 다음 행동」 (F안 .next) */
.product-detail-card>.action-button{
  border-top:var(--border-w-strong) solid var(--a-500);
  padding-top:0;
  margin-top:var(--sp-44);
}


/* ══ 4. 신발 금형(shoe-mold) ═════════════════════════════════════════ */

/* 4-1. 첫 화면 — 사진 칸을 넓혀 기계·작업 장면을 더 크게 (482 → 약 520) */
.shoe-hero{ background-color:var(--e-900); padding:var(--sp-64) 0; }
.shoe-wrap{ max-width:1200px; padding:0 var(--gut); }
/* ★821px 이상에서만 두 칸으로 나눈다 — 쪽 안 <style> 의
   @media(max-width:820px){grid-template-columns:1fr} 보다 이 파일이 뒤에 실려서,
   테두리를 안 치면 좁은 화면에서도 두 칸이 되어 사진이 61px 로 쭈그러든다
   [직접 실측 2026-09-09: 390px 에서 350×263 → 61×46, 가로 밀림 60px]. */
@media (min-width:821px){
  .shoe-hero-grid{ grid-template-columns:1fr 1.05fr; gap:var(--sp-44); }
}
.shoe-hero h1{
  font-family:var(--font-heading);
  font-size:clamp(28px,3.4vw,48px);
  font-weight:var(--fw-900);
  letter-spacing:var(--ls-t1);
  line-height:var(--lh-t1);
  color:var(--e-100);
  margin:0 0 var(--sp-16);
  padding-left:var(--sp-20);
  border-left:4px solid var(--a-500);
}
.shoe-hero p{
  color:var(--e-300);
  font-size:var(--fs-lead);
  line-height:var(--lh-lead);
  max-width:var(--measure);
  margin:0 0 var(--sp-24);
}
.shoe-hero img{ border-radius:0; border:1px solid var(--e-600); }

/* 4-2. 단추 — 벽돌색 알약 → F안 각진 시안 단추 */
.btn-shoe{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:0 var(--sp-32);
  background-color:var(--a-500); color:var(--a-ink);
  border-radius:0;
  font-family:var(--font-heading);
  font-size:var(--fs-lead); font-weight:var(--fw-800);
  margin:0 var(--sp-12) var(--sp-12) 0;
  box-shadow:var(--sh-2);
  transition:background-color var(--d-hover) var(--ease-out),
             transform var(--d-press) var(--ease-out);
}
.btn-shoe:hover{ background-color:var(--a-400); color:var(--a-ink); transform:translateY(-2px); }
.btn-shoe.ghost{
  background-color:transparent; color:var(--e-100);
  border:2px solid var(--a-400); box-shadow:none;
}
.btn-shoe.ghost:hover{ background-color:var(--a-500); color:var(--a-ink); border-color:var(--a-500); }
/* [디자인규격확인] shoe-mold.html 271행의 전화 단추는 HTML 인라인으로
   `style="background:#2b1a12"`(짙은 갈색)이 박혀 있어 위의 시안 바탕을 이긴다.
   그런데 글자색은 내가 어두운 --a-ink 로 바꿔 놓아 「어두운 바탕 + 어두운 글자」가
   됐다 — 실측 대비 1.01:1, 전화번호가 눈에 안 보였다(옷 얹기 전 흰 글자).
   글귀·바탕은 그대로 두고 **글자색만** 크림색으로 되돌린다.
   (내 규칙을 스스로 되돌리는 것이라 !important 는 필요 없다)
   (2026-09-09 · 명령767 수리2 · 담당3) */
.btn-shoe[style*="background:#2b1a12"],
.btn-shoe[style*="background: #2b1a12"]{ color:var(--e-100); }

/* 4-3. 구획 — 회색 띠·밑선 → F안 맑은 면 두 단 + 윗선 제목 */
.shoe-sec{ padding:var(--sp-64) 0; border-bottom:1px solid var(--a-line); background-color:var(--a-050); }
.shoe-sec.alt{ background-color:var(--a-100); }
.shoe-sec h2{
  font-family:var(--font-heading);
  font-size:clamp(22px,2.2vw,32px);
  font-weight:var(--fw-900);
  letter-spacing:var(--ls-t2);
  line-height:var(--lh-t2);
  color:var(--a-900);
  border-top:var(--border-w-strong) solid var(--a-500);
  padding-top:var(--sp-20);
  margin:0 0 var(--sp-24);
}
@media (min-width:821px){
  .shoe-2{ gap:var(--sp-44); }
  .shoe-3{ gap:0 var(--sp-32); }
}
.shoe-2 img{ border-radius:0; border:1px solid var(--a-line); }
.shoe-machine img{ border-radius:0; }

/* 4-4. 확인 카드·단계·문답 — 둥근 상자 → 왼쪽 굵은 선 하나 (F안 .pull) */
.chk-card{
  background-color:transparent;
  border:0; border-left:4px solid var(--a-500);
  border-radius:0;
  padding:var(--sp-12) 0 var(--sp-12) var(--sp-20);
  color:var(--a-800);
  font-size:var(--fs-body); line-height:var(--lh-body);
  min-height:var(--touch);
}
.step{
  background-color:transparent;
  border:0; border-top:var(--border-w-strong) solid var(--a-500);
  border-radius:0;
  padding:var(--sp-20) 0 0;
}
.step b{ color:var(--a-900); font-family:var(--font-heading); font-size:var(--fs-t3); font-weight:var(--fw-900); }
.step-3{ gap:var(--sp-32); }
.faq{
  background-color:transparent;
  border:0; border-top:1px solid var(--a-line);
  border-radius:0;
  padding:var(--sp-20) 0;
  margin:0;
}
.faq b{ color:var(--a-900); font-weight:var(--fw-700); font-size:var(--fs-t3); line-height:var(--lh-t3); }

/* 4-5. 비교표 — 갈색 머리줄 → 먹색 한 줄, 몸통은 밝게 */
.cmp{ background-color:transparent; margin:var(--sp-24) 0; border-top:var(--border-w-strong) solid var(--a-900); }
.cmp th,.cmp td{
  border:0; border-bottom:1px solid var(--a-line);
  padding:var(--sp-16) var(--sp-20);
  font-size:var(--fs-body); line-height:var(--lh-sm); color:var(--a-800);
}
.cmp th{ background-color:transparent; color:var(--a-900); font-weight:var(--fw-700); }
.cmp thead th{ background-color:var(--n-900); color:var(--n-100); font-weight:var(--fw-800); }

/* 4-6. 관련 글 줄 목록 — 한 줄 최소 56px (F안 .links) */
.artlist a{
  display:flex; align-items:center; gap:var(--sp-16);
  min-height:56px; padding:0;
  color:var(--a-800); font-weight:var(--fw-700);
  transition:color var(--d-hover) var(--ease-out);
}
.artlist a::before{ content:""; width:14px; height:2px; background-color:var(--a-500); flex:none; }
.artlist a:hover{ background-color:transparent; color:var(--a-700); }
.artlist li{ border-bottom:1px solid var(--a-line); }
.readmore{
  display:inline-flex; align-items:center; min-height:var(--touch);
  color:var(--a-700); font-weight:var(--fw-700);
}

/* 4-7. 마지막 부르는 띠 — 벽돌색 판 → F안 먹색 판 + 시안 단추 */
.shoe-cta{ background-color:var(--n-900); padding:var(--sp-96) var(--gut); }
.shoe-cta h2{
  font-family:var(--font-heading);
  font-size:clamp(24px,2.6vw,36px);
  font-weight:var(--fw-900);
  letter-spacing:var(--ls-t2);
  color:var(--n-100);
  margin:0 0 var(--sp-12);
}
.shoe-cta p{ color:var(--n-200); font-size:var(--fs-lead); margin:0 auto var(--sp-24); max-width:var(--measure); }
.shoe-cta .btn-shoe{ background-color:var(--a-500); color:var(--a-ink); }
.shoe-cta .btn-shoe:hover{ background-color:var(--a-400); color:var(--a-ink); }
.shoe-note{ color:var(--n-300); font-size:var(--fs-sm); margin-top:var(--sp-16); }


/* ══ 5. 글 3쪽 (Q&A · 솔루션 · 성공사례) ═════════════════════════════ */

/* 5-1. 글 상자 — 흰 카드(모서리 12px·그림자) → 각진 맑은 면 + 실선 */
.qna-question-box,
.solution-content-box,
.story-container{
  background-color:var(--a-050);
  border:1px solid var(--a-line);
  border-radius:0;
  box-shadow:none;
  padding:var(--card-pad);
}
.story-container{ max-width:var(--card-w); margin:var(--sp-32) auto var(--sp-64); }

/* 5-2. 글 제목 — 행간 1.5 로 늘어져 있던 것을 1.2 로 죄고 시안 세로선 */
.qna-question-box .post-header h1,
.solution-content-box .post-header h1,
.story-header h1{
  font-family:var(--font-heading);
  font-size:clamp(26px,2.7vw,40px);
  font-weight:var(--fw-900);
  letter-spacing:var(--ls-t1);
  line-height:var(--lh-t1);
  color:var(--a-900);
  margin:0 0 var(--sp-20);
  padding-left:var(--sp-20);
  border-left:5px solid var(--a-500);
  word-break:keep-all;
}
.qna-question-box .post-meta,
.solution-content-box .post-meta,
.story-meta{
  gap:var(--sp-8) var(--sp-24);
  color:var(--a-700);
  font-size:var(--fs-sm);
  line-height:var(--lh-sm);
  font-variant-numeric:tabular-nums;
}
.qna-question-box .post-meta,
.solution-content-box .post-meta{
  margin-bottom:var(--sp-32);
  padding-bottom:var(--sp-16);
  border-bottom:1px solid var(--a-line);
}
.story-header{ border-bottom:1px solid var(--a-line); padding-bottom:var(--sp-20); margin-bottom:var(--sp-32); }

/* 5-3. 사진은 글 폭에 갇히지 않는다 — 넓은 화면에서만 글 밖으로 넓힌다.
   (좁은 화면에서 넓히면 가로 밀림이 난다 — 그래서 1024px 이상에서만) */
@media (min-width:1024px){
  .story-content>figure,
  .story-content>img,
  .story-content>video,
  .post-content>img,
  .post-content>video,
  .post-content>figure,
  #event-details>img,
  #event-details>figure{
    width:calc(100% + 330px);
    max-width:none;
  }
}
.story-content figure{ margin-left:0; margin-right:0; }
.story-content img,
.story-content video,
.post-content img,
.post-content video,
#event-details img{
  border-radius:0 !important;            /* 인라인 8px */
  box-shadow:none !important;
  border:1px solid var(--a-line);
}
.story-content figcaption{
  color:var(--a-700); font-size:var(--fs-sm); line-height:var(--lh-sm);
  max-width:var(--measure); padding-top:var(--sp-12);
}

/* 5-4. 성공사례 사진 묶음 — 300px 3단 → 360px 2단, 모서리·그림자 제거 */
.story-container .media-gallery{
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:var(--sp-24);
  margin:var(--sp-44) 0;
}
.story-container .media-gallery img,
.story-container .media-gallery video{
  border-radius:0;
  box-shadow:none;
  border:1px solid var(--a-line);
  background-color:var(--a-200);
}
.story-video-prominent{ border-radius:0; margin-bottom:var(--sp-44); }

/* 5-5. Q&A 사진 — 모서리 제거 */
.qna-detail-main .media-gallery img,
.qna-detail-main .media-gallery video{ border-radius:0; border:1px solid var(--a-line); }
.qna-detail-main .media-gallery{ margin-top:var(--sp-24); }

/* 5-6. 「목록으로 돌아가기」 — 청회색 알약 → 각진 시안 단추 */
.back-to-list-button,
.back-to-list{
  display:inline-flex; align-items:center; gap:var(--sp-8);
  min-height:56px; padding:0 var(--sp-32);
  border-radius:0;
  font-family:var(--font-heading); font-size:var(--fs-body); font-weight:var(--fw-800);
  margin-top:var(--sp-44);
  transition:background-color var(--d-hover) var(--ease-out);
}
.back-to-list-button{ background-color:var(--a-500); color:var(--a-ink); }
.back-to-list-button:hover{ background-color:var(--a-400); color:var(--a-ink); }
.back-to-list{ background-color:transparent; color:var(--a-900); border:2px solid var(--a-900); }
.back-to-list:hover{ background-color:var(--a-900); color:var(--n-100); border-color:var(--a-900); }

/* 5-7. 답변·댓글 (Q&A) — 둥근 상자·파랑 → 각진 면 + 시안
   ★실제로 화면에 뜨는 답변은 server.js 1602행이 만들어 넣는 `.reply-box` 이고
     배경·모서리·여백이 **인라인 style 로 박혀** 있다(고칠 수 없는 자리다).
     그래서 이 네 줄에만 !important 를 쓴다 — 색·모서리·여백뿐, display 는 안 건드린다. */
.qna-replies .reply-box{
  background:transparent !important;      /* 인라인 #f9f9f9 */
  border-radius:0 !important;             /* 인라인 8px */
  padding:var(--sp-24) 0 !important;      /* 인라인 20px */
  margin-top:0 !important;                /* 인라인 15px */
  border-top:1px solid var(--a-line);
}
.qna-replies .reply-box>p{
  margin:0 0 var(--sp-12);
  font-size:var(--fs-sm); line-height:var(--lh-sm); color:var(--a-700);
}
.qna-replies .reply-box>p strong{ color:var(--a-900); font-weight:var(--fw-800); font-size:var(--fs-body); }
.qna-replies .reply-box>p span{ color:var(--a-700) !important; }  /* 인라인 #888 */
.reply-content{
  font-size:var(--fs-body); line-height:var(--lh-body);
  color:var(--a-800); max-width:var(--measure);
}
.replies-section h3,
.expert-reply-container h2,
.replies-section h2,
.reply-form-section h2{
  font-family:var(--font-heading);
  font-size:var(--fs-t2); font-weight:var(--fw-900);
  letter-spacing:var(--ls-t2); line-height:var(--lh-t2);
  color:var(--a-900);
  border-bottom:0;
  border-top:var(--border-w-strong) solid var(--a-500);
  padding:var(--sp-20) 0 0;
  margin:var(--sp-44) 0 var(--sp-24);
}
.replies-section h3 .fa,
.expert-reply-container h2 .fa,
.replies-section h2 .fa,
.reply-form-section h2 .fa{ color:var(--a-700); }
.reply-item{
  background-color:var(--a-050);
  border:0; border-top:1px solid var(--a-line);
  border-radius:0;
  padding:var(--sp-20) 0;
  margin-bottom:0;
}
.reply-item.expert-reply{
  background-color:var(--a-100);
  border-color:var(--a-500);
  border-top-width:var(--border-w-strong);
  padding:var(--sp-20);
}
.reply-meta{ font-size:var(--fs-sm); color:var(--a-700); margin-bottom:var(--sp-12); }
.expert-badge{ color:var(--a-700); font-weight:var(--fw-800); }
.reply-item p{ color:var(--a-800); font-size:var(--fs-body); line-height:var(--lh-body); max-width:var(--measure); }
.reply-to-comment-btn{
  border-radius:0; border:1px solid var(--a-border);
  color:var(--a-800); min-height:var(--touch); padding:0 var(--sp-16);
}
.reply-to-comment-btn:hover{ background-color:var(--a-900); color:var(--n-100); border-color:var(--a-900); }
.reply-target-info{
  background-color:var(--a-100); border:0;
  border-left:4px solid var(--a-500); border-radius:0;
  padding:var(--sp-12) var(--sp-16);
}
#reply-target-author{ color:var(--a-700); }
.cancel-reply-btn{ color:var(--a-700); min-width:var(--touch); min-height:var(--touch); }
.all-replies-container .empty-reply{
  border:1px dashed var(--a-border); border-radius:0; color:var(--a-700);
}
#reply-form input[type="text"],
#reply-form textarea{
  border-radius:0; border:1px solid var(--a-border);
  background-color:#FFFFFF; color:var(--a-900);
  font-size:var(--fs-body); min-height:var(--touch); padding:var(--sp-12) var(--sp-16);
}
#reply-form input:focus,#reply-form textarea:focus{
  outline:3px solid var(--a-700); outline-offset:2px; border-color:var(--a-700);
}
#reply-form .qna-submit-btn{
  background-color:var(--a-500); color:var(--a-ink);
  border-radius:0; min-height:56px;
  font-family:var(--font-heading); font-size:var(--fs-lead); font-weight:var(--fw-800);
}
#reply-form .qna-submit-btn:hover{ background-color:var(--a-400); color:var(--a-ink); }

/* 5-8. 옆 목록(솔루션·Q&A) — 둥근 상자 → 각진 면 + 44px 줄 */
.solution-detail-sidebar h3,
.qna-detail-sidebar h3{
  font-family:var(--font-heading);
  font-size:var(--fs-t3); font-weight:var(--fw-900);
  letter-spacing:var(--ls-t3); color:var(--a-900);
  border-bottom:var(--border-w-strong) solid var(--a-500);
  padding-bottom:var(--sp-12); margin-bottom:var(--sp-16);
}
#solution-sidebar-search,
#qna-sidebar-search{
  border-radius:0; border:1px solid var(--a-border);
  background-color:#FFFFFF; color:var(--a-900);
  min-height:var(--touch); font-size:var(--fs-sm);
}
#solution-sidebar-search:focus,#qna-sidebar-search:focus{
  outline:3px solid var(--a-700); outline-offset:2px; border-color:var(--a-700);
}
.sidebar-search .fa-search{ color:var(--a-700); }
.sidebar-list,.qna-sidebar-list{
  border-radius:0; border:1px solid var(--a-line);
  background-color:var(--a-050);
}
.sidebar-list a,.qna-sidebar-list a{
  display:flex; align-items:center;
  min-height:var(--touch);
  padding:var(--sp-12) var(--sp-16);
  border-bottom:1px solid var(--a-line);
  color:var(--a-800); font-size:var(--fs-sm); line-height:var(--lh-sm);
}
.sidebar-list a:hover,.qna-sidebar-list a:hover{ background-color:var(--a-100); color:var(--a-900); }
.sidebar-list a.active,.qna-sidebar-list a.active{
  background-color:var(--a-200); color:var(--a-900); font-weight:var(--fw-700);
  box-shadow:inset 3px 0 0 var(--a-500);
}


/* ══ 6. 틀 2쪽 (공지 상세 · 이벤트 상세) ══════════════════════════════
   ※ 서버가 글자를 채워 넣는 틀이다. 브라우저로 바로 열면 본문이 비어 보인다. */
.content-container .container,
#event-container{
  max-width:var(--card-w);
  margin:var(--sp-32) auto var(--sp-64);
  padding:var(--card-pad);
  background-color:var(--a-050);
  border:1px solid var(--a-line);
  border-radius:0;
  box-shadow:none;
}
.page-header{ text-align:left; padding:var(--sp-64) var(--gut) var(--sp-24); }
.page-header .page-title,
#event-title{
  font-family:var(--font-heading);
  font-size:clamp(28px,3.1vw,44px);
  font-weight:var(--fw-900);
  letter-spacing:var(--ls-t1);
  line-height:var(--lh-t1);
  color:var(--a-900);
  margin:0 0 var(--sp-12);
  padding-left:var(--sp-20);
  border-left:5px solid var(--a-500);
  border-bottom:0;
  padding-bottom:0;
  word-break:keep-all;
}
.page-header .post-meta,
#event-container .post-meta{
  color:var(--a-700); font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;
  padding-left:var(--sp-20);
}
#event-container .post-meta{
  padding:0 0 var(--sp-20);
  border-bottom:1px solid var(--a-line);
  margin-bottom:var(--sp-32);
}
.post-content h1,.post-content h2,.post-content h3,
#event-details h2,#event-details h3{
  font-family:var(--font-heading);
  color:var(--a-900);
  font-weight:var(--fw-900);
  letter-spacing:var(--ls-t2);
  line-height:var(--lh-t2);
  border-top:var(--border-w-strong) solid var(--a-500);
  padding-top:var(--sp-20);
  margin-top:var(--sp-64);
  margin-bottom:var(--sp-16);
  max-width:var(--measure);
}
.post-content p,#event-details p{ margin-bottom:var(--sp-24); }
.post-content .content-button,
#apply-button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:0 var(--sp-32);
  background-color:var(--a-500); color:var(--a-ink);   /* 파랑 #007bff → F안 시안 */
  border-radius:0;
  font-family:var(--font-heading); font-size:var(--fs-lead); font-weight:var(--fw-800);
  box-shadow:var(--sh-2);
}
.post-content .content-button:hover,
#apply-button:hover{ background-color:var(--a-400); color:var(--a-ink); transform:translateY(-2px); }
.apply-button-wrapper{
  text-align:left;
  border-top:var(--border-w-strong) solid var(--a-500);
  border-color:var(--a-500);
  margin-top:var(--sp-44);
  padding-top:var(--sp-24);
}
#event-container #media-gallery{ gap:var(--sp-24); margin-bottom:var(--sp-44); }
#event-container #media-gallery img,
#event-container #media-gallery video{ border-radius:0; border:1px solid var(--a-line); }
.loading,.error{ color:var(--a-700); font-size:var(--fs-body); }


/* ══ 7. 좁은 화면 ═════════════════════════════════════════════════════ */
@media (max-width:768px){
  .product-detail-card,
  .story-container,
  .content-container .container,
  #event-container,
  .qna-question-box,
  .solution-content-box{ padding:var(--sp-24) var(--sp-20); margin-bottom:var(--sp-44); }

  .product-header{ margin-bottom:var(--sp-24); padding-left:var(--sp-16); }
  .product-hero{ padding:var(--sp-20) var(--sp-16) var(--sp-16); }
  .product-hero img{ max-width:100%; }      /* 214px → 화면 폭 가득 */
  .main-media{ padding:var(--sp-12); }
  .main-media img{ max-height:none; width:100% !important; }   /* 인라인 */

  .detail-section{ margin-bottom:var(--sp-44); }
  .detail-section h2{ padding-top:var(--sp-16); margin-bottom:var(--sp-20); }
  .spec-table th,.spec-table td{ padding:var(--sp-12) var(--sp-8); }
  .spec-table tbody th{ width:42%; }
  /* ★box-sizing 을 같이 주지 않으면 좌우 여백 32px 이 폭에 더해져 화면을 밀어낸다
     [직접 실측 2026-09-09: 390px 화면에서 신발금형 60px · 성공사례 43px 밀림] */
  .action-button,.btn-shoe,.back-to-list-button,.back-to-list,#apply-button{
    width:100%; box-sizing:border-box; margin-left:0; margin-right:0;
  }

  .shoe-hero{ padding:var(--sp-44) 0; }
  .shoe-sec{ padding:var(--sp-44) 0; }
  /* 비교표 칸 여백을 좁은 화면에서 되돌린다 — 20px 을 그대로 두면 칸 안 링크가
     2px 만큼 화면 밖으로 나간다 [직접 실측 2026-09-09 · 390px] */
  .cmp th,.cmp td{ padding:var(--sp-12) var(--sp-8); }
  .shoe-cta{ padding:var(--sp-64) var(--sp-20); }

  .story-container .media-gallery{ grid-template-columns:1fr; gap:var(--sp-16); }
  .page-header{ padding:var(--sp-32) var(--sp-20) var(--sp-16); }
}


/* ══ 8. 움직임을 꺼 달라는 손님 (apple-design §14) ════════════════════ */
@media (prefers-reduced-motion:reduce){
  .action-button,.btn-shoe,.back-to-list-button,.back-to-list,
  #apply-button,.post-content .content-button,.thumb-wrapper,.spec-table tbody tr{
    transition:none;
  }
  .action-button:hover,.btn-shoe:hover,.back-to-list-button:hover,
  #apply-button:hover,.post-content .content-button:hover{ transform:none; }
}


/* ─────────── 옷_폼안내.css (여기부터) ─────────── */

/* [디자인규격확인] 아팩 홈페이지에는 글자 6단·모서리 규격을 적용하지 않는다(R-180).
   ══════════════════════════════════════════════════════════════════════
   아팩 홈페이지 · 「옷만 입히기」 ② 폼·안내 12쪽 전용 · 2026-09-09 · 명령767 · 담당3
   ──────────────────────────────────────────────────────────────────────
   무엇인가 : 실사이트의 주문·견적·응모 폼 3쪽과 안내·약관 9쪽을
              **HTML 을 한 글자도 고치지 않고** 색·글자·여백·모서리만
              F안으로 갈아입히는 덧입힘 파일이다.

   덮는 쪽  : [폼]  order.html · quote-cleaner.html · event-apply.html
              [안내] guide.html · terms.html · privacy.html · refund.html ·
                     order-success.html · order-fail.html · 404.html ·
                     notice-detail.html · event-detail.html

   원칙     : ① 값은 전부 ★확정_F안\design-system.css 에서 가져왔다. 새로 지어낸 값 0건.
              ② display 를 단 한 줄도 쓰지 않는다.
                 주문 6단계·오류문구·모달·미리보기가 전부 JS 의 display 로 켜고 꺼진다.
                 여기서 display 를 건드리면 **주문이 멈춘다.** (R-182 · R-184 · 수칙8)
              ③ 글귀는 손대지 않는다. content 로 새 글자를 넣지 않는다. (R-183)
                 (기존에 이미 있던 .required::after 의 별표 * 만 색을 바꾼다)
              ④ 약관·개인정보·환불 3쪽은 법적 문서다 — 읽기 편하게만 한다.
              ⑤ 손이 큰 사람도 누르게 — 입력칸·버튼 44px 이상(대부분 56px).

   거는 법  : 각 쪽 <head> 의 **맨 끝**(</head> 바로 위)에, apak-new.css **다음**에 한 줄.
              <link rel="stylesheet" href="/css/apak-new.css">
              <link rel="stylesheet" href="/css/옷_폼안내.css">
              (맨 끝이어야 그 위 인라인 <style> 의 값을 덮을 수 있다)
              ※ [hidden]{display:none!important} 은 apak-new.css 62행이 이미 못박는다.
                 여기서 다시 쓰지 않는다(display 무선언 원칙).
   ══════════════════════════════════════════════════════════════════════ */


/* ══ 0. F안 토큰 — design-system.css 원문 값 그대로 ══════════════════
   apak-new.css 가 먼저 깔리면 겹치지만 값이 같아 부작용이 없다.
   이 파일만 걸어도 색이 무너지지 않게 여기서도 선언한다. */
:root{
  /* 「세척 전」 흙빛 */
  --e-900:#15130E; --e-800:#221E17; --e-700:#332E25; --e-600:#443D31;
  --e-300:#B6A98C; --e-200:#BCA986; --e-100:#EDE8DC;
  /* 「세척 후」 맑은 면 */
  --a-050:#F0EEE9; --a-100:#E7ECEB; --a-200:#D6E1E2; --a-300:#C3D3D5;
  --a-400:#7FA9B0; --a-500:#6B99A1; --a-550:#5E8E97;
  --a-700:#0F5967; --a-800:#14464F; --a-900:#0B2429; --a-ink:#04222A;
  --a-border:#6E7C7E; --a-line:#C7D0D0;
  /* 중립 크롬 */
  --n-900:#0F1A1D; --n-800:#1F2A2D; --n-700:#2A3639;
  --n-300:#9FB6BA; --n-200:#D6DEDE; --n-100:#F0EEE9;
  /* 신호색 4종 (대비 6.46~7.22) */
  --sig-info-fg:#0F5967; --sig-info-bg:#E2EEF0;
  --sig-ok-fg:#15564A;   --sig-ok-bg:#E2EFEA;
  --sig-warn-fg:#5F4E2E; --sig-warn-bg:#F2ECDC;
  --sig-err-fg:#8E3320;  --sig-err-bg:#F6E4DE;
  /* 글꼴 */
  --font-heading:"Gothic A1","Noto Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;
  --font-body:"Noto Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;
  /* 뼈대 */
  --gut:clamp(20px,3.34vw,48px);
  --sh-1:0 2px 10px rgba(15,26,29,.16);
  --sh-2:0 10px 34px rgba(15,26,29,.34);
  --sh-3:0 28px 70px -18px rgba(15,26,29,.55);
  --d-press:110ms; --d-hover:180ms;
  --ease-out:cubic-bezier(.23,1,.32,1);

  /* ★읽기 폭 — 한 줄 34글자 안팎.
     한글은 글자 하나가 글자크기와 같은 폭이므로 34em = 34글자다.
     (CSS 의 ch 는 숫자 0 의 폭이라 한글 계산에 쓰면 절반으로 좁아진다) */
  --measure-ko:34em;

  /* 기존 사이트 토큰 갈아끼우기 — 이 열두 줄이 common/order/products.css 전체에 퍼진다 */
  --color-primary:#0B2429;
  --color-primary-dark:#04222A;
  --color-primary-light:#D6E1E2;
  --color-secondary:#0F5967;
  --color-accent:#6B99A1;
  --color-background:#E7ECEB;
  --color-surface:#F0EEE9;
  --color-text:#14464F;
  --color-text-light:#0F5967;
  --color-border:#C7D0D0;
  --color-danger:#8E3320;
  --shadow-soft:var(--sh-1);
  --border-radius-md:0px;
  --border-radius-lg:0px;
}


/* ══ 1. 쪽 바탕·글자 — 폼도 안내도 같은 종이 위에 있게 ════════════ */
body{
  background-color:var(--a-100);
  color:var(--a-800);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--a-700);}
a:hover{color:var(--a-900);}
/* 초점 테두리 — 키보드로 넘길 때 「지금 여기」가 보이게 (전 사이트 공통) */
:focus-visible{outline:3px solid var(--a-700);outline-offset:3px;}


/* ══════════════════════════════════════════════════════════════════
   ② 폼 3쪽 — order.html · quote-cleaner.html · event-apply.html
   ══════════════════════════════════════════════════════════════════ */

/* ── 2-1. 이름표(라벨)는 항상 칸 위에, 굵고 작게 ──────────────────
   자리를 옮기는 것이 아니라 「칸과 한 덩어리」로 보이게 간격을 좁힌다. */
.view-container label:not(.upload-btn),
.form-group > label:not(.upload-btn),
.qna-form-group label{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:700;
  color:var(--a-700);
  letter-spacing:.005em;
  margin-top:24px;
  margin-bottom:8px;
}
/* 별표(*)는 이미 CSS 에 있던 것 — 색만 F안 오류색으로 */
.required::after,
.required-mark{color:var(--sig-err-fg);font-weight:700;}


/* ── 2-2. 입력칸 — 높이 56px · 각진 모서리 · 흰 면 ────────────────
   ★display 는 건드리지 않는다. 높이·색·테두리만 바꾼다. */
.view-container input[type="text"],
.view-container input[type="email"],
.view-container input[type="tel"],
.view-container input[type="password"],
.view-container input[type="number"],
.view-container input[type="date"],
.view-container select,
.view-container textarea,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea,
.qna-form-group input,
.qna-form-group textarea{
  min-height:56px;
  padding:0 16px;
  background-color:#FFFFFF;
  color:var(--a-900);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  border:1px solid var(--a-border);
  border-radius:0;
  box-shadow:none;
  transition:border-color var(--d-hover) var(--ease-out),
             background-color var(--d-hover) var(--ease-out);
}
.view-container textarea,
.form-group textarea,
.qna-form-group textarea{
  min-height:140px;
  padding:16px;
  line-height:1.72;
  resize:vertical;
}
.view-container input::placeholder,
.view-container textarea::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder{color:#4A5A5E;}

/* 손을 올렸을 때 / 눌렀을 때 */
.view-container input:hover,
.view-container select:hover,
.view-container textarea:hover,
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover{border-color:var(--a-700);}

.view-container input:focus,
.view-container select:focus,
.view-container textarea:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.qna-form-group input:focus,
.qna-form-group textarea:focus{
  border-color:var(--a-700);
  outline:3px solid var(--a-700);
  outline-offset:2px;
  box-shadow:none;
}

/* 읽기전용(우편번호·주소 등) — 「지금은 못 고치는 칸」임이 보이게 */
.view-container input[readonly],
.view-container input.autofilled{
  background-color:var(--a-200);
  color:var(--a-900);
  border-color:var(--a-line);
}
/* 날짜칸은 readonly 지만 달력으로 고르는 칸이다 — 눌리는 칸처럼 보이게 둔다 */
#od_desiredDate{background-color:#FFFFFF;border-color:var(--a-border);cursor:pointer;}


/* ── 2-3. 잘못 적었을 때 — 빨간 테두리 + 아래 붉은 글 ─────────────
   ★.error-message 의 display 는 절대 손대지 않는다(JS 가 켠다). */
.error-message,
#form-error{
  color:var(--sig-err-fg);
  font-size:15px;
  font-weight:700;
  line-height:1.6;
  margin-top:8px;
  letter-spacing:.005em;
}
/* [디자인규격확인] 견적 폼(quote-cleaner.html)은 쪽 안 <style> 26행이
   `.error-message{color:#dc3545 !important}` 로 못박아 위 색을 이긴다.
   그 빨강은 F안 종이색 위에서 3.68:1 — 기준 4.5 에 못 미친다(실측).
   글귀·자리는 그대로, 색만 F안 오류색(6.46:1)으로 올린다.
   ★색만 못박는다. display 는 여기서도 손대지 않는다(JS 가 켠다).
   (2026-09-09 · 명령767 수리2) */
.error-message,
#form-error{color:var(--sig-err-fg) !important;}
input.invalid,
select.invalid,
textarea.invalid,
.file-upload-controls.invalid .upload-btn,
.model-checklist.invalid{
  border-color:var(--sig-err-fg) !important;
  border-width:2px !important;
  background-color:var(--sig-err-bg);
  border-radius:0;
}
.form-group.has-file-error #file-preview-container{
  border-color:var(--sig-err-fg);
  background-color:var(--sig-err-bg);
}


/* ── 2-4. 고르는 칸(체크·라디오) — 라벨 전체가 44px 터치면 ───────── */
.radio-group label,
.checkbox-grid label,
.model-checklist label,
.no-file-checkbox,
.consent-section label{
  min-height:44px;
  border-radius:0;
  border:1px solid var(--a-line);
  background-color:var(--a-050);
  color:var(--a-900);
  font-size:16px;
  font-weight:500;
}
.radio-group,
.checkbox-grid{
  background-color:var(--a-100);
  border:1px solid var(--a-line);
  border-radius:0;
  gap:12px;
}
.radio-group label:hover,
.checkbox-grid label:hover{
  border-color:var(--a-500);
  background-color:#FFFFFF;
  transform:none;             /* 위로 튀는 움직임은 끈다 — 눌러야 할 칸은 안 움직인다 */
}
input[type="checkbox"],
input[type="radio"]{
  accent-color:var(--a-700);
  min-width:22px;
  min-height:22px;
}
.consent-section{
  background-color:var(--sig-info-bg) !important;
  border:1px solid var(--a-line) !important;
  border-left:4px solid var(--a-700) !important;
  border-radius:0 !important;
  gap:14px !important;
  padding:16px !important;
}
.consent-section label{border:none;background:transparent;padding:0;min-height:0;}
.consent-section .note{margin-top:6px;}


/* ── 2-5. 단추 — 56px · 각진 모서리 · F안 3종 ────────────────────
   ①먹색(주) ②시안(강조) ③테두리(보조) */
.nav-button,
.start-button,
.select-button,
.submit-btn,
.submit-button,
.modal-button,
.payment-button,
.upload-btn,
#lookupSubmitButton,
#apply-button,
.qna-upload-btn,
.qna-submit-btn{
  border-radius:0;
  font-family:var(--font-heading);
  font-weight:800;
  letter-spacing:-.01em;
  transition:background-color var(--d-hover) var(--ease-out),
             color var(--d-hover) var(--ease-out),
             border-color var(--d-hover) var(--ease-out),
             transform var(--d-press) var(--ease-out),
             box-shadow var(--d-hover) var(--ease-out);
}
/* 다음으로 가는 단추 = 시안 면 (F안 강조 버튼) */
.nav-button.next,
.start-button,
.select-button,
.nav-button.order-submit-button,
#lookupSubmitButton,
.submit-btn,
.submit-button,
#apply-button,
.modal-button.primary,
.qna-submit-btn{
  min-height:56px;
  padding:0 28px;
  background-color:var(--a-500);
  color:var(--a-ink);
  border:2px solid var(--a-500);
  font-size:18px;
  box-shadow:var(--sh-2);
}
.nav-button.next:hover:not(:disabled),
.start-button:hover:not(:disabled),
.select-button:hover:not(:disabled),
.nav-button.order-submit-button:hover:not(:disabled),
#lookupSubmitButton:hover:not(:disabled),
.submit-btn:hover:not(:disabled),
.submit-button:hover:not(:disabled),
#apply-button:hover,
.modal-button.primary:hover,
.qna-submit-btn:hover{
  background-color:var(--a-400);
  border-color:var(--a-400);
  color:var(--a-ink);
  transform:translateY(-2px);
  box-shadow:var(--sh-3);
}
.nav-button.next:active,
.start-button:active,
.select-button:active,
.submit-btn:active,
.submit-button:active{
  background-color:var(--a-550);
  border-color:var(--a-550);
  transform:translateY(0);
  box-shadow:var(--sh-1);
}
/* 뒤로 가는 단추 = 테두리만 */
.nav-button.prev,
.modal-button.secondary,
.qna-upload-btn,
.upload-btn,
.form-group .upload-btn,
.file-upload-controls .upload-btn{
  min-height:52px;
  padding:0 22px;
  background-color:transparent;
  color:var(--a-900);
  border:2px solid var(--a-900);
  font-size:16px;
  box-shadow:none;
}
.nav-button.prev:hover:not(:disabled),
.modal-button.secondary:hover,
.qna-upload-btn:hover,
.upload-btn:hover{
  background-color:var(--a-900);
  color:var(--n-100);
  border-color:var(--a-900);
  transform:none;
}
.upload-btn i{color:inherit;}
.upload-btn:focus-visible{outline:3px solid var(--a-700);outline-offset:2px;}
/* 못 누르는 단추 */
.nav-button:disabled,
#lookupSubmitButton:disabled,
.submit-btn:disabled,
.submit-button:disabled{
  background-color:var(--a-300) !important;
  border-color:var(--a-300) !important;
  color:#4E5A59 !important;
  box-shadow:none !important;
  transform:none !important;
}
/* 결제 단추 — 이 쪽에서 가장 중요한 단추라 가장 진하게(먹색) */
.payment-button{
  height:64px;
  border-radius:0;
  font-family:var(--font-heading);
  font-size:18px;
  font-weight:800;
}
.payment-button.credit-card{
  background-color:var(--n-900);
  color:var(--n-100);
  box-shadow:var(--sh-2);
}
.payment-button.credit-card:hover{background-color:#16262A;box-shadow:var(--sh-3);}
.payment-buttons-container{gap:14px;}
.navigation-buttons{
  gap:14px;
  margin-top:44px;
  padding-top:28px;
  border-top:1px solid var(--a-line);
}
.modal-actions{gap:14px;}


/* ── 2-6. 주문 단계 표시(스텝퍼) — 알약 → 각진 칸 ─────────────────
   지금 어디인지가 한눈에 보이게: 지난 단계는 시안 밑선, 지금은 먹색 면. */
.order-stepper{
  gap:0;
  margin-bottom:32px;
  border-bottom:2px solid var(--a-line);
}
.order-stepper .step-chip{
  min-height:44px;
  padding:10px 18px;
  border:0;
  border-bottom:3px solid transparent;
  border-radius:0;
  background-color:transparent;
  color:#4A5A5E;
  font-family:var(--font-heading);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.5;
}
.order-stepper .step-chip.is-done{
  background-color:transparent;
  border-bottom-color:var(--a-500);
  color:var(--a-700);
}
.order-stepper .step-chip.is-current{
  background-color:var(--n-900);
  border-bottom-color:var(--a-500);
  color:var(--n-100);
  font-weight:800;
}


/* ── 2-7. 주문 쪽 큰 상자(view-container) · 견적 카드 ─────────────
   ★display 무선언. 배경·테두리·모서리·여백만. */
.view-container,
.quote-card,
.quote-form-section{
  background-color:var(--a-050);
  border:1px solid var(--a-line);
  border-top:3px solid var(--n-900);
  border-radius:0;
  box-shadow:var(--sh-1);
  padding:44px 48px;
}
/* [디자인규격확인] 홈페이지는 ERP 6단 규격 밖이다(R-180). 값은 F안 --fs-t1 40px */
.page-title,
.quote-card > h1,
.quote-card .page-header h1,
.quote-form-section > h1{
  font-family:var(--font-heading);
  font-size:40px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.2;
  color:var(--a-900);
  margin-bottom:12px;
}
/* [디자인규격확인] 견적 카드 안의 머리띠는 카드 바탕(밝은 색)을 그대로 쓴다.
   (2026-09-09 · 명령767 수리2 · 실측으로 잡은 겹침)
   [현상] 「세척기 견적 문의」 제목이 글자 대비 1.10:1 — 눈으로는 안 보였다.
   [원인] 목록 6쪽용 옷(옷_목록.css)의 `.page-header{background-color:var(--n-900)}`
          는 쪽을 가리지 않는 선택자라, 검사기가 옷 네 벌을 한꺼번에 얹으면
          견적 폼의 카드 안 머리띠까지 먹색이 된다. 제목 글자는 내 파일이 어두운
          색을 주므로 「먹색 위 먹색」이 됐다.
   [고치는 법] 남의 파일은 건드리지 않는다. 카드 안쪽 머리띠만 여기서 되돌린다.
          `.quote-card .page-header` 는 (0,2,0) 이라 (0,1,0) 인 저쪽을 이긴다.
   ※ 이 선택자에 걸리는 것은 quote-cleaner.html 의 머리띠 하나뿐(실측).
     공지 상세의 머리띠는 `main > .page-header` 쪽에서 따로 밝게 잡아 둔다. */
.quote-card .page-header,
.quote-form-section .page-header{
  background-color:transparent;
  border-bottom:1px solid var(--a-line);
  padding:0 0 16px;
  text-align:left;
}
.quote-card .page-header h1{
  padding:0;
  border-left:0;
}
.splash-view-content .tagline{
  font-size:18px;
  font-weight:500;
  line-height:1.6;
  color:var(--a-700);
  max-width:var(--measure-ko);
  margin-bottom:36px;
}
#resumeOrderPrompt{
  background-color:var(--sig-info-bg);
  border:1px solid var(--a-line);
  border-left:4px solid var(--a-700);
  border-radius:0;
  padding:20px;
}
.product-section,
.form-section{
  background-color:#FFFFFF;
  border:1px solid var(--a-line);
  border-radius:0;
  padding:24px;
  margin-bottom:20px;
}
.note,
.form-notice,
.file-empty-hint{
  font-size:15px;
  line-height:1.6;
  color:#4A5A5E;
}
.order-context-summary,
.summary-section{
  background-color:var(--a-100);
  border:1px solid var(--a-line);
  border-left:4px solid var(--a-700);
  border-radius:0;
  padding:20px;
}
.summary-section h4,
#os_summary_text_area h4{
  font-family:var(--font-heading);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--a-900) !important;
}

/* 제품 고르는 칸 2장 */
.selection-section{gap:28px;margin-top:36px;}
.selection-item{
  background-color:var(--a-050);
  border:1px solid var(--a-line);
  border-top:3px solid var(--a-500);
  border-radius:0;
  box-shadow:var(--sh-1);
}
.selection-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-2);
  border-color:var(--a-500);
}
.selection-item h3{
  font-family:var(--font-heading);
  font-size:28px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.3;
  color:var(--a-900);
  margin:0 0 12px;
}
.selection-item .product-description{
  font-size:16px;
  line-height:1.72;
  color:var(--a-800);
  max-width:var(--measure-ko);
}
.product-video,
.selection-item img{background-color:var(--n-900);}
.product-detail-image{border-radius:0;}

/* 생산 현장 사진 상자(주문 첫 화면) */
.make-block{
  background-color:var(--a-100) !important;
  border:1px solid var(--a-line);
  border-radius:0 !important;
}
.make-photos img{border-radius:0 !important;}
.make-photos figcaption{color:#4A5A5E !important;font-size:14px !important;}


/* ── 2-8. 금액 표 — 숫자는 등폭, 머리는 먹색 ─────────────────────── */
.summary-table{margin-top:28px;}
.summary-table caption{
  text-align:left;
  padding:12px 0;
  font-family:var(--font-heading);
  font-size:15px;
  font-weight:700;
  color:var(--a-700);
}
.summary-table th,
.summary-table td{
  border:0;
  border-bottom:1px solid var(--a-line);
  padding:16px;
  font-size:16px;
  color:var(--a-800);
  font-variant-numeric:tabular-nums;
}
.summary-table thead th{
  background-color:var(--n-700);
  color:var(--n-100);
  font-weight:700;
}
.summary-table tbody th{
  background-color:var(--a-200);
  color:var(--a-900);
  font-weight:700;
}
.summary-table tbody tr:last-child th,
.summary-table tbody tr:last-child td{
  font-family:var(--font-heading);
  font-size:20px;
  font-weight:800;
  background-color:var(--a-900);
  color:var(--n-100);
  border-bottom:0;
}
#os_sum_total{color:var(--n-100);}
.status-badge{border-radius:0;font-size:14px;padding:6px 12px;}
.status-paid{background-color:var(--sig-ok-fg);}
.status-shipping{background-color:var(--a-700);}
.status-pending{background-color:var(--sig-warn-fg);}
.status-delivered{background-color:var(--n-700);}


/* ── 2-9. 창(모달) — 각진 흰 상자 + 위쪽 시안 선 ──────────────────
   ★.modal-overlay 의 display 는 손대지 않는다(JS 가 flex 로 켠다). */
.modal-overlay{background-color:rgba(11,36,41,.62);}
.modal-content{
  background-color:var(--a-050);
  border-radius:0;
  border-top:3px solid var(--a-500);
  box-shadow:var(--sh-3);
  padding:32px;
}
.modal-content h3{
  font-family:var(--font-heading);
  font-size:24px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--a-900);
}
.modal-content p{color:var(--a-800);line-height:1.72;}
#password-modal .modal-content h3{color:var(--sig-err-fg);}
#passwordInput{letter-spacing:4px;text-align:center;}
/* 알림 띠(견적 쪽) */
.notification{border-radius:0;box-shadow:var(--sh-2);font-weight:700;}
.notification.success{background-color:var(--a-700);}
.notification.error{background-color:var(--sig-err-fg);}


/* ── 2-10. 견적 쪽 사진 첨부·체크리스트 ─────────────────────────── */
#file-preview-container{
  border:2px dashed var(--a-border);
  border-radius:0;
  background-color:var(--a-100);
}
.preview-item{
  border-radius:0;
  border:1px solid var(--a-line);
  box-shadow:none;
}
.preview-item .file-info{background:rgba(11,36,41,.78);font-size:14px;}
.preview-item .delete-button{
  border-radius:0;
  width:32px;height:32px;
  background-color:var(--a-900);
}
.preview-item .delete-button:hover{background-color:var(--sig-err-fg);}
.preview-item .file-icon{color:var(--a-700);}
.file-empty-hint i{color:var(--a-400);}
.model-checklist{
  background-color:var(--sig-warn-bg);
  border:1px solid var(--a-line);
  border-left:4px solid var(--sig-warn-fg);
  border-radius:0;
  padding:24px;
}
.checklist-title{
  font-family:var(--font-heading);
  font-size:19px;
  font-weight:800;
  letter-spacing:-.015em;
  color:var(--a-900);
}
.checklist-warning{
  background-color:var(--sig-err-bg);
  color:var(--sig-err-fg);
  border-radius:0;
  font-size:15px;
  font-weight:700;
  padding:12px;
}
.environment-none-option{border-left-color:var(--a-line);}
.form-section-title{
  border-radius:0;
  background-color:var(--n-900);
  color:var(--n-100);
  font-family:var(--font-heading);
  font-weight:800;
  letter-spacing:-.01em;
}
#camera-view{border-radius:0;}
.file-upload-wrapper{border:2px dashed var(--a-border);border-radius:0;}
.file-upload-wrapper:hover{background-color:var(--a-100);}
.file-upload-section{
  border:2px dashed var(--a-border);
  border-radius:0;
  background-color:var(--a-100);
}
.file-upload-section label{
  background-color:var(--a-900);
  color:var(--n-100);
  border-color:var(--a-900);
  border-radius:0;
  min-height:52px;
  font-weight:700;
}
.file-upload-section label:hover{background-color:var(--a-700);}

/* 지점 검색 드롭다운(Select2) — 입력칸과 같은 옷 */
.select2-container .select2-selection--single{
  min-height:56px;
  border:1px solid var(--a-border);
  border-radius:0;
  background-color:#FFFFFF;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--a-900);
  line-height:44px;
  font-size:17px;
}
.select2-container--default.select2-container--focus .select2-selection--single{
  border-color:var(--a-700) !important;
  box-shadow:0 0 0 3px rgba(15,89,103,.28) !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
  background-color:var(--a-200);
  color:var(--a-900);
}
.select2-results__group{color:var(--a-900);}
.select2-search--dropdown .select2-search__field{
  border:1px solid var(--a-border);
  border-radius:0;
  min-height:44px;
}


/* ── 2-11. 응모 폼(event-apply) 전용 ───────────────────────────── */
.form-header{margin-bottom:32px;}
.form-header h1{
  font-family:var(--font-heading);
  font-size:32px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.2;
  color:var(--a-900);
}
.form-group{margin-bottom:24px;}
.error-container a{
  min-height:56px;
  padding:16px 28px;
  background-color:var(--a-500);
  color:var(--a-ink);
  border-radius:0;
  font-family:var(--font-heading);
  font-weight:800;
}
.error-container a:hover{background-color:var(--a-400);color:var(--a-ink);}


/* ══════════════════════════════════════════════════════════════════
   ③ 안내 9쪽 — 읽는 쪽. 한 줄 34글자·줄간격 1.8·제목 단계 3층
   ══════════════════════════════════════════════════════════════════ */

/* ── 3-1. 문서 카드 (약관·개인정보·환불·이벤트·응모) ─────────────
   흰 상자 + 둥근 모서리 + 파란 제목 → 크림 면 + 각진 모서리 + 먹색 제목 */
main > .container,
.content-container .container{
  max-width:820px;
  background-color:var(--a-050);
  border:1px solid var(--a-line);
  border-top:3px solid var(--n-900);
  border-radius:0;
  box-shadow:var(--sh-1);
  padding:44px 48px;
  margin:40px auto;
}

/* 제목 3층 — 큰 제목 / 절 제목 / 소제목 */
main > .container > h1,
.content-container .container > h1{
  font-family:var(--font-heading);
  font-size:40px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.2;
  color:var(--a-900);
  text-align:left;
  border-bottom:0;
  padding:0 0 0 20px;
  border-left:5px solid var(--a-500);
  margin:0 0 28px;
}
main > .container h2,
.content-container .container h2{
  font-family:var(--font-heading);
  font-size:26px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.3;
  color:var(--a-900);
  border-bottom:1px solid var(--a-line);
  padding-bottom:12px;
  margin:48px 0 18px;
}
main > .container h3,
.content-container .container h3{
  font-family:var(--font-heading);
  font-size:20px;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.4;
  color:var(--a-700);
  margin:32px 0 12px;
}

/* 본문 — 한 줄 34글자, 줄간격 1.8 */
main > .container p,
main > .container li,
.content-container .container p,
.content-container .container li{
  font-size:17px;
  line-height:1.8;
  color:var(--a-800);
  max-width:var(--measure-ko);
  text-wrap:pretty;
}
main > .container p{margin:0 0 18px;}
main > .container ul,
.content-container .container ul{padding-left:22px;margin:0 0 20px;}
main > .container li{margin-bottom:10px;}
/* [디자인규격확인] HTML 이 style= 로 자기 글자색을 정해 둔 상자 안에서는
   내 글자색을 덮어씌우지 않는다. (2026-09-09 · 명령767 수리2 · 실측)
   [현상] 이용안내의 검은 상자(guide.html 294행 `background:#17140f;color:#ede8db`)
          안 글 5줄이 대비 3.92:1 → 1.77:1 로 떨어졌다. 어두운 바탕에 어두운 글씨다.
   [원인] 위 `main > .container p{color:var(--a-800)}` 가 상자가 물려준 밝은 글자색을
          이겨 버렸다. 상자 바탕은 HTML 인라인이라 내가 못 바꾼다.
   [고치는 법] 상자가 스스로 색을 정했으면 그 색을 물려받게 한다(color:inherit).
          글귀·바탕은 손대지 않는다(R-183). */
main > .container [style*="color:#"] p,
main > .container [style*="color:#"] li,
.content-container .container [style*="color:#"] p,
.content-container .container [style*="color:#"] li,
.guide-section [style*="color:#"] p,
.guide-section [style*="color:#"] li,
main > .container [style*="color: #"] p,
main > .container [style*="color: #"] li,
.content-container .container [style*="color: #"] p,
.content-container .container [style*="color: #"] li,
.guide-section [style*="color: #"] p,
.guide-section [style*="color: #"] li{color:inherit;}

/* [디자인규격확인] HTML 인라인의 회색 안내 글씨 #6c757d 는 F안 종이색 위에서
   4.04:1 — 기준 4.5 에 못 미친다(실측 · guide.html 285행 등).
   글귀·자리는 그대로, 색만 F안 본문색으로 올린다. 인라인 style 이라 !important 가 필요하다.
   (2026-09-09 · 명령767 수리2) */
[style*="color:#6c757d"],
[style*="color: #6c757d"]{color:var(--a-700) !important;}

/* 강조 — 빨강(#d9534f, 대비 4.0)은 눈이 아프다. F안 오류색(6.46)으로 */
main > .container strong{color:var(--sig-err-fg);font-weight:700;}
/* 약관·환불 쪽은 인라인 <style> 에 strong{color:#d9534f} 가 「전역」으로 걸려 있어
   바닥글의 「개인정보처리방침」까지 빨갛게 나온다(옷 입히기 전부터 그랬다).
   글자는 그대로 두고 색만 바닥글 색을 따르게 돌려놓는다. */
.footer-links a strong{color:inherit;}

/* 상자 3종 — 왼쪽 굵은 선 하나로 「여기 주의」를 말한다 */
.info-box,
.contact-info,
.warning-box{
  border-radius:0 !important;
  padding:20px !important;
  max-width:none;
}
.info-box{
  background-color:var(--sig-info-bg) !important;
  border:1px solid var(--a-line) !important;
  border-left:4px solid var(--sig-info-fg) !important;
}
.contact-info{
  background-color:var(--a-100) !important;
  border:1px solid var(--a-line) !important;
  border-left:4px solid var(--a-700) !important;
  text-align:left !important;
  margin-top:36px !important;
}
.contact-info h3{margin-top:0;}
.warning-box{
  background-color:var(--sig-warn-bg) !important;
  border:1px solid var(--a-line) !important;
  border-left:4px solid var(--sig-warn-fg) !important;
}
.warning-box strong{color:var(--sig-warn-fg) !important;}


/* ── 3-2. 이용가이드(guide.html) ────────────────────────────────── */
.guide-header{
  background:linear-gradient(0deg,rgba(15,26,29,.90) 8%,rgba(15,26,29,.58) 55%,rgba(15,26,29,.26) 100%),
             url('/images/solutions/sol-block.jpg') no-repeat center center;
  background-size:cover;
  border-bottom:2px solid var(--a-500);
  padding:88px 24px;
}
.guide-header h1{
  font-family:var(--font-heading);
  font-size:clamp(30px,4vw,54px);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1.14;
  color:var(--e-100);
  text-shadow:0 2px 18px rgba(15,26,29,.72);
}
.guide-header p{
  font-size:18px;
  font-weight:500;
  line-height:1.6;
  color:var(--n-200);
  opacity:1;
  max-width:46ch;
  text-shadow:0 2px 12px rgba(15,26,29,.7);
}
.guide-content{background-color:var(--a-100);padding:64px 0;}
.guide-article{max-width:880px;}
.guide-section{
  background-color:var(--a-050);
  border:1px solid var(--a-line);
  border-top:3px solid var(--n-900);
  border-radius:0;
  box-shadow:var(--sh-1);
  padding:36px 44px;
  margin-bottom:28px;
}
.guide-section h2{
  font-family:var(--font-heading);
  font-size:30px;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.25;
  color:var(--a-900);
  border-bottom:1px solid var(--a-line);
  padding-bottom:16px;
  margin-bottom:26px;
}
.guide-section h3{
  font-family:var(--font-heading);
  font-size:21px;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.4;
  color:var(--a-700);
  margin-top:36px;
  margin-bottom:12px;
}
.guide-section p,
.guide-section li{
  font-size:17px;
  line-height:1.8;
  color:var(--a-800);
  max-width:var(--measure-ko);
  text-wrap:pretty;
}
.guide-section li{margin-bottom:12px;padding-left:18px;}
.guide-section li::before{color:var(--a-500);}
.guide-section strong{color:var(--a-900);font-weight:700;}
/* 목차·이어가기 상자 — HTML 안의 style= 을 이겨야 해서 여기만 !important */
.guide-toc{
  background:var(--a-100) !important;
  border:1px solid var(--a-line) !important;
  border-left:4px solid var(--a-700) !important;
  border-radius:0 !important;
  padding:20px 24px !important;
}
.guide-toc > div{color:var(--a-900) !important;font-family:var(--font-heading);}
.guide-toc a{color:var(--a-700) !important;text-underline-offset:3px;}
.guide-toc a:hover{color:var(--a-900) !important;text-decoration:underline;}
.guide-toc li{line-height:2 !important;}
.gconv-bridge{
  background:var(--sig-info-bg) !important;
  border-left:5px solid var(--a-700) !important;
  border-radius:0 !important;
  padding:20px 24px !important;
}
.gconv-bridge > div{color:var(--a-900) !important;font-family:var(--font-heading);}
.gconv-bridge p{color:var(--a-800) !important;max-width:var(--measure-ko);}
.gconv-bridge a{color:var(--a-700) !important;}
.faq-item{border-bottom:1px solid var(--a-line);padding:24px 0;}
.faq-item strong{
  font-family:var(--font-heading);
  font-size:19px;
  font-weight:700;
  color:var(--a-900);
  margin-bottom:12px;
}


/* ── 3-3. 공지 상세 · 이벤트 상세 ──────────────────────────────── */
/* main 의 바로 밑에 있는 머리 띠만 — 공지상세가 여기 해당한다.
   견적 쪽 .page-header 는 카드 「안」에 있어서 여기 걸리면 안쪽으로 밀린다. */
main > .page-header{
  background-color:var(--a-050) !important;
  border-bottom:1px solid var(--a-line) !important;
  padding:56px 24px !important;
}
main > .page-header .page-title,
#event-title,
#notice-title{
  font-family:var(--font-heading) !important;
  font-size:40px !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
  line-height:1.2 !important;
  color:var(--a-900) !important;
}
#event-title{border-bottom:2px solid var(--a-line) !important;padding-bottom:20px !important;}
.post-meta{color:#4A5A5E !important;font-size:15px !important;letter-spacing:.005em;}
.post-content,
#event-details{
  font-size:17px !important;
  line-height:1.8 !important;
  color:var(--a-800) !important;
}
.post-content p,
#event-details p{max-width:var(--measure-ko);text-wrap:pretty;}
.post-content h1,
.post-content h2,
.post-content h3{
  font-family:var(--font-heading) !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  color:var(--a-900) !important;
}
.post-content h2{font-size:26px !important;border-bottom:1px solid var(--a-line);padding-bottom:12px;}
.post-content h3{font-size:20px !important;color:var(--a-700) !important;}
.post-content img,
.post-content video,
#event-details img,
#media-gallery img,
#media-gallery video{
  border-radius:0 !important;
  box-shadow:none !important;
  border:1px solid var(--a-line);
}
.post-content table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  background-color:#FFFFFF;
  border-top:2px solid var(--n-900);
  margin:24px 0;
}
.post-content th{
  background-color:var(--n-700);
  color:var(--n-100);
  text-align:left;
  font-weight:700;
  padding:14px 16px;
}
.post-content td{
  padding:14px 16px;
  color:var(--a-800);
  border-bottom:1px solid var(--a-line);
}
.post-content .content-button{
  min-height:56px;
  padding:16px 26px;
  background-color:var(--a-500);
  color:var(--a-ink);
  border-radius:0;
  font-family:var(--font-heading);
  font-weight:800;
}
.post-content .content-button:hover{background-color:var(--a-400);color:var(--a-ink);}
.back-to-list{
  min-height:52px;
  padding:15px 26px;
  border:2px solid var(--a-900);
  border-radius:0;
  color:var(--a-900);
  font-family:var(--font-heading);
  font-weight:700;
}
.back-to-list:hover{background-color:var(--a-900);color:var(--n-100);border-color:var(--a-900);}
.apply-button-wrapper{border-top:1px solid var(--a-line);padding-top:32px;margin-top:44px;}
.loading,
.error{color:#4A5A5E;font-size:17px;}
#media-gallery{gap:16px;}


/* ── 3-4. 결제 결과 2쪽 (order-success · order-fail) ────────────── */
.result-wrap{max-width:520px;margin:64px auto;}
.result-banner{
  border-radius:0;
  padding:40px 24px 32px;
  border-top:3px solid transparent;
}
.result-banner.success{background-color:var(--sig-ok-bg);border-top-color:var(--sig-ok-fg);}
.result-banner.fail{background-color:var(--sig-err-bg);border-top-color:var(--sig-err-fg);}
.result-icon{border-radius:50%;background-color:#FFFFFF;width:60px;height:60px;}
.result-banner.success .result-icon svg{stroke:var(--sig-ok-fg);}
.result-banner.fail .result-icon svg{stroke:var(--sig-err-fg);}
.result-banner h1.page-title{
  font-family:var(--font-heading);
  font-size:28px;
  font-weight:800;
  letter-spacing:-.02em;
}
.result-banner.success h1.page-title{color:var(--sig-ok-fg);}
.result-banner.fail h1.page-title{color:var(--sig-err-fg);}
.result-body{
  background-color:var(--a-050);
  border:1px solid var(--a-line);
  border-top:0;
  border-radius:0;
  box-shadow:var(--sh-1);
  padding:32px 34px 36px;
}
.result-body > p{font-size:17px;line-height:1.8;color:var(--a-800);}
.result-detail{
  background-color:var(--a-100);
  border:1px solid var(--a-line);
  border-left:4px solid var(--a-700);
  border-radius:0;
  padding:16px 18px;
  font-size:16px;
}
.result-detail .label{color:var(--a-700);font-weight:700;}
/* 카카오 안내 상자 — 노랑은 카카오 브랜드색이라 그대로 둔다(모서리만 각지게).
   ★사장님 판단 필요: F안에 노랑이 없다. 바꾸면 카카오라는 신호가 약해진다. */
.result-kakao-promo{border-radius:0;padding:24px;}
.result-kakao-promo .nav-button{
  background-color:var(--n-900);
  border-color:var(--n-900);
  color:var(--n-100);
  min-height:56px;
}
.result-kakao-promo .nav-button:hover{background-color:#16262A;border-color:#16262A;color:var(--n-100);}
.result-actions{gap:14px;}
/* 이 두 쪽은 바닥글을 각자 인라인으로 갖고 있다(#343a40) — F안 먹색으로 맞춘다 */
.result-wrap ~ .footer,
body:has(.result-wrap) .footer{
  background-color:var(--n-900) !important;
  color:var(--n-300) !important;
  border-top:2px solid var(--a-500);
}
body:has(.result-wrap) .footer-info p{color:var(--n-200) !important;}
body:has(.result-wrap) .footer-info strong{color:var(--n-100) !important;}
body:has(.result-wrap) .footer-info a{color:var(--n-200) !important;}
body:has(.result-wrap) .footer-links{border-top-color:var(--n-700) !important;gap:18px !important;}
body:has(.result-wrap) .copyright{color:var(--n-300) !important;}


/* ── 3-5. 없는 쪽(404) ─────────────────────────────────────────── */
.nf-wrap{
  background:var(--a-100);
  color:var(--a-800);
  max-width:760px;
  padding:96px 20px 110px;
}
.nf-code{
  font-family:var(--font-heading);
  font-size:88px;
  font-weight:900;
  letter-spacing:-.05em;
  color:var(--a-900);
  margin-bottom:16px;
}
.nf-title{
  font-family:var(--font-heading);
  font-size:30px;
  font-weight:800;
  letter-spacing:-.025em;
  color:var(--a-900);
  margin-bottom:16px;
}
.nf-desc{
  font-size:17px;
  line-height:1.8;
  color:var(--a-800);
  max-width:var(--measure-ko);
  margin-left:auto;
  margin-right:auto;
}
.nf-links{gap:14px;}
.nf-links a{
  min-height:56px;
  padding:16px 24px;
  border:2px solid var(--a-900);
  border-radius:0;
  color:var(--a-900);
  font-family:var(--font-heading);
  font-size:16px;
  font-weight:700;
}
.nf-links a:hover{background:var(--a-900);color:var(--n-100);}
.nf-links a.primary{background:var(--a-500);border-color:var(--a-500);color:var(--a-ink);}
.nf-links a.primary:hover{background:var(--a-400);border-color:var(--a-400);color:var(--a-ink);}
.nf-contact{
  font-size:16px;
  line-height:1.9;
  color:var(--a-800);
  border-top:1px solid var(--a-line);
  padding-top:30px;
}
.nf-contact strong{color:var(--a-700);font-size:22px;font-family:var(--font-heading);font-weight:800;}


/* ══ 4. 작은 화면(모바일 390px) ═════════════════════════════════════
   상자 안쪽 여백을 줄여 글이 들어갈 자리를 넓힌다.
   ★display 는 여기서도 쓰지 않는다. */
@media (max-width:768px){
  body{font-size:16px;}
  .view-container,
  .quote-card,
  .quote-form-section,
  main > .container,
  .content-container .container,
  .guide-section{padding:26px 20px;}
  main > .container{margin:24px auto;}

  /* [디자인규격확인] 주문 첫 화면의 생산현장 사진 상자는 원래 상자 여백(50px)을
     상쇄하려고 좌우 -50px 로 튀어나가 있다. 내가 여백을 20px 로 줄였으니
     그 상쇄값도 -20px 로 맞춘다. 안 맞추면 화면이 5px 옆으로 밀린다(실측). */
  .make-block{margin-left:-20px;margin-right:-20px;}

  .page-title,
  main > .container > h1,
  .content-container .container > h1,
  /* [디자인규격확인] 홈페이지는 ERP 6단 규격 밖(R-180). F안 --fs-t1-mo 26px */
  main > .page-header .page-title,
  .quote-card .page-header h1,
  #event-title,
  #notice-title{font-size:26px !important;}
  .form-header h1{font-size:24px;}
  main > .container h2,
  .content-container .container h2,
  .guide-section h2,
  .post-content h2{font-size:22px !important;margin-top:32px;}
  main > .container h3,
  .content-container .container h3,
  .guide-section h3,
  .post-content h3{font-size:19px !important;}
  .guide-header{padding:56px 20px;}
  .guide-header h1{font-size:30px;}
  .guide-header p{font-size:17px;}
  .guide-content{padding:36px 0;}

  /* 본문 폭은 화면이 좁으면 화면을 따라간다 */
  main > .container p,
  main > .container li,
  .content-container .container p,
  .content-container .container li,
  .guide-section p,
  .guide-section li,
  .post-content p,
  #event-details p,
  .nf-desc,
  .selection-item .product-description,
  .splash-view-content .tagline{max-width:100%;font-size:16px;}

  /* 단계 표시는 좁은 화면에서 글자를 줄여 두 줄로 넘어가게 둔다 */
  .order-stepper .step-chip{padding:9px 12px;font-size:13px;}

  /* 단추는 좁아도 44px 밑으로 내려가지 않는다 */
  .nav-button,
  .start-button,
  .select-button,
  .submit-btn,
  .submit-button,
  .modal-button,
  .upload-btn{min-height:52px;font-size:16px;}
  .navigation-buttons{gap:10px;margin-top:32px;padding-top:22px;}

  /* [디자인규격확인] 이용안내 「지금 주문하시려면」 칸의 주문 단추 —
     좁은 화면에서는 한 줄을 다 쓰게 한다. (2026-09-09 · 명령767 수리2)
     이유(실측): 이 단추는 HTML 인라인 스타일로 inline-block + 위아래 여백 11px 이라
     글줄(28.8px)보다 키가 커서 아랫줄 자리까지 내려온다. 바로 뒤에 붙은 전화 링크가
     단추 옆에 두세 글자만 걸치고 다음 줄로 넘어가는 폭(390~600px 실측)에서는
     그 링크의 전체 상자 한가운데가 단추 위에 얹혀 「가려진 버튼」으로 잡혔다
     (옷 얹기 전 0 → 얹은 뒤 1 · guide.html 390px).
     단추가 한 줄을 다 쓰면 전화 링크가 통째로 아랫줄로 내려가 겹치지 않는다.
     ★display 는 건드리지 않는다 — 원래대로 inline-block 그대로 둔다(R-182·수칙8).
     ★좌우 여백이 22px 씩 있으므로 border-box 를 같이 줘야 가로로 안 밀린다.
     ★이 선택자에 걸리는 것은 사이트 전체에서 guide.html 의 이 단추 1개뿐(실측). */
  a[href="/order.html"][style*="inline-block"]{
    box-sizing:border-box;
    width:100%;
    text-align:center;
    margin-bottom:12px;
  }

  /* 금액 표 — 좁은 화면에서 여백을 줄여 가로 밀림을 막는다 */
  .summary-table th,
  .summary-table td{padding:12px 10px;font-size:15px;}
  .summary-table tbody tr:last-child th,
  .summary-table tbody tr:last-child td{font-size:17px;}

  .result-wrap{margin:32px auto;}
  .result-body{padding:24px 20px 28px;}
  .nf-wrap{padding:56px 16px 72px;}
  .nf-code{font-size:60px;}
  .nf-title{font-size:23px;}
  .nf-links a{width:100%;}
}


/* ══ 5. 움직임을 꺼 달라는 손님 ════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .nav-button,.start-button,.select-button,.submit-btn,.submit-button,
  .modal-button,.payment-button,.upload-btn,.selection-item{transition:none;}
  .nav-button:hover,.start-button:hover,.select-button:hover,
  .submit-btn:hover,.submit-button:hover,.selection-item:hover{transform:none;}
}


/* ─────────── 옷_마무리.css (여기부터) ─────────── */

/* ══════════════════════════════════════════════════════════════
   옷_마무리.css — 총책임자 직접 작성 (2026-09-09 · 명령767)

   [디자인규격확인] 홈페이지 작업이므로 글자 6단·모서리 규격(R-166·167)은 적용하지 않는다(R-180).

   사장님 지시: "1번 진행 2번은 빠르게 선택해라"
     1번 = SMART-15 큰 사진 1장 유지 → 그대로 둔다(손대지 않음)
     2번 = 흰 배경 제품 사진 처리 → 총책임자 결정:
           사진 배경을 따내지 않는다(309장 손보는 별개 작업이라 배포가 밀린다).
           대신 **흰 판을 일부러 깔아** 흰 배경이 의도된 「제품 컷」으로 읽히게 한다.
           CSS 한 덩이라 위험 0, 오늘 끝난다.

   ※ 이 파일은 다른 직원이 만지는 옷_목록/상세/폼안내.css 와 부딪히지 않게
      따로 두었다. 맨 마지막에 얹는다.
   ══════════════════════════════════════════════════════════════ */

/* ── 제품 사진을 흰 판 위에 앉힌다 ─────────────────────────────
   대상: 세척기 3기종·신발금형의 제품 사진(스튜디오 흰 배경 컷).
   흰 사진이 크림색 면 위에 뜬 것처럼 보이던 것을, 흰 판 + 여백 + 가는 테두리로
   「제품을 흰 배경에 놓고 찍은 컷」으로 읽히게 만든다. 사진 자체는 안 건드린다. */

.product-hero,
.product-image-wrap,
.product-main-image,
.detail-hero__media,
figure:has(> img[src*="cleaner_"]),
figure:has(> img[src*="/images/cleaner"]) {
  background: #ffffff;
  border: 1px solid var(--n-200, #d7dee0);
  padding: clamp(16px, 2.2vw, 32px);
  box-sizing: border-box;
}

/* 판 안의 사진은 여백을 먹고 가운데로 */
.product-hero > img,
.product-image-wrap > img,
.detail-hero__media > img,
figure:has(> img[src*="cleaner_"]) > img,
figure:has(> img[src*="/images/cleaner"]) > img {
  display: block;
  margin-inline: auto;
  background: #ffffff;
}

/* 목록 카드의 기계 사진도 같은 규칙 — 카드 안에서 흰 판이 이어지게 */
.cleaner-card figure,
.card:has(img[src*="cleaner_"]) figure,
.card:has(img[src*="cleaner_"]) .card__media {
  background: #ffffff;
  border-bottom: 1px solid var(--n-200, #d7dee0);
}

/* 흰 판 위에서는 사진 아래 설명이 붙어 보이지 않게 숨 쉴 자리 */
.product-hero + figcaption,
.product-image-wrap + p,
figure:has(> img[src*="cleaner_"]) figcaption {
  margin-top: 12px;
}
