@import url("../fonts/fonts.css");
/* ============================================================
   JJTECH Catalogue 웹앱 — Ivory Atelier 재도장
   ============================================================ */
:root {
  /* 카탈로그 앱 전용 다크·골드 — 홈페이지(v2 밝은 주황)와 의도적으로 다른 팔레트.
     두 제품은 별개이고, 공유하는 것은 주황·검정 대각 띠와 금박 워드마크뿐이다. (2026-09-08 승인 시안) */
  --gold: #C08A1E;          /* 어두운 면 위 모노 아이브로 */
  --gold2: #F5A623;         /* 주 액센트 (버튼 · 활성탭 · 링크) */
  --orange: #F5A623;
  --orange-deep: #F5A623;
  --orange-pale: rgba(245, 166, 35, 0.14);
  --on-dark: #F5A623;
  --on-gold: #14120D;       /* 금색 면 위 글자 */
  --stripe: var(--gold2);        /* 주황 · 검정 대각 띠 원색 */
  --hot: #FFC65C;           /* hover — 어두운 면에서는 밝아지는 쪽이 강조다 */
  --dark: #26221B;          /* 페이지보다 한 단 밝은 면 (표 머리 · 푸터 · 배지) */
  --ink: #EFECE4;           /* 본문 글자 */
  --body: rgba(239, 236, 228, 0.72);
  --dim: rgba(239, 236, 228, 0.46);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);
  --bg: #14120D;
  --surface: #1B1811;
  --card: #1B1811;
  --sunk: #100E0A;
  --paper: #FFFFFF;         /* 도면 · 단면도 전용 흰 판 */
  --on-paper: #5C574B;      /* 흰 판 위 캡션 */
  --topbar-h: 54px;
  --sectab-h: 46px;
  --font: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  --font-display: "Noto Serif KR", serif;
  --font-label: "IBM Plex Mono", ui-monospace, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font-family: var(--font); }
/* 키보드 포커스 링: 앰버 외곽 + 잉크 내곽 2중 링 (2026-09-07 감사 #65) */
:focus-visible { outline: 2px solid var(--gold2); outline-offset: 2px; box-shadow: 0 0 0 2px var(--sunk); }
.searchwrap input:focus-visible { box-shadow: none; } /* 검색창은 래퍼의 focus-within 테두리로 표시 */

/* ── 상단바 ── */
#appchrome { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
#topbar {
  position: static; height: var(--topbar-h);
  background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
}

.searchwrap {
  flex: 1; max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: 0; padding: 7px 12px; transition: border-color .2s;
}
.searchwrap:focus-within { border-color: var(--gold2); }
.searchwrap svg { width: 16px; height: 16px; color: var(--dim); flex: 0 0 auto; }
.searchwrap input {
  flex: 1; background: none; border: 0; outline: none; color: var(--ink);
  font-family: var(--font); font-size: 14px; min-width: 0;
}
.searchwrap input::placeholder { color: rgba(239,236,228,.42); }
.searchwrap kbd {
  font-size: 11px; color: var(--dim); border: 1px solid var(--line-strong);
  border-radius: 0; padding: 0 6px; font-family: var(--font-label);
}
.site_link { font-size: 12.5px; color: rgba(251,250,247,0.66); white-space: nowrap; }
.site_link:hover { color: var(--ink); }

/* ── 섹션 탭바 ── */
#sectab {
  position: static; height: var(--sectab-h);
  background: var(--bg); border-bottom: 1px solid var(--line);
  display: flex; align-items: stretch; gap: 6px; padding: 0 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
/* 넘치면 좌측 정렬로 자연 복귀하는 중앙 배열 (auto 마진 스페이서) */
#sectab::before, #sectab::after { content: ""; margin: auto; }
/* 홈 화면이 승인 시안의 정식 화면이 되어(2026-09-08) 홈페이지판에서도 홈 탭을 보여준다 */
#sectab::-webkit-scrollbar { display: none; }
#sectab a {
  flex: 0 0 auto; display: flex; align-items: center; padding: 0 14px;
  font-size: 14px; font-weight: 700; color: var(--body);
  border-bottom: 3px solid transparent; white-space: nowrap;
  transition: color .2s, border-color .2s;
}
#sectab a:hover { color: var(--ink); }
#sectab a.on { color: var(--ink); border-bottom-color: var(--gold2); }
/* ≤760 섹션탭 가로 스크롤 힌트 (감사 #39): 탭이 넘칠 때만 우측 페이드 + '›', 끝까지 밀면 사라짐.
   스크롤 타임라인(animation-timeline) 지원 브라우저에서만 표시 — 넘치지 않으면 타임라인이 비활성이라 숨김 */
@media (max-width: 760px) {
  #sectab::before { margin: 0; }
  #sectab::after {
    content: "›"; position: sticky; right: 0; flex: 0 0 auto; align-self: stretch;
    margin: 0 0 0 -34px; padding: 0 10px 0 34px; display: flex; align-items: center;
    color: var(--orange-deep); font-size: 22px; line-height: 1; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, rgba(20,18,13,0), var(--bg) 55%);
  }
  @supports (animation-timeline: scroll()) {
    #sectab::after { animation: jj_hint_fade linear both; animation-timeline: scroll(nearest x); }
  }
}
@keyframes jj_hint_fade { from { opacity: 1; } 90% { opacity: 1; } to { opacity: 0; } }

/* ── 메인 ── */
#view { margin: var(--chrome-h, 175px) auto 0; max-width: 1180px; padding: 26px 28px 60px; min-height: calc(100vh - var(--topbar-h) - var(--sectab-h)); outline: none; }
.vhead { margin-bottom: 18px; }
.vhead h1 { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.2px; }
.vhead h1 small { font-family: var(--font-label); font-size: 12px; font-weight: 700; color: var(--gold2); letter-spacing: 2px; margin-left: 10px; }
.vhead p { color: var(--dim); font-size: 13px; margin-top: 3px; }

/* 홈 브랜드 스트립 */
.brandstrip {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 0;
  padding: 16px 20px; margin-bottom: 16px;
}
.brandstrip img { width: 44px; flex: 0 0 auto; }
.brandstrip .bs_main { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.2px; }
.brandstrip .bs_sub { font-size: 12.5px; color: var(--dim); margin-top: 2px; }

/* 홈 대시보드 */
.homecards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 24px 22px;
  display: block; transition: box-shadow .2s, transform .2s;
}
.hcard:hover { box-shadow: 0 10px 26px rgba(0,0,0,.5); transform: translateY(-2px); }
.hcard h3 { font-size: 17.5px; font-weight: 800; margin-bottom: 5px; }
.hcard h3 em { font-style: normal; font-family: var(--font-label); color: var(--gold2); font-size: 11px; letter-spacing: 2px; display: block; margin-bottom: 6px; }
.hcard h3 .hnum { font-family: var(--font-label); font-size: 12.5px; font-weight: 700; color: var(--gold); letter-spacing: 0.5px; margin-left: 8px; white-space: nowrap; }
.hcard p { font-size: 13px; color: var(--dim); }

/* 제품 그리드 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chips a {
  padding: 6px 14px; border: 1px solid var(--line); background: var(--card); border-radius: 0;
  font-size: 12.5px; font-weight: 600; color: var(--body);
}
.chips a:hover { border-color: var(--gold); }
.chips a.on { background: var(--dark); border-color: var(--dark); color: var(--ink); }
/* 제품 목록 — 43종을 한 화면에서 훑고 비교하는 용도 */
.plist { border-top: 1px solid var(--line); }
.prow {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.05fr) auto;
  gap: 16px; align-items: center;
  padding: 11px 12px; border-bottom: 1px solid var(--line);
  background: var(--card); cursor: pointer; transition: background .13s;
}
.prow:hover { background: rgba(255,255,255,.05); }
.pr_th { width: 56px; height: 42px; object-fit: contain; background: var(--paper); display: block; }
.pr_name { font-size: 14px; font-weight: 700; line-height: 1.4; }
.pr_meta { font-size: 12.5px; color: var(--dim); }
/* 스펙 3칸(프레임·유리·형태) 세로줄 정렬 — 모든 행이 같은 칸 폭을 공유 */
.pr_cols { display: grid; grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, .9fr); gap: 12px; align-items: center; }
.pr_cols i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* 성능 3칸(열관류율·등급·재고)도 고정 폭 — 값이 없으면 투명 자리를 유지 */
.pr_bdg { display: grid; grid-template-columns: 78px 60px 68px; gap: 5px; justify-content: flex-end; }
.pr_bdg .bdg { text-align: center; white-space: nowrap; }
.pr_bdg .bdg.ph { background: transparent; padding: 2.5px 0; }
.plist_head {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.05fr) auto;
  gap: 16px; align-items: center; padding: 8px 12px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--dim);
}
.plist_head .pr_cols i { overflow: visible; }
.pr_bdg_h { display: grid; grid-template-columns: 78px 60px 68px; gap: 5px; text-align: center; font-style: normal; }
.pr_bdg_h i { font-style: normal; }
@media (max-width: 760px) {
  .prow { grid-template-columns: 48px minmax(0, 1fr); gap: 6px 12px; padding: 12px 10px; align-items: start; }
  .pr_th { grid-row: span 3; width: 48px; height: 38px; align-self: center; }
  .pr_cols { display: flex; gap: 8px; }
  .pr_cols i { overflow: visible; }
  .pr_bdg { display: flex; justify-content: flex-start; flex-wrap: wrap; }
  .pr_bdg .bdg.ph { display: none; }
  .plist_head { display: none; }
}

.badges { display: flex; flex-wrap: wrap; gap: 5px; }
.bdg { font-size: 10.5px; font-weight: 700; padding: 2.5px 8px; border-radius: 0; }
.bdg.u { background: rgba(255,255,255,.09); color: var(--ink); font-family: var(--font-display); }
.bdg.g1 { background: var(--gold2); color: var(--on-gold); }
.bdg.g2 { background: var(--dark); color: var(--ink); }
.bdg.g3 { background: rgba(255,255,255,.14); color: var(--ink); }
.bdg.stock { background: rgba(245,166,35,.15); color: var(--orange-deep); border: 1px solid rgba(245,166,35,.5); }

/* 다이스북 섹션 카드 랜딩 */
.secgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.seccard {
  background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 12px 13px 11px;
  display: block; transition: box-shadow .2s, transform .2s;
}
.seccard:hover { box-shadow: 0 10px 26px rgba(0,0,0,.5); transform: translateY(-2px); }
.seccard .sc_no { display: block; font-family: var(--font-label); font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: var(--gold); margin-bottom: 5px; }
.seccard .sc_name { display: block; font-weight: 800; font-size: 12.5px; line-height: 1.35; min-height: 34px; margin-bottom: 6px; letter-spacing: -0.1px; }
.seccard .sc_im { display: block; height: 88px; margin: 0 0 7px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.seccard .sc_im img { display: block; width: 128%; margin-left: -14%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.seccard .sc_n { display: block; font-family: var(--font-label); font-size: 11px; color: var(--dim); }

/* 다이스북 섹션 알약 바 — 전 섹션이 한눈에 보이도록 줄바꿈(가로 스크롤 금지) */
.secpills {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 2px 2px 10px; margin-bottom: 8px;
}
.secpills a {
  flex: 0 0 auto; padding: 5px 11px; border: 1px solid var(--line); background: var(--card);
  border-radius: 0; font-size: 12px; font-weight: 600; color: var(--body); white-space: nowrap;
}
.secpills a:hover { border-color: var(--gold); color: var(--ink); }
.secpills a.on { background: var(--orange); border-color: var(--gold2); color: var(--on-gold); font-weight: 700; }

/* 다이스북 — 도면 연속 열람 */
.dpg_stack { max-width: 920px; }
.dpg { margin: 0 0 14px; }
.dpg img {
  display: block; width: 100%; height: auto; aspect-ratio: auto 1080 / 1436;
  background: var(--paper); border: 1px solid var(--line); cursor: zoom-in;
}
.dpg figcaption {
  font-family: var(--font-label); font-size: 11px; font-weight: 700; color: var(--dim);
  letter-spacing: 1.5px; text-align: center; padding: 4px 0 0;
}

/* 표 (검색 결과·부속자재) */
.tblcard { background: var(--card); border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.tblscroll { overflow: auto; max-height: calc(100vh - 294px); }
table.dtbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.dtbl thead th {
  position: sticky; top: 0; z-index: 2; background: var(--dark); color: var(--ink);
  padding: 10px 12px; text-align: left; font-size: 11.5px; letter-spacing: .6px; white-space: nowrap;
}
.dtbl tbody td { padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dtbl tbody tr { cursor: pointer; }
.dtbl tbody tr:hover { background: rgba(255,255,255,.05); }
.dtbl .code { font-family: var(--font-display); font-weight: 700; }
.dtbl .sec { color: var(--dim); font-size: 11.5px; }
.dtbl .dwg { color: var(--gold2); font-weight: 700; font-size: 11.5px; }
.more_btn {
  display: block; width: 100%; padding: 12px; border: 0; border-top: 1px solid var(--line);
  background: rgba(255,255,255,.05); font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.more_btn:hover { background: rgba(255,255,255,.05); }

/* 조립도 */
.asm_card { background: var(--card); border: 1px solid var(--line); border-radius: 0; margin-bottom: 12px; overflow: hidden; }
.asm_card > button {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 15px 18px; border: 0; background: none; cursor: pointer; text-align: left;
  font-size: 14.5px; font-weight: 800; letter-spacing: .3px;
}
.asm_card > button .arr { color: var(--gold2); font-size: 11px; transition: transform .25s; }
.asm_card.open > button .arr { transform: rotate(180deg); }
.asm_bd { display: none; padding: 2px 18px 18px; border-top: 1px solid var(--line); }
.asm_card.open .asm_bd { display: block; }
.asm_lbl { font-family: var(--font-label); font-size: 11px; font-weight: 800; color: var(--gold2); letter-spacing: 2px; margin: 13px 0 7px; }
.asm_imgs { display: flex; flex-wrap: wrap; gap: 10px; }
.asm_imgs img { width: 180px; border: 1px solid var(--line); border-radius: 0; cursor: zoom-in; background: var(--paper); }

/* 재고 */
.note {
  border-left: 3px solid var(--gold); background: rgba(245,166,35,.15); border-radius: 0;
  padding: 13px 18px; margin-bottom: 18px; font-size: 13.5px;
}
.pipes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pipes span { font-weight: 700; font-size: 12.5px; background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 6px 13px; }

/* 검색 결과 */
.sr_group { margin-bottom: 26px; }
.sr_group h3 { font-family: var(--font-label); font-size: 13px; font-weight: 800; color: var(--gold2); letter-spacing: 2px; margin-bottom: 10px; }
.sr_rows { background: var(--card); border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.sr_row {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13.5px;
}
.sr_row:last-child { border-bottom: 0; }
.sr_row:hover { background: rgba(255,255,255,.05); }
.sr_row .code { font-family: var(--font-display); font-weight: 700; min-width: 110px; }
.sr_row .sub { color: var(--dim); font-size: 12px; margin-left: auto; white-space: nowrap; }
.empty { text-align: center; color: var(--dim); padding: 60px 0; }

/* ── 회사 푸터 ── */
#appfoot {
  background: var(--dark); color: rgba(251,250,247,0.72);
  padding: 26px 28px 30px; font-size: 12.5px; line-height: 1.85;
}
#appfoot .f_logo { height: 20px; width: auto; display: block; margin-bottom: 12px; }
#appfoot .f_name { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink); }
#appfoot .f_biz { font-family: var(--font); font-size: 12px; font-weight: 400; color: rgba(251,250,247,0.6); margin-left: 10px; }
#appfoot .f_info { margin-top: 2px; }
#appfoot .f_info span { white-space: nowrap; }
#appfoot a { color: var(--gold2); }
#appfoot a:hover { color: var(--ink); }
#appfoot .f_copy { font-family: var(--font-label); font-size: 10px; letter-spacing: 2.5px; color: rgba(251,250,247,0.45); margin-top: 14px; }

/* ── 모달 ── */
#app_modal { position: fixed; inset: 0; z-index: 1500; display: none; }
#app_modal.open { display: block; }
#app_modal .am_bk { position: absolute; inset: 0; background: rgba(16,14,8,0.55); }
#app_modal .am_dlg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(980px, calc(100vw - 28px)); max-height: calc(100vh - 48px);
  background: var(--surface); border-radius: 0; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(16,14,8,0.4); overflow: hidden;
}
#app_modal .am_hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
#app_modal .am_hd h5 { font-family: var(--font-display); font-size: 15.5px; font-weight: 800; }
#app_modal .am_hd .am_acts { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
#app_modal .am_hd button { border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--dim); padding: 4px 8px; }
#am_share { display: flex; align-items: center; }
#am_share:hover { color: var(--gold); }
#am_share svg { display: block; }
#app_modal .am_bd { overflow-y: auto; padding: 20px; }
.md_imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.md_imgs figure { border: 1px solid var(--line); border-radius: 0; padding: 10px; text-align: center; }
.md_imgs img, .md_one img { cursor: zoom-in; max-width: 100%; }
.md_imgs figcaption { font-family: var(--font-label); font-size: 11px; font-weight: 800; color: var(--gold2); letter-spacing: 2px; margin-top: 7px; }
.md_one { text-align: center; }
.md_one img { border: 1px solid var(--line); border-radius: 0; }
.md_one p { font-size: 12.5px; color: var(--dim); margin-top: 9px; }
.spec { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 4px; }
.spec th { width: 120px; text-align: left; background: rgba(255,255,255,.05); font-weight: 600; }
.spec th, .spec td { padding: 8px 13px; border: 1px solid var(--line); }

/* ── 토스트 ── */
#app_toast {
  position: fixed; left: 50%; bottom: 34px; z-index: 5000;
  transform: translateX(-50%) translateY(10px);
  background: var(--dark); color: var(--ink); font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-left: 3px solid var(--gold);
  max-width: calc(100vw - 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  box-shadow: 0 10px 28px rgba(16,14,8,0.3);
}
#app_toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 설치 안내 배너 ── */
#install_bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  display: flex; align-items: center; gap: 12px;
  background: var(--dark); color: rgba(251,250,247,0.9);
  padding: 10px 14px; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 -8px 22px rgba(16,14,8,0.28);
}
#install_bar span { flex: 1; min-width: 0; }
#install_bar b { color: var(--gold2); }
#install_bar #ib_add {
  flex: 0 0 auto; border: 0; background: var(--orange); color: var(--ink);
  font-weight: 700; font-size: 12.5px; padding: 8px 15px; cursor: pointer;
}
#install_bar #ib_add:hover { background: var(--hot); }
#install_bar #ib_close { flex: 0 0 auto; border: 0; background: none; color: rgba(251,250,247,0.6); font-size: 14px; cursor: pointer; padding: 4px 6px; }
#install_bar #ib_close:hover { color: var(--ink); }
body.has_installbar { padding-bottom: 52px; }

/* ── 줌 뷰어 ── */
#jjviewer {
  position: fixed; inset: 0; z-index: 4000; background: rgba(16,14,8,0.92);
  display: none; overflow: hidden; cursor: grab; touch-action: none;
}
#jjviewer.open { display: block; }
#jjviewer.drag { cursor: grabbing; }
#jjviewer img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; }
#jjviewer .jjv_badge { position: fixed; top: 14px; left: 14px; background: rgba(16,14,8,0.6); color: var(--ink); font-family: var(--font-label); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 0; pointer-events: none; }
#jjviewer .jjv_hint { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); color: rgba(251,250,247,0.8); font-size: 11.5px; background: rgba(16,14,8,0.55); padding: 6px 14px; border-radius: 0; white-space: nowrap; pointer-events: none; }
#jjviewer .jjv_close { position: fixed; top: 10px; right: 12px; background: none; border: 0; color: var(--ink); font-size: 21px; cursor: pointer; padding: 8px; }

/* ── 반응형 ── */
@media (max-width: 900px) {
  #view { padding: 18px 14px 50px; }
  #appfoot { padding: 22px 16px 26px; }
  #appfoot .f_biz { display: block; margin-left: 0; }
  .homecards { grid-template-columns: 1fr; }
  .searchwrap kbd { display: none; }
  .site_link { display: none; }
  .md_imgs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  #topbar { gap: 8px; padding: 0 10px; }
  #sectab { padding: 0 4px; }
  #sectab a { padding: 0 13px; font-size: 14px; }
  .searchwrap { flex: 1 1 auto; min-width: 0; padding: 6px 10px; }
  .searchwrap input { font-size: 13px; }
}
@media (max-width: 420px) {
  #topbar .logo span { display: none; } /* CATALOGUE 라벨 숨김 */
}

/* 부속자재 가로 탭 (2026-08-31) */
.acc_tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.acc_tabs::-webkit-scrollbar{display:none}
.acc_tabs a{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;font-weight:700;font-size:13.5px;white-space:nowrap}
.acc_tabs a small{font-weight:600;font-size:11px;color:var(--dim)}
.acc_tabs a.on{background: var(--orange);border-color:var(--gold2);color:var(--on-gold)}
.acc_tabs a.on small{color:rgba(20,18,13,.72)}

/* 상단바 견적 문의 버튼 (2026-09-01) */
.tb_quote{flex:0 0 auto;margin-left:auto;border:0;background:var(--gold2);color:var(--on-gold);font-weight:800;font-size:13px;padding:9px 16px;cursor:pointer;font-family:inherit}
.tb_quote:hover{filter:brightness(1.12)}
@media (max-width:760px){.tb_quote{margin-left:8px;padding:7px 10px;font-size:12px}}


/* 창호제품 — 카테고리 사진 그리드·배너 (2026-09-01, 밝은 카드) */
.pcat_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pcat{display:block;border:1px solid var(--line);background:var(--card);transition:box-shadow .18s,transform .18s}
.pcat:hover{box-shadow:0 12px 30px rgba(0,0,0,.55);transform:translateY(-2px)}
.pcat_im{height:190px;overflow:hidden;background:var(--paper)}
.pcat_im img{width:100%;height:100%;object-fit:cover;display:block}
.pcat_bd{padding:14px 16px 16px}
.pcat_bd em{display:block;font-style:normal;font:700 10.5px var(--font-label);letter-spacing:2px;color:var(--gold);margin-bottom:5px}
.pcat_bd b{display:block;font-size:15.5px;font-weight:800}
.pcat_bd span{display:block;font-size:12.5px;color:var(--dim);margin-top:3px}
.pcat_banner{position:relative;border:1px solid var(--line);margin-bottom:16px;height:200px;overflow:hidden}
.pcat_banner img{width:100%;height:100%;object-fit:cover;display:block}
.pcat_banner .pb_t{position:absolute;left:0;bottom:0;right:0;background:linear-gradient(transparent,rgba(23,21,15,.72));color:#fff;padding:26px 18px 12px;font-size:19px;font-weight:800}
.pcat_banner .pb_t small{font:700 10.5px var(--font-label);letter-spacing:2px;color:var(--on-dark);margin-left:10px}
@media (max-width:760px){.pcat_grid{grid-template-columns:1fr 1fr;gap:10px}.pcat_im{height:120px}.pcat_banner{height:140px}}


/* 제품 패밀리 라인업 (2026-09-01) */
.fam{margin-bottom:34px}
.fam_hd{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--dark)}
.fam_hd em{display:block;font-style:normal;font:700 11px var(--font-label);letter-spacing:2.5px;color:var(--gold)}
.fam_hd b{display:block;font-size:21px;font-weight:900;margin-top:3px}
.fam_hd p{margin:4px 0 0;font-size:12.5px;color:var(--dim)}
.fam_tag{flex:0 0 auto;background:var(--dark);color:var(--on-dark);font:700 11px var(--font-label);letter-spacing:1.5px;padding:7px 12px;white-space:nowrap}
.pcat_perf{display:flex;gap:6px;margin-top:8px}
.pcat_perf i{font-style:normal;font-size:11px;font-weight:800;padding:3px 8px;border:1px solid var(--line-strong)}
.pcat_perf i.g1{background:var(--gold2);border-color:var(--gold2);color:var(--on-gold)}
@media (max-width:760px){.fam_hd{flex-direction:column;align-items:flex-start;gap:8px}}


/* 단독판 앱 홈 — 회사소개 · 찾아오기 (2026-09-01) */
.home_about { margin-top: 26px; background: var(--card); border: 1px solid var(--line); padding: 26px 26px 24px; }
.home_about em, .hl_info em { display: block; font-style: normal; font: 700 11px var(--font-label); letter-spacing: 2.5px; color: var(--gold); margin-bottom: 11px; }
.home_about h2 { font-size: 21px; font-weight: 900; margin: 0 0 10px; }
.home_about p { font-size: 13.5px; line-height: 1.75; color: var(--body); max-width: 780px; margin: 0 0 16px; }
.ha_btn { display: inline-block; background: var(--dark); color: var(--on-dark); font: 700 12px var(--font-label); letter-spacing: 1.5px; padding: 11px 18px; }
.ha_btn:hover { background: var(--gold2); color: var(--on-gold); }
.home_loc { margin-top: 14px; display: grid; grid-template-columns: 1fr 1.2fr; border: 1px solid var(--line); background: var(--card); }
.hl_info { padding: 26px; }
.hl_addr { font-size: 16.5px; font-weight: 800; margin: 0 0 6px; }
.hl_meta { font-size: 13px; color: var(--dim); margin: 0 0 16px; }
.hl_btns { display: flex; flex-wrap: wrap; }
.hl_btns a { border: 1px solid var(--line-strong); padding: 9px 14px; font: 600 12px var(--font-label); color: var(--dark); margin: 0 -1px -1px 0; }
.hl_btns a:hover { background: var(--gold2); color: var(--on-gold); }
.hl_map { position: relative; min-height: 280px; border-left: 1px solid var(--line); }
.hl_map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 760px) {
  .home_loc { grid-template-columns: 1fr; }
  .hl_map { min-height: 220px; border-left: none; border-top: 1px solid var(--line); }
}


/* 라인 견적 3버튼 + 단독판 홈 프로세스 (2026-09-02) */
.line_cta { margin-top: 24px; background: var(--dark); color: #EFECE4; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.line_cta em { display: block; font-style: normal; font: 700 11px var(--font-label); letter-spacing: 2px; color: var(--on-dark); margin-bottom: 5px; }
.line_cta p { margin: 0; font-size: 13px; color: rgba(239,236,228,.75); }
.line_cta .lc_b { display: flex; gap: 8px; flex-wrap: wrap; }
.line_cta .lc_b a { background: var(--gold2); color: var(--on-gold); font-weight: 800; font-size: 13px; padding: 11px 16px; white-space: nowrap; }
.line_cta .lc_b a.ghost { background: transparent; border: 1px solid rgba(239,236,228,.4); color: #EFECE4; }
.line_cta .lc_b a.ghost:hover { border-color: var(--gold2); color: var(--on-dark); }
.home_proc { margin-top: 14px; background: var(--card); border: 1px solid var(--line); padding: 22px 26px 20px; }
.home_proc em { display: block; font-style: normal; font: 700 11px var(--font-label); letter-spacing: 2.5px; color: var(--gold); margin-bottom: 14px; }
.home_proc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 12px; }
.home_proc li { flex: 1 1 118px; min-width: 108px; border-left: 1px solid var(--line); padding: 0 12px; }
.home_proc li b { display: block; font: 700 11px var(--font-label); color: var(--gold); }
.home_proc li .t { display: block; font-size: 13px; font-weight: 800; margin-top: 3px; }
.home_proc li .c { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; }


/* 라인 상세: 개폐 도해 + 자료 행 (2026-09-02) */
.ot_strip { margin: 4px 0 18px; }
.ot_strip > em, .docs_row > em { display: block; font-style: normal; font: 700 10.5px var(--font-label); letter-spacing: 2px; color: var(--gold); margin-bottom: 9px; }
.ot_row { display: flex; flex-wrap: wrap; gap: 10px; }
.ot { flex: 1 1 210px; max-width: 310px; display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); padding: 10px 14px 10px 10px; }
.ot .ot_im { flex: 0 0 64px; }
.ot .ot_im svg { display: block; width: 64px; height: 48px; }
.ot .ot_tx { min-width: 0; }
.ot .ot_tx b { display: block; font-size: 12.5px; font-weight: 800; }
.ot .ot_tx i { display: block; font-style: normal; font-size: 11px; color: var(--dim); margin-top: 2px; }
.docs_row { margin-top: 18px; }
.dr_b { display: flex; flex-wrap: wrap; gap: 8px; }
.dr_b a { border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-size: 12.5px; font-weight: 700; padding: 9px 14px; }
.dr_b a:hover { border-color: var(--gold2); color: var(--orange-deep); }
.dr_b a.hot { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
@media (max-width: 560px) { .ot { flex: 1 1 100%; max-width: none; } }


/* 제품 상세 — 부자재 대신 자료 카드 (2026-09-04) */
.md_docs .md_docs_in { display: flex; flex-direction: column; gap: 8px; justify-content: center; min-height: 220px; border: 1px solid var(--line); background: var(--card); padding: 22px 20px; }
.md_docs .md_docs_in b { font-size: 13px; }
.md_docs .md_docs_in span { font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.md_docs .md_docs_in a { display: block; border: 1px solid var(--line-strong); background: none; color: var(--ink); font-size: 12.5px; font-weight: 700; padding: 10px 12px; text-align: center; }
.md_docs .md_docs_in a:first-of-type { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.md_docs .md_docs_in a:hover { border-color: var(--gold2); }


/* ══════════════════════════════════════════════════════════════
   상시 재고 간편 주문 (2026-09-07) — 바구니 버튼·주문 버튼·팝오버·시트·상세 패널
   z-index: 팝오버 1700 > 시트 1600 > 상세 모달 1500 > 로봇 FAB 1200 > site.js 하단 바 1190
   ══════════════════════════════════════════════════════════════ */
/* 상단바 바구니 버튼 + 배지 */
.tb_cart { flex: 0 0 auto; position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(28,25,19,.3); background: none; color: var(--ink); cursor: pointer; padding: 0; }
.tb_cart:hover { border-color: var(--gold2); color: var(--orange-deep); }
.tb_cart svg { width: 19px; height: 19px; }
.tb_cart_n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 0; background: var(--orange-deep); color: var(--on-gold); font: 700 10.5px/18px var(--font-label); text-align: center; }

/* 목록·표의 "주문" 버튼 */
.pr_order, .pipe_order, .acc_order { border: 1px solid var(--orange-deep); background: none; color: var(--gold2); font-family: inherit; font-weight: 800; font-size: 12px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.pr_order:hover, .pipe_order:hover, .acc_order:hover { background: var(--orange-deep); color: var(--on-gold); }
.prow.has_order { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.05fr) auto auto; }
.pipes span { display: inline-flex; align-items: center; gap: 10px; }
.pipe_order { padding: 3px 9px; font-size: 11px; }
.acc_order { padding: 4px 10px; font-size: 11.5px; }
.dtbl th.ord, .dtbl td.ord { text-align: right; width: 1%; }
@media (max-width: 760px) {
  .prow.has_order { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .prow.has_order .pr_order { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
}

/* 수량 스테퍼 (팝오버·시트·상세 패널 공용) */
.jo_qty { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.jo_qty > span { font-size: 12px; color: var(--dim); margin-right: auto; }
.jo_qty button { width: 30px; height: 30px; border: 1px solid var(--line-strong); background: var(--bg); font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
.jo_qty button:hover { border-color: var(--orange-deep); color: var(--orange-deep); }
.jo_qty input { width: 58px; height: 30px; border: 1px solid var(--line-strong); background: var(--bg); text-align: center; font: 700 13.5px var(--font); color: var(--ink); -moz-appearance: textfield; }
.jo_qty input::-webkit-outer-spin-button, .jo_qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jo_qty em { font-style: normal; font-size: 12px; color: var(--dim); }

/* 주문 팝오버 */
.jo_pop { position: fixed; z-index: 1700; width: min(300px, calc(100vw - 16px)); background: var(--bg); border: 1px solid var(--line-strong); box-shadow: 0 18px 44px rgba(0,0,0,.6); padding: 14px 14px 12px; font-size: 13px; }
.jo_pop_hd b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.35; }
.jo_pop_hd small { display: block; color: var(--dim); font: 500 11px var(--font-label); margin-top: 3px; line-height: 1.5; }
.jo_opts { display: flex; flex-direction: column; gap: 6px; margin: 11px 0 2px; }
.jo_opts label { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); padding: 7px 9px; cursor: pointer; font-size: 12.5px; line-height: 1.4; }
.jo_opts label:has(input:checked) { border-color: var(--orange-deep); background: rgba(245,166,35,.15); }
.jo_opts input { margin: 3px 0 0; accent-color: var(--orange-deep); flex: none; }
.jo_pop_ft { display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px; }
.jo_pop_ft button { border: 1px solid var(--line-strong); background: var(--bg); font-family: inherit; padding: 8px 14px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.jo_pop_ft .jo_add { background: var(--orange-deep); border-color: var(--orange-deep); color: var(--on-gold); }
.jo_pop_ft .jo_add:hover { background: var(--hot); border-color: var(--hot); }

/* 바구니 시트 — 데스크톱 우측 드로어 */
#jjorder { position: fixed; inset: 0; z-index: 1600; display: none; }
#jjorder.open { display: block; }
#jjorder .jo_bk { position: absolute; inset: 0; background: rgba(16,14,8,.5); }
#jjorder .jo_panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--bg); display: flex; flex-direction: column; border-left: 1px solid var(--line-strong); box-shadow: -20px 0 60px rgba(16,14,8,.35); }
.jo_hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; background: #26221B; color: #EFECE4; border-bottom: 1px solid var(--line-strong); flex: 0 0 auto; }
.jo_hd em { display: block; font-style: normal; font: 700 10.5px var(--font-label); letter-spacing: 2px; color: var(--on-dark); margin-bottom: 5px; }
.jo_hd h2 { font-family: var(--font-display); font-size: 17px; font-weight: 800; margin: 0; color: var(--ink); }
.jo_hd h2 span { font: 700 12px var(--font-label); color: var(--on-dark); margin-left: 8px; }
.jo_close { border: 0; background: none; color: #EFECE4; font-size: 18px; cursor: pointer; padding: 2px 6px; }
.jo_close:hover { color: var(--on-dark); }
.jo_body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 18px calc(24px + env(safe-area-inset-bottom)); }
.jo_empty { border: 1px dashed var(--line-strong); padding: 22px 12px; text-align: center; color: var(--dim); font-size: 13px; line-height: 1.7; }
.jo_empty small { font-size: 12px; }
.jo_line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.jo_line .jo_l_tx { min-width: 0; }
.jo_line b { display: block; font-size: 13px; font-weight: 800; line-height: 1.35; }
.jo_line small { display: block; font-size: 11.5px; color: var(--dim); margin-top: 2px; line-height: 1.45; }
.jo_line .jo_qty { margin: 0; }
.jo_del { border: 0; background: none; color: var(--dim); font-size: 14px; cursor: pointer; padding: 4px 6px; }
.jo_del:hover { color: var(--hot); }
.jo_sum { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0 6px; font-size: 13px; }
.jo_sum b { font-family: var(--font-label); color: var(--orange-deep); }

/* 주문서 폼 */
.jo_form { margin-top: 14px; border-top: 2px solid var(--line-strong); padding-top: 14px; }
.jo_note { font-size: 12px; color: var(--body); background: rgba(245,166,35,.15); border-left: 3px solid var(--orange-deep); padding: 8px 11px; margin: 0 0 12px; line-height: 1.55; }
.jo_form label { display: block; font-size: 12px; font-weight: 700; color: var(--body); margin-bottom: 9px; }
.jo_form label i { font-style: normal; color: var(--orange-deep); }
.jo_form input[type=text], .jo_form input[type=tel], .jo_form input[type=email], .jo_form input[type=date], .jo_form textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid var(--line-strong); background: var(--bg); font: 400 13.5px var(--font); color: var(--ink); }
.jo_form textarea { resize: vertical; }
.jo_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.jo_grid label:first-child { grid-column: 1 / -1; }
.jo_hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* 허니팟 — 사람에겐 보이지 않는다 */
.jo_agree { display: flex !important; gap: 8px; align-items: flex-start; font-weight: 600 !important; line-height: 1.5; cursor: pointer; }
.jo_agree input { margin: 3px 0 0; accent-color: var(--orange-deep); flex: none; }
.jo_agree a { color: var(--orange-deep); font-weight: 800; }
.jo_btns { display: flex; gap: 8px; margin-top: 6px; }
.jo_send { flex: 1; border: 1px solid var(--gold2); background: var(--gold2); color: var(--on-gold); font-family: inherit; font-weight: 900; font-size: 14.5px; padding: 13px 0; cursor: pointer; }
.jo_send:hover { filter: brightness(1.08); }
.jo_send:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.jo_clear { border: 1px solid var(--line-strong); background: var(--bg); font-family: inherit; padding: 0 14px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.jo_clear:hover { border-color: var(--hot); color: var(--hot); }
.jo_fine { margin: 10px 0 0; font: 500 11px var(--font-label); color: var(--dim); line-height: 1.65; }
.jo_done { text-align: center; padding: 34px 10px; }
.jo_done b { display: block; font-size: 16px; font-weight: 900; margin: 10px 0 6px; line-height: 1.45; }
.jo_done p { font-size: 13px; color: var(--body); line-height: 1.7; margin: 0 0 16px; }
.jo_done a { color: var(--orange-deep); font-weight: 800; }

/* 모바일 — 하단 시트 (site.js 하단 바 54px·로봇 FAB 위에 뜨고, 하단 여백 확보) */
@media (max-width: 760px) {
  #jjorder .jo_panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: calc(100dvh - 48px); border-left: 0; border-top: 1px solid var(--line-strong); box-shadow: 0 -20px 60px rgba(16,14,8,.35); }
  .jo_body { padding: 12px 14px calc(60px + env(safe-area-inset-bottom)); }
  .jo_grid { grid-template-columns: 1fr; }
}

/* 제품 상세 — 주문 CTA + 부속 주문 패널 */
.mo_cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.mo_cta small { font-size: 11.5px; color: var(--dim); flex: 1 1 160px; }
.mo_btn { display: inline-block; border: 1px solid var(--orange-deep); background: var(--orange-deep); color: var(--on-gold); font-family: inherit; font-weight: 800; font-size: 13.5px; padding: 11px 18px; cursor: pointer; text-decoration: none; }
.mo_btn:hover { background: var(--hot); border-color: var(--hot); color: var(--on-gold); }
.mo_btn.ghost { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.mo_btn.ghost:hover { background: var(--gold2); border-color: var(--gold2); color: var(--on-gold); }
.mo_sm { border: 1px solid var(--line-strong); background: none; color: var(--ink); font-family: inherit; padding: 8px 13px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.mo_sm:hover { border-color: var(--orange-deep); color: var(--orange-deep); }
.mo_sm.hot { background: var(--orange-deep); border-color: var(--orange-deep); color: var(--on-gold); }
.mo_sm.hot:hover { background: var(--hot); border-color: var(--hot); color: var(--on-gold); }
.mo_sm:disabled { opacity: .45; cursor: not-allowed; }
.mo_sm [data-cartn] { color: var(--orange-deep); font-family: var(--font-label); }
.mo_parts { margin-top: 18px; border: 1px solid var(--line); background: var(--bg); padding: 14px 16px 16px; }
.mo_parts > em { display: block; font-style: normal; font: 700 10.5px var(--font-label); letter-spacing: 2px; color: var(--gold); margin-bottom: 6px; }
.mo_parts > p { font-size: 12.5px; color: var(--dim); margin: 0 0 10px; }
.mo_qhead, .mo_qrow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 68px 30px; gap: 6px; align-items: center; }
.mo_qhead { font-size: 11px; font-weight: 700; color: var(--dim); margin-bottom: 4px; }
.mo_qrow { margin-bottom: 6px; }
.mo_qrow input { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid var(--line-strong); background: var(--bg); font: 600 13px var(--font); color: var(--ink); }
.mo_qrow input[type=number] { text-align: center; -moz-appearance: textfield; }
.mo_qrow input::-webkit-outer-spin-button, .mo_qrow input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mo_qrow button { border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 13px; padding: 6px 0; }
.mo_qrow button:hover { color: var(--hot); }
.mo_qbtns { display: flex; gap: 6px; justify-content: flex-end; margin: 4px 0 14px; }
.mo_acc { border-top: 1px dashed var(--line); padding-top: 12px; }
.mo_acc_tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.mo_acc_tabs::-webkit-scrollbar { display: none; }
.mo_acc_tabs button { flex: 0 0 auto; display: flex; gap: 5px; align-items: center; border: 1px solid var(--line); background: none; color: var(--ink); font-family: inherit; padding: 6px 11px; font-weight: 700; font-size: 12px; cursor: pointer; }
.mo_acc_tabs button small { font-size: 10.5px; color: var(--dim); }
.mo_acc_tabs button.on { background: var(--orange); border-color: var(--gold2); color: var(--on-gold); }
.mo_acc_tabs button.on small { color: rgba(20,18,13,.72); }
.mo_acc_tbl { max-height: 220px; overflow: auto; border: 1px solid var(--line); }
.mo_acc_tbl table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mo_acc_tbl th { position: sticky; top: 0; z-index: 1; background: var(--dark); color: var(--ink); font-size: 11px; padding: 7px 10px; text-align: left; white-space: nowrap; }
.mo_acc_tbl td { padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mo_acc_tbl tbody tr { cursor: pointer; }
.mo_acc_tbl tbody tr:hover { background: rgba(255,255,255,.05); }
.mo_acc_tbl tr.sel td { background: rgba(245,166,35,.15); }
.mo_acc_tbl .code { font-family: var(--font-display); font-weight: 700; }
.mo_acc_ft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.mo_acc_ft > span { flex: 1 1 140px; min-width: 0; font-size: 12.5px; font-weight: 700; }
.mo_acc_ft .jo_qty { margin: 0; }
@media (max-width: 560px) {
  .mo_qhead, .mo_qrow { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) 56px 26px; }
  .mo_cta .mo_btn { flex: 1 1 100%; text-align: center; }
}

/* 조립도 카드 — 이 구성 주문 문의 */
.asm_order { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; padding: 10px 12px; background: rgba(245,166,35,.15); border-left: 3px solid var(--orange-deep); }
.asm_order small { font-size: 11.5px; color: var(--body); flex: 1 1 200px; }


/* ── 카탈로그 앱 전용 상단 — 승인 시안(다크·골드) 이식 · 한 줄 (2026-09-08) ──
   홈페이지와 별개 제품이라 사업부 메뉴를 두지 않고, 홈페이지 바로가기 하나만 둔다 */
#apphead {
  display: flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 14px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.ah_logo { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; text-decoration: none; min-width: 0; }
.ah_logo img { height: 28px; width: auto; display: block; flex: none; }
.ah_wm {
  font-weight: 800; font-size: 19px; line-height: 1; letter-spacing: .005em; white-space: nowrap; flex: none;
  transform: skewX(-8deg); transform-origin: left bottom;
  /* 워드마크 — 명함 금박 (3안) */
  background: linear-gradient(180deg, #8A5A0B 0%, #C08A1E 16%, #F4DE9A 36%, #FFF6D2 45%, #E5BE55 56%, #B5811C 74%, #F0D488 91%, #8A5A0B 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.ah_tag { font: 700 8.5px/1 var(--font-label); letter-spacing: .2em; color: var(--gold); align-self: center; flex: none; }
.ah_home {
  margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 11px; border: 1px solid rgba(245,166,35,.45);
  font-size: 12.5px; font-weight: 700; color: var(--gold2); text-decoration: none; white-space: nowrap;
}
.ah_home svg { width: 12px; height: 12px; flex: none; }
.ah_home:hover { background: rgba(245,166,35,.12); color: var(--hot); border-color: var(--hot); }
.ah_cart {
  flex: 0 0 auto; position: relative; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: none; color: var(--gold2); cursor: pointer; padding: 0;
}
.ah_cart svg { width: 19px; height: 19px; }
.ah_cart:hover { border-color: var(--gold2); }
/* 주황 · 검정 대각 띠 — 두 제품이 공유하는 회사 시그니처 */
.ah_stripe { height: 7px; background: repeating-linear-gradient(-45deg, var(--stripe) 0 12px, var(--bg) 12px 24px); }
@media (max-width: 340px) {
  #apphead { gap: 7px; padding: 0 11px; }
  .ah_wm { font-size: 17px; }
  .ah_home { padding: 0 9px; gap: 0; font-size: 0; }
  .ah_home svg { width: 15px; height: 15px; }
}

/* 부속자재 표 — 상시 재고 형번 강조 (2026-09-08) */
.dtbl tr.instock td { background: var(--orange-pale); }
.dtbl tr.instock td.code { font-weight: 700; }
.dtbl td.code .bdg.stock { margin-left: 6px; vertical-align: 1px; }


/* ── 다크 전환 보강 (2026-09-08) ── */
/* 도면 · 단면도는 흰 판 위에 올린다 — 어두운 배경에서 선이 사라지지 않게 */
.dpg img, .asm_imgs img, .md_imgs img, .md_one img { background: var(--paper); }
.md_imgs figure, .md_one img { background: var(--paper); }
.md_imgs figcaption { color: var(--on-paper); }   /* 흰 판 안쪽 캡션은 어두운 글자 */
/* 섹션 탭 */
#sectab { background: var(--bg); border-bottom: 1px solid var(--line); }
#sectab a.on { color: var(--gold2); }
#appfoot { border-top: 1px solid var(--line); }
/* 흰 판 위에 얹히는 쪽번호 배지 */
.dpg figcaption { color: var(--dim); }


/* ══════════ 앱 홈 화면 — 승인 시안(app2/Main.dc.html) 이식 (2026-09-08) ══════════ */
.hm_hero { padding: 26px 16px 20px; border-bottom: 1px solid var(--line); }
.hm_eb { font: 700 9.5px/1 var(--font-label); letter-spacing: .2em; color: var(--gold); margin: 0 0 11px; }
.hm_h1 { margin: 0 0 12px; font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1.28; color: var(--ink); }
.hm_lead { margin: 0 0 18px; font-size: 13.5px; line-height: 1.8; color: var(--body); max-width: 640px; }
.hm_stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); max-width: 640px;
}
.hm_stat { background: var(--surface); padding: 13px 10px; }
.hm_stat b { display: block; font: 700 17px/1 var(--font-label); color: var(--ink); }
.hm_stat--hot b { color: var(--gold2); }
.hm_stat span { display: block; font-size: 10.5px; color: var(--dim); margin-top: 4px; }

.hm_nav { padding: 20px 16px 22px; display: flex; flex-direction: column; gap: 10px; }
.hm_stock {
  display: flex; align-items: center; gap: 14px; background: var(--gold2);
  padding: 16px; min-height: 44px; text-decoration: none;
}
.hm_stock_t { flex: 1; min-width: 0; }
.hm_stock_t em { display: block; font: 700 9px/1 var(--font-label); letter-spacing: .16em; color: rgba(20,18,13,.62); margin-bottom: 3px; font-style: normal; }
.hm_stock_t b { display: block; font-size: 16px; font-weight: 800; color: var(--on-gold); }
.hm_stock_t i { display: block; font-size: 11.5px; font-style: normal; color: rgba(20,18,13,.7); margin-top: 3px; }
.hm_stock svg { width: 19px; height: 19px; flex: none; color: var(--on-gold); }
.hm_stock:hover { background: var(--hot); }

.hm_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hm_card {
  border: 1px solid var(--line-strong); background: var(--surface);
  padding: 15px 14px 16px; min-height: 44px; text-decoration: none; display: block;
}
.hm_card em { display: block; font: 700 8.5px/1 var(--font-label); letter-spacing: .16em; color: var(--gold); margin-bottom: 6px; font-style: normal; }
.hm_card b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.hm_card i { display: block; font: 400 11px/1 var(--font-label); font-style: normal; color: var(--dim); margin-top: 5px; }
.hm_card:hover { border-color: var(--gold2); }

.hm_pdf {
  display: flex; align-items: center; gap: 11px; border: 1px solid var(--line);
  padding: 13px 14px; min-height: 44px; text-decoration: none; color: var(--ink);
}
.hm_pdf svg { width: 17px; height: 17px; flex: none; color: var(--gold2); }
.hm_pdf span { flex: 1; font-size: 13.5px; font-weight: 600; }
.hm_pdf i { font: 400 11px var(--font-label); font-style: normal; color: var(--dim); }
.hm_pdf:hover { border-color: var(--gold2); }

.hm_site { padding: 20px 16px 26px; border-top: 1px solid var(--line); background: var(--sunk); }
.hm_site_a {
  display: flex; align-items: center; gap: 12px; border: 1px solid rgba(245,166,35,.45);
  padding: 15px; min-height: 44px; text-decoration: none;
}
.hm_site_a > svg { width: 18px; height: 18px; flex: none; color: var(--gold2); }
.hm_site_a span { flex: 1; min-width: 0; }
.hm_site_a b { display: block; font-size: 14.5px; font-weight: 700; color: var(--gold2); }
.hm_site_a i { display: block; font-size: 11.5px; font-style: normal; color: var(--dim); margin-top: 2px; }
.hm_site_a .hm_site_x { width: 15px; height: 15px; flex: none; color: var(--gold2); }
.hm_site_a:hover { background: rgba(245,166,35,.1); }
.hm_basis { margin: 14px 0 0; font-size: 11px; line-height: 1.7; color: var(--dim); }

@media (min-width: 700px) {
  .hm_hero { padding: 40px 28px 30px; }
  .hm_h1 { font-size: 38px; }
  .hm_lead { font-size: 15px; }
  .hm_nav { padding: 26px 28px 30px; max-width: 940px; }
  .hm_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm_site { padding: 26px 28px 34px; }
  .hm_site_a { max-width: 520px; }
}


/* 섹션 탭 라벨 — 좁은 화면에서는 짧은 표기로 바꿔 한 줄에 다 들어오게 (2026-09-08) */
#sectab .t_s { display: none; }
@media (max-width: 460px) {
  #sectab a { padding: 0 11px; font-size: 13px; }
  #sectab .t_l { display: none; }
  #sectab .t_s { display: inline; }
}


/* ── 주문서 취소 · 환불 제한 고지 (2026-09-08) ── */
.jo_refund { border: 1px solid rgba(245,166,35,.42); background: rgba(245,166,35,.07); padding: 13px 14px 4px; margin: 4px 0 2px; }
.jo_refund_t { margin: 0 0 8px; font-size: 13.5px; font-weight: 800; color: var(--gold2); }
.jo_refund_b { margin: 0 0 11px; font-size: 12px; line-height: 1.75; color: var(--body); }
.jo_refund_b b { color: var(--ink); font-weight: 700; }
.jo_refund .jo_agree { border-top: 1px solid rgba(245,166,35,.3); padding-top: 11px; }
.jo_agree--req span i { color: var(--gold2); font-style: normal; font-weight: 700; }


/* ── 검색 줄 접기 — 시안은 하위 화면에 검색창을 두지 않는다 (2026-09-08) ── */
.ah_icon {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: none; color: var(--ink); cursor: pointer; padding: 0;
}
.ah_icon svg { width: 18px; height: 18px; }
.ah_icon:hover { border-color: var(--gold2); color: var(--gold2); }
.ah_icon[aria-expanded="true"] { border-color: var(--gold2); color: var(--gold2); }
html[data-search="off"] #topbar { display: none; }
/* 검색이 접히면 홈페이지 버튼에 자리가 더 생긴다 */
html[data-search="off"] .ah_home { font-size: 12.5px; }
@media (max-width: 340px) {
  .ah_icon { width: 36px; height: 36px; }
}
.jo_refund_b a { color: var(--gold2); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Premium catalogue — independent product UI; no website styles or chrome. */
body.catalog-app{--font-display:var(--font);padding-bottom:0}
.catalog-app #appchrome{border-bottom:1px solid var(--line)}
.catalog-app #apphead{background:var(--bg);max-width:1180px;margin:auto;padding-left:26px;padding-right:26px}
.catalog-app .ah_wm{font-size:23px}.catalog-app .ah_tag{font-size:8px;letter-spacing:.12em}
.catalog-app .ah_stripe{height:3px}
.catalog-app #topbar{height:66px;background:var(--bg);border:0}
.catalog-app .searchwrap{max-width:1128px;background:var(--surface);padding:12px 16px;border-color:var(--line)}
.catalog-app .searchwrap input{font-size:15px}.catalog-app .searchwrap input::placeholder{color:var(--dim)}
.catalog-app #sectab a{font-weight:500;font-size:13px;border-bottom-width:2px}
.catalog-app #view{padding-top:32px}
.catalog-app .hm_hero{padding:36px 0 34px;border:0}
.catalog-app .hm_eb{font-size:10px;font-weight:400;letter-spacing:.18em;margin-bottom:23px}
.catalog-app .hm_h1{font-size:48px;font-weight:550;line-height:1.2;letter-spacing:-.04em}
.catalog-app .hm_lead{font-size:15px;line-height:1.9;max-width:470px;margin-top:20px;margin-bottom:28px}
.catalog-app .hm_stats{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:none;background:none;gap:0}
.catalog-app .hm_stat{background:none;padding:24px;border-right:1px solid var(--line)}
.catalog-app .hm_stat:first-child{padding-left:0}.catalog-app .hm_stat:last-child{border:0}
.catalog-app .hm_stat b{font-size:25px;font-weight:400;color:var(--ink)}
.catalog-app .hm_stat span{margin-top:8px;font-size:11px}
.catalog-app .hm_nav{padding:0 0 34px;max-width:none;gap:18px}
.catalog-app .hm_stock{background:var(--surface);border:1px solid var(--line-strong);padding:22px 24px;border-left:2px solid var(--gold)}
.catalog-app .hm_stock_t em{color:var(--gold);font-weight:400}.catalog-app .hm_stock_t b{color:var(--ink);font-weight:550;font-size:19px}.catalog-app .hm_stock_t i{color:var(--body);margin-top:6px}.catalog-app .hm_stock svg{color:var(--gold2)}
.catalog-app .hm_stock:hover{background:var(--dark);border-color:var(--gold)}
.catalog-app .hm_grid{gap:16px}.catalog-app .hm_card{padding:26px 22px;border-color:var(--line);background:var(--bg);position:relative}
.catalog-app .hm_card:after{content:'↗';position:absolute;right:18px;top:24px;color:var(--dim);font-size:17px}
.catalog-app .hm_card em{font-weight:400;letter-spacing:.12em}.catalog-app .hm_card b{font-size:18px;font-weight:550;margin-top:16px}.catalog-app .hm_card i{margin-top:12px;font-size:12px}
.catalog-app .hm_card:hover{background:var(--surface);border-color:var(--gold)}
.catalog-app .hm_pdf{padding:18px 22px}.catalog-app .hm_pdf span{font-weight:500}.catalog-app .hm_site{padding:20px 0;background:none}
.catalog-app .hm_basis{margin:0;line-height:1.9}
.catalog-app .vhead h1{font-family:var(--font);font-size:30px;font-weight:550}.catalog-app .vhead p{line-height:1.8;margin-top:10px}
.catalog-app .ah_icon,.catalog-app .ah_cart{border-color:var(--line)}
.catalog-app #appfoot{background:var(--bg);padding:34px 24px}.catalog-app #appfoot .f_logo{width:125px;opacity:.8}
.catalog-app #appfoot .f_info{line-height:1.9}.catalog-app #appfoot .f_info a{text-decoration:underline;text-underline-offset:3px}
.catalog-app #jjai_fab{width:104px;height:42px;right:22px;bottom:22px;padding:0;border:1px solid var(--line-strong);background:var(--surface);filter:none;border-radius:2px;box-shadow:none}
.catalog-app #jjai_fab>svg{display:none}.catalog-app #jjai_fab .b{position:static;transform:none;background:none;display:block;padding:0;color:var(--ink);font:500 12px/40px var(--font);letter-spacing:0;border-radius:0;animation:none}
.catalog-app #jjai_fab:hover{transform:none;border-color:var(--gold2)}.catalog-app #jjai_min{right:16px;bottom:60px;width:22px;height:22px;box-shadow:none}.catalog-app #jjai_mini{border-radius:2px;box-shadow:none}
.catalog-app #jjai_panel{border-radius:3px}.catalog-app #jjai_fab.drop{border-color:var(--gold2)}
.catalog-app .prow{transition:background .15s}.catalog-app .pr_name{font-weight:550}
@media(min-width:900px){.catalog-app .hm_hero{display:grid;grid-template-columns:1fr 1fr;column-gap:90px}.catalog-app .hm_eb,.catalog-app .hm_h1,.catalog-app .hm_lead{grid-column:1}.catalog-app .hm_stats{grid-column:2;grid-row:1/4;align-self:center;grid-template-columns:1fr}.catalog-app .hm_stat{border-right:0;border-bottom:1px solid var(--line);padding:16px 0;display:flex;align-items:center;justify-content:space-between}.catalog-app .hm_stat span{margin:0}}
@media(max-width:760px){body.catalog-app,body.catalog-app.jjai_min{padding-bottom:70px}.catalog-app #apphead{padding-left:16px;padding-right:16px}.catalog-app .ah_wm{font-size:19px}.catalog-app .ah_tag{display:none}.catalog-app #topbar{height:62px;padding:0 16px}.catalog-app .searchwrap{padding:10px 12px}.catalog-app .searchwrap input{font-size:13px}.catalog-app #sectab a{padding:0 12px;font-size:12px}.catalog-app #view{padding:20px 18px 40px}.catalog-app .hm_hero{padding:20px 0 28px}.catalog-app .hm_eb{font-size:9px;margin-bottom:18px}.catalog-app .hm_h1{font-size:34px;line-height:1.25}.catalog-app .hm_lead{font-size:13px;margin-top:18px;line-height:1.85}.catalog-app .hm_stat{padding:17px 12px}.catalog-app .hm_stat b{font-size:20px}.catalog-app .hm_stat span{font-size:10px}.catalog-app .hm_nav{gap:14px}.catalog-app .hm_stock{padding:18px}.catalog-app .hm_stock_t b{font-size:16px}.catalog-app .hm_stock_t i{font-size:11px}.catalog-app .hm_grid{gap:12px}.catalog-app .hm_card{padding:20px 16px}.catalog-app .hm_card b{font-size:16px}.catalog-app .hm_card em{font-size:8px}.catalog-app .hm_card:after{right:12px;top:17px}.catalog-app .hm_pdf{padding:16px 12px}.catalog-app .hm_pdf span{font-size:12px}.catalog-app .hm_pdf i{font-size:9px}.catalog-app .vhead h1{font-size:25px}.catalog-app #jjai_fab{right:12px;bottom:76px;width:94px;height:38px}.catalog-app #jjai_fab .b{line-height:36px;font-size:11px}.catalog-app #jjai_min{right:6px;bottom:109px}.catalog-app #jjai_mini{bottom:76px}.catalog-app #jjai_panel{bottom:70px;max-height:calc(100dvh - 95px)}}
@media(prefers-reduced-motion:reduce){.catalog-app .prow{transition:none}}