/* TECH BRICK — 공용 스타일 (m5stack.com 톤: 흰 바탕·제품 그리드·미니멀 / 브랜드색 = 브릭 오렌지)
   구조는 keylink kl_guide.css 를 이어받되 팔레트·히어로·버튼을 새 브랜드로 교체 */
:root{
  --ink:#1A1A1A; --muted:#5B6068; --faint:#6B7280; --line:#E6E6E9;
  --bg:#fff; --soft:#F6F7F9; --soft2:#EFF1F4;
  --accent:#E4501E; --accent-d:#BF4117;  /* 글자용 — 연한 주황 배경에서도 4.53:1 (2026-09-14 사장님 "조금 밝게") */ --accent-soft:#FDEAE1;
  /* ☠2026-09-14 --accent-btn 을 쓰기만 하고 정의하지 않아 .btn.primary 가 배경도 글자색도 없는 흰 버튼이 됐다(상담 버튼 3개가 안 보였음).
     흰 글자 15px 에서 4.5:1 을 지키는 가장 밝은 주황. */
  --accent-btn:#D14819;
  --ok:#157A43; --warn:#8A5E13; --no:#C2453B;
  --dark:#17191D; --dark2:#22252B;
  --r:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Noto Sans KR','Noto Sans',Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;letter-spacing:0;word-break:keep-all;-webkit-font-smoothing:antialiased;}
.wrap{max-width:1060px;margin:0 auto;padding:0 28px;}
a{color:inherit;text-decoration:none;}
strong{font-weight:700;color:var(--ink);}

/* nav */
nav.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);box-shadow:0 11px 8px -10px rgba(51,51,51,.12);}
nav.top .inner{max-width:1060px;margin:0 auto;padding:15px 28px;display:flex;align-items:center;justify-content:space-between;}
/* 브랜드 로크업 — 간판식: 솔리드 TECH + 아웃라인 BRICK (키링크와 같은 민짜 4각, 8/28 사장님) */
nav.top .brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--muted);letter-spacing:.02em;}
nav.top .brand .l{display:inline-flex;align-items:center;gap:7px;font-size:19px;font-weight:900;letter-spacing:.06em;color:var(--ink);}
nav.top .brand .l b{background:var(--accent);color:#fff;font-weight:900;padding:3px 10px 4px 11px;line-height:1.4;}
@media(max-width:720px){nav.top .brand .l{font-size:17px;}nav.top .brand .l b{padding:2px 8px 3px 9px;}}
nav.top .links{display:flex;gap:18px;align-items:center;font-size:14px;font-weight:600;color:var(--muted);flex-wrap:wrap;justify-content:flex-end;}
nav.top .links a:hover,nav.top .links a.on{color:var(--ink);}
nav.top .links .cta{color:var(--accent-d);font-weight:700;}
/* 모바일 햄버거 */
nav.top .nav-toggle{display:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:0 0 auto;}
nav.top .nav-toggle span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s;}
nav.top.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
nav.top.nav-open .nav-toggle span:nth-child(2){opacity:0;}
nav.top.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
@media(max-width:720px){nav.top .inner{flex-wrap:wrap;gap:8px 0;padding:12px 18px;}
nav.top .nav-toggle{display:inline-flex;}
nav.top .links{display:none;gap:11px 14px;font-size:12.5px;flex-wrap:wrap;width:100%;justify-content:flex-start;padding-top:11px;margin-top:2px;border-top:1px solid var(--line);}
nav.top.nav-open .links{display:flex;}}

/* hero — ☠검정 밴드 금지(8/28 사장님 "검정 버리고 그냥 파랑으로") → M5Stack 블루
   배경 = 시리즈 배너(STACK/STICK/ATOM) 그 자체 (8/28 사장님 "여기에 배경이미지로, 추가가 아니라") */
/* ★8/28 사장님 "2톤 느낌 이건 아님" — 반쪽 합성 금지. 배너가 밴드 전체를 덮고(cover),
   글자는 원본 M5Stack 배너처럼 어두운 잉크. 왼쪽엔 밝은 화이트 그라데이션만 살짝. */
header.hero{padding:96px 0 76px;background:linear-gradient(95deg,rgba(245,248,251,.96) 0%,rgba(245,248,251,.82) 38%,rgba(245,248,251,.25) 62%,rgba(245,248,251,0) 80%),url("img/m5_series_banner.webp?v=3") right center/cover no-repeat #F1F4F8;}
/* 폰 — 배너를 지우지 않고 뒤에 깐다: 글자 있는 위쪽만 진한 덮개, 아래로 옅게 (8/28) */
@media(max-width:680px){header.hero{background:linear-gradient(rgba(245,248,251,.95) 0%,rgba(245,248,251,.9) 45%,rgba(245,248,251,.72) 100%),url("img/m5_series_banner.webp?v=3") right center/cover no-repeat #F1F4F8;}}
.hero .eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;color:#1F6FE5;text-transform:uppercase;margin-bottom:22px;}
.hero h1{font-size:48px;line-height:1.18;font-weight:900;letter-spacing:0;margin-bottom:22px;color:var(--ink);}
.hero h1 .g{color:#1F6FE5;}
.hero p.lead{font-size:18px;color:#3D434C;max-width:620px;line-height:1.7;}
.hero p.lead strong{color:var(--ink);}
.hero .cta-row{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap;}
.hero .grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;}
.hero .heroill{width:100%;margin-left:auto;height:auto;}
@media(max-width:820px){.hero .grid2{grid-template-columns:1fr;gap:26px;}.hero .heroill{max-width:400px;margin:4px auto 0;}}
@media(max-width:680px){header.hero{padding:52px 0 44px;}.hero h1{font-size:33px;}.hero p.lead{font-size:16.5px;}}

/* page hero (detail pages) — 배너 풀커버 + 어두운 잉크 (홈과 같은 문법)
   ★2026-09-02 banner_core·banner_stick 왼쪽 35%("Series …" 영문 글자) 크롭 — 제목 뒤로 글자가 비쳤다. 8/28 "배너 속 영문 텍스트는 크롭" 규칙 적용 */
header.phero{padding:62px 0 54px;background:linear-gradient(95deg,rgba(245,248,251,.96) 0%,rgba(245,248,251,.8) 42%,rgba(245,248,251,.2) 66%,rgba(245,248,251,0) 82%),#F1F4F8;}
.phero.bg-rf,.phero.bg-stamp,.phero.bg-stick,.phero.bg-core,.phero.bg-build{background-position:0 0,right center;background-size:auto,cover;background-repeat:no-repeat;background-color:#F1F4F8;}
.phero.bg-rf{background-image:linear-gradient(95deg,rgba(245,248,251,.96) 0%,rgba(245,248,251,.8) 42%,rgba(245,248,251,.2) 66%,rgba(245,248,251,0) 82%),url("img/banner_rf.webp?v=7");}
.phero.bg-stamp{background-image:linear-gradient(95deg,rgba(245,248,251,.96) 0%,rgba(245,248,251,.8) 42%,rgba(245,248,251,.2) 66%,rgba(245,248,251,0) 82%),url("img/banner_stamp.webp");}
.phero.bg-stick{background-image:linear-gradient(95deg,rgba(245,248,251,.96) 0%,rgba(245,248,251,.8) 42%,rgba(245,248,251,.2) 66%,rgba(245,248,251,0) 82%),url("img/banner_stick.webp?v=4");}
.phero.bg-core{background-image:linear-gradient(95deg,rgba(245,248,251,.96) 0%,rgba(245,248,251,.8) 42%,rgba(245,248,251,.2) 66%,rgba(245,248,251,0) 82%),url("img/banner_core.webp?v=4");}
.phero.bg-build{background-image:linear-gradient(95deg,rgba(245,248,251,.96) 0%,rgba(245,248,251,.8) 42%,rgba(245,248,251,.2) 66%,rgba(245,248,251,0) 82%),url("img/banner_build.webp?v=3");}
/* 폰 — 상세 히어로도 배너 유지: 세로 그라데이션 덮개 (이미지 제거하던 옛 규칙 대체) */
@media(max-width:680px){
  .phero.bg-rf{background-image:linear-gradient(rgba(245,248,251,.95) 0%,rgba(245,248,251,.88) 50%,rgba(245,248,251,.74) 100%),url("img/banner_rf.webp?v=7");}
  .phero.bg-stamp{background-image:linear-gradient(rgba(245,248,251,.95) 0%,rgba(245,248,251,.88) 50%,rgba(245,248,251,.74) 100%),url("img/banner_stamp.webp");}
  .phero.bg-stick{background-image:linear-gradient(rgba(245,248,251,.95) 0%,rgba(245,248,251,.88) 50%,rgba(245,248,251,.74) 100%),url("img/banner_stick.webp?v=4");}
  .phero.bg-core{background-image:linear-gradient(rgba(245,248,251,.95) 0%,rgba(245,248,251,.88) 50%,rgba(245,248,251,.74) 100%),url("img/banner_core.webp?v=4");}
  .phero.bg-build{background-image:linear-gradient(rgba(245,248,251,.95) 0%,rgba(245,248,251,.88) 50%,rgba(245,248,251,.74) 100%),url("img/banner_build.webp?v=3");}
}
.phero .crumb{font-size:13px;font-weight:600;color:#636A74;margin-bottom:18px;}
.phero .crumb a:hover{color:var(--ink);}
.phero h1{font-size:38px;line-height:1.2;font-weight:900;letter-spacing:0;margin-bottom:14px;color:var(--ink);}
.phero p.lead{font-size:18px;color:#3D434C;max-width:660px;}
.phero p{color:#3D434C!important;}
.phero p strong,.phero p.lead strong{color:var(--ink)!important;}
@media(max-width:680px){header.phero{padding:40px 0 34px;}.phero h1{font-size:27px;}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;padding:13px 24px;border-radius:8px;border:1px solid var(--line);transition:background .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s;}
.btn.primary{background:var(--accent-btn);color:#fff;border-color:var(--accent-btn);}  /* 15px 글자라 4.5:1 필요 (2026-09-14 감사) */
.btn.primary:hover{background:#B03509;border-color:#B03509;transform:translateY(-1px);box-shadow:0 8px 18px rgba(196,63,18,.28);}
.btn.ghost{border-color:var(--accent);color:var(--accent-d);}
.btn.ghost:hover{background:var(--accent-soft);}

/* sections */
section{padding:76px 0;}
section:nth-of-type(even){background:var(--soft);}
.kicker{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--accent-d);text-transform:uppercase;margin-bottom:14px;}
h2{font-size:30px;font-weight:700;letter-spacing:0;line-height:1.3;margin-bottom:14px;}
h2 + p.sub{font-size:17px;color:var(--muted);max-width:680px;margin-bottom:6px;}
h3{font-size:18px;font-weight:700;letter-spacing:0;margin:30px 0 8px;}
p{font-size:16px;color:var(--muted);margin-bottom:14px;}
@media(max-width:680px){section{padding:48px 0;}h2{font-size:24px;}.wrap{padding:0 18px;}}

/* callout */
.quote{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:0 8px 8px 0;padding:18px 22px;margin:22px 0;font-size:17px;font-weight:700;color:var(--accent-d);line-height:1.55;}
.quote strong{color:var(--accent-d);}

/* cards grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0;}
.grid.three{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:820px){.grid,.grid.three{grid-template-columns:1fr;}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:.18s;}
.card:hover{border-color:var(--accent);box-shadow:0 10px 24px rgba(60,30,10,.08);}
.card .k{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--accent-d);text-transform:uppercase;margin-bottom:8px;}
.card h4{font-size:17px;font-weight:700;letter-spacing:0;margin-bottom:6px;}
.card p{font-size:14.5px;margin:0;}

/* ── 제품 스포트라이트 그리드 (m5stack Product Spotlight 문법) ── */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;}
@media(max-width:900px){.pgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:580px){.pgrid{grid-template-columns:1fr;}}
.pg{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px;display:flex;flex-direction:column;transition:.16s;}
.pg:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 14px 30px rgba(60,30,10,.10);}
/* 높이 190 — 스케일 이미지가 160 상한에 눌려 작아 보이던 것(8/28 "릴레이 보드에 비해 작음") */
.pg .pic{height:190px;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;background:linear-gradient(#fff,#F8F9FB);border:1px solid var(--soft2);border-radius:10px;padding:12px;overflow:hidden;}
.pg .pic img{max-height:94%;max-width:94%;width:auto;height:auto;object-fit:contain;transition:transform .25s ease;}
.pg:hover .pic img{transform:scale(1.04);}
.pg .pic img:not(:only-child){max-width:46%;}
/* 사이즈 통일 — 세로형 사진(.tall 은 tb.js 가 비율 보고 부여)은 살짝 눌러 같은 시각 크기로 */
.pg .pic img.tall{max-height:84%;}
/* data-mm 스케일 이미지는 폭이 곧 크기 — 높이 상한(84/94%)이 스케일을 누르지 않게 완화 */
.pg .pic img[data-mm]{max-height:96%;}
/* ★8/31 — 두 컷이 나란한 카드에서 46% 상한이 실물 비율을 깨뜨렸다.
   ATOM CH2(36mm)와 CH4(54mm)가 108:115 로 거의 같아 보였다. data-mm 이 있으면 폭은 JS 가
   실물 기준으로 정하므로 상한을 풀고, 넘침은 배율(tb.js PXPG)로 막는다. */
.pg .pic img[data-mm]:not(:only-child){max-width:none;}
.pg .sku{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--faint);text-transform:uppercase;margin-bottom:6px;}
.pg h4{font-size:16.5px;font-weight:700;margin-bottom:6px;line-height:1.4;}
.pg p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:12px;}
.pg .more{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--accent-d);}
.pg .badge{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--soft2);color:var(--muted);margin-left:6px;vertical-align:1px;}
/* 폰 — 카드가 1열로 넓어지므로 사진칸도 키운다 (8/28 "폰에서 제품 이미지가 너무 작음")
   ★8/31 250->380px. 사장님 "PC 화면은 괜찮은데 폰에서는 작아보임" — 원인은 배율이 아니라
   ★★높이였다. 제품 컷이 세로로 매우 길어(ATOM CH2 = 189x700, 1:3.7) 배율이 준 폭 94px 을
   그리려면 높이 347px 가 필요한데 내부 높이가 218px 뿐이라 max-height 에 걸리고
   ☠폭까지 비례 축소됐다(94->56px). 배율만 올려서는 안 커진다 — 높이가 같이 커야 한다.
   380px = 내부 348 x 96% = 334px 로, 전 컷이 배율의 95% 이상으로 나오는 값이다
   (전부 100% 로 하려면 400px 인데 카드가 과하게 길어진다). */
@media(max-width:580px){.pg .pic{height:380px;padding:16px;}}

/* ── 제품 상세 카드 (카테고리 페이지 — 이미지 패널 + 정보) ── */
section[id]{scroll-margin-top:74px;}
.prod{display:grid;grid-template-columns:1.02fr .98fr;gap:32px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 36px;}
@media(max-width:900px){.prod{grid-template-columns:1fr;gap:20px;padding:22px 18px;}}
.prod .stage{background:linear-gradient(#fff,#FAFBFC);border:1px solid var(--soft2);border-radius:12px;
  height:300px;padding:14px;display:flex;align-items:center;justify-content:center;gap:14px;}
.prod .stage img{max-height:94%;max-width:94%;width:auto;height:auto;object-fit:contain;}
.prod .stage img:not(:only-child):not([data-mm]){max-width:44%;}
.prod .stage img.tall{max-height:82%;}
/* 실물 비율 스케일(블록홀 규격 기준, 8/28 사장님 "같은 사이즈가 아니라 같은 비율")
   — 이미지 data-mm(사진 프레임의 실물 폭 mm)을 주면 tb.js 가 페이지 공통 px/mm 로 폭을 지정.
   폭은 규격대로 통일되고, 길이 차이는 그대로 드러남. 스테이지도 한 창에 가두지 않고 늘어남 */
.prod .stage.scaled{height:auto;min-height:240px;padding:22px 14px;}
.prod .stage.scaled img{max-height:none;max-width:96%;height:auto;}
@media(max-width:560px){.prod .stage.scaled{min-height:210px;padding:18px 12px;}}
/* 폰 — 상세 스테이지: 줄이지 않고 키운다 */
@media(max-width:560px){
  .prod .stage{height:300px;padding:14px 12px;gap:10px;}
  .prod .stage img:not(:only-child):not([data-mm]){max-width:48%;}
}
.prod .scap{text-align:center;font-size:12.5px;color:var(--faint);margin-top:10px;}
.prod .pno{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  color:var(--accent-d);text-transform:uppercase;margin-bottom:10px;}
.prod .pno::before{content:"";display:inline-block;width:22px;height:3px;background:var(--accent);border-radius:2px;}
.prod h2{font-size:25px;margin-bottom:8px;}
.prod h2 .sub{color:var(--muted);font-weight:700;}
.prod .ptags{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 14px;}
.prod .ptags .tag{margin-right:0;}
.prod p.desc{font-size:15.5px;margin-bottom:10px;}
.prod .feat{font-size:13.5px;color:var(--muted);margin:0 0 10px;}
/* 제품 공통 포맷(8/28 사장님) — 설명 → 주요 기능 체크 3~5 → 미니 스펙 2~4행 → 이럴 때 */
.flist{list-style:none;margin:0 0 14px;padding:0;}
.flist li{position:relative;padding-left:22px;font-size:14px;color:var(--muted);line-height:1.75;}
.flist li::before{content:"✓";position:absolute;left:2px;color:var(--accent-d);font-weight:900;}
.flist li strong{color:var(--ink);}
.spec{display:grid;grid-template-columns:auto 1fr;gap:3px 16px;margin:0 0 14px;font-size:13.5px;
  border-top:1px solid var(--line);padding-top:12px;}
.spec dt{color:var(--faint);font-weight:700;white-space:nowrap;}
.spec dd{margin:0;color:var(--muted);}
.spec dd strong{color:var(--ink);}
.fit{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:0 8px 8px 0;
  padding:12px 16px;margin:12px 0 14px;font-size:14.5px;color:var(--ink);line-height:1.6;}
.fit b{color:var(--accent-d);margin-right:6px;}
@media(max-width:680px){.prod h2{font-size:21px;}}

/* tags */
.tag{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;border-radius:6px;margin-right:6px;}
.tag.ok{background:#E9F7EF;color:var(--ok);}.tag.visit{background:#FBF3E3;color:var(--warn);}.tag.no{background:#FBECEA;color:var(--no);}.tag.ac{background:var(--accent-soft);color:var(--accent-d);}

/* tables */
table.tb{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;}
table.tb th,table.tb td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;}
table.tb thead th{font-size:13px;font-weight:700;color:var(--faint);letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid var(--ink);}
table.tb tbody th{font-weight:700;color:var(--ink);white-space:nowrap;}
table.tb td{color:var(--muted);}
table.tb tbody tr{transition:background .14s;}
table.tb tbody tr:hover{background:var(--soft);}
@media(max-width:680px){
  table.tb{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:13px;}
  table.tb th,table.tb td{padding:10px 8px;}
  table.tb tbody th{white-space:normal;}
}

/* M5Stack 시리즈 배너 스트립 (알리 스토어 배너 재구성, 8/28 사장님) */

/* 구매처 카드 */
.buycard{display:flex;align-items:center;gap:14px;text-decoration:none;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;transition:.16s;background:#fff;}
.buycard:hover{border-color:var(--accent);background:#fffdfc;box-shadow:0 10px 24px rgba(60,30,10,.08);}
.buycard .bi{flex:0 0 auto;width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:15px;}
.buycard .bi.ali{background:#e03131;}
.buycard .bi.m5{background:#1f6fe5;}
.buycard .bi.dm{background:#0b8457;}
.buycard .txt{flex:1 1 auto;}
.buycard h4{margin:0 0 2px;font-size:14.5px;font-weight:700;color:var(--ink);}
.buycard p{margin:0;font-size:12.5px;color:var(--muted);}
.buycard .arr{flex:0 0 auto;color:var(--accent-d);font-weight:700;font-size:18px;}

/* 부품 → 조립 스토리 카드 (히어로) */

/* closing band — 다크 */
/* 마감 밴드 — 히어로와 같은 문법: 서킷 배경 풀커버 + 큰 적층 컷 + 잉크 글자 (8/28 사장님) */
.close{background:linear-gradient(95deg,rgba(245,248,251,.95) 0%,rgba(245,248,251,.72) 34%,rgba(245,248,251,0) 56%),url("img/close_stack_bg.webp?v=5") right center/cover no-repeat #F1F4F8;border:1px solid var(--line);box-shadow:0 18px 40px rgba(20,50,110,.08);color:var(--ink);border-radius:16px;padding:60px 48px;text-align:left;}
.close h2{color:var(--ink);font-size:29px;margin-bottom:14px;}
.close p{color:#3D434C;font-size:16.5px;max-width:480px;margin:0 0 26px;}
.close p strong{color:var(--ink);}
@media(max-width:680px){.close{background:linear-gradient(rgba(245,248,251,.94) 0%,rgba(245,248,251,.86) 50%,rgba(245,248,251,.72) 100%),url("img/close_stack_bg.webp?v=5") center/cover no-repeat #F1F4F8;padding:40px 24px;}}
@media(max-width:680px){.close{padding:38px 24px;}.close h2{font-size:23px;}}

/* footer — 딥 네이비 블루 (검정 금지) */
footer{background:#132B55;color:rgba(255,255,255,.72);padding:44px 0 52px;font-size:13.5px;}
footer .frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
footer a{color:#fff;}
footer a:hover{color:#FF8A5C;}
footer .fcontact{margin-top:16px;font-size:13px;color:rgba(255,255,255,.6);}
footer .fcontact a{color:rgba(255,255,255,.85);font-weight:600;}
footer .fcompany{margin-top:14px;padding-top:15px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;color:rgba(255,255,255,.5);letter-spacing:.02em;}
footer .fcompany a{color:rgba(255,255,255,.55);}
/* 사업자 정보 (2026-09-15) */
footer .fbiz{margin-top:8px;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.62);word-break:keep-all;}
footer .fbiz a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:3px;}

/* 접근성 — 키보드 포커스 */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

/* 상담 폼 */
.cform{border:1px solid var(--line);border-radius:14px;padding:26px 24px;margin-top:18px;max-width:720px;background:#fff;box-shadow:0 14px 34px rgba(20,50,110,.06);}
.cform label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px;color:var(--ink);}
.cform label .hint{font-weight:400;color:var(--faint);}
.cform input,.cform textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;color:var(--ink);background:#fff;margin-bottom:14px;transition:border-color .15s,box-shadow .15s;}
.cform textarea{line-height:1.6;resize:vertical;margin-bottom:16px;}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.cform .frow2{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.cform .frow2 .btn{cursor:pointer;font-family:inherit;}
.cform .fnote{font-size:12.5px;color:var(--faint);}
.cform .fmsg{display:none;margin-top:12px;font-size:13.5px;font-weight:700;}
.cform .fmsg.err{color:var(--no);}
.cform .fmsg.okc{color:var(--ok);}

/* 최소 모션 — 스크롤 리빌 */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.2,.65,.25,1),transform .55s cubic-bezier(.2,.65,.25,1);}
  .rv.in{opacity:1;transform:none;}
}

/* 폰 — 제품 사진: 본문보다 크지 않게, 항상 가운데 */
@media(max-width:680px){
  figure{text-align:center;}
  figure img{max-height:230px!important;width:auto!important;max-width:100%!important;height:auto!important;margin-left:auto!important;margin-right:auto!important;}
  figure figcaption{text-align:center;}
}

/* 9/28 메뉴 끝 「구매하기」 버튼 — 옛 「상담」 자리(상담은 주문제작 페이지로) */
nav.top .links a.buy{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;background:var(--accent-d,var(--accent));border:1px solid var(--accent-d,var(--accent));color:#fff;font-weight:700;}nav.top .links a.buy:hover{filter:brightness(.92);color:#fff;}