@import url("../fonts/fonts.css");
/* ============================================================
   JJTECH Catalogue 웹앱 — Ivory Atelier 재도장
   ============================================================ */
:root {
  --gold: #B4540A;
  --gold2: #B4540A;
  --dark: #17150F;
  --ink: #17150F;
  --dim: #8A8477;
  --line: rgba(0, 0, 0, 0.10);
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --topbar-h: 56px;
  --sectab-h: 58px;
  --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); }

/* ── 상단바 ── */
#appchrome { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
#topbar {
  position: static; height: var(--topbar-h);
  background: var(--bg); 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: #fff; border: 1px solid rgba(28,25,19,.3);
  border-radius: 0; padding: 7px 12px; transition: border-color .2s;
}
.searchwrap:focus-within { border-color: #E8890A; }
.searchwrap svg { width: 16px; height: 16px; color: #8A8477; 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: #9a948a; }
.searchwrap kbd {
  font-size: 11px; color: #8A8477; border: 1px solid rgba(28,25,19,.3);
  border-radius: 4px; 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: #FBFAF7; }

/* ── 섹션 탭바 ── */
#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; }
html.embedded #sectab a[data-tab="home"] { display: none; }
#sectab::-webkit-scrollbar { display: none; }
#sectab a {
  flex: 0 0 auto; display: flex; align-items: center; padding: 0 19px;
  font-size: 15px; font-weight: 700; color: #5C574B;
  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: #E8890A; }

/* ── 메인 ── */
#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(23,21,15,0.08); 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: #5C574B;
}
.chips a:hover { border-color: var(--gold); }
.chips a.on { background: var(--dark); border-color: var(--dark); color: #FBFAF7; }
/* 제품 목록 — 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: #F6F6F5; }
.pr_th { width: 56px; height: 42px; object-fit: contain; background: #F7F7F6; 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: #F6F6F5; color: var(--ink); font-family: var(--font-display); }
.bdg.g1 { background: var(--gold2); color: #FBFAF7; }
.bdg.g2 { background: var(--dark); color: #FBFAF7; }
.bdg.g3 { background: #8A8477; color: #FBFAF7; }
.bdg.stock { background: #F7E4CB; color: #B4540A; border: 1px solid #D98E4E; }

/* 다이스북 섹션 카드 랜딩 */
.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(23,21,15,0.08); 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: #FFFFFF; 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: 999px; font-size: 12px; font-weight: 600; color: #5C574B; white-space: nowrap;
}
.secpills a:hover { border-color: var(--gold); color: var(--ink); }
.secpills a.on { background: var(--gold); border-color: var(--gold); color: #FBFAF7; 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: #FBFAF7; 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: #FBFAF7;
  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 rgba(23,21,15,0.08); white-space: nowrap; }
.dtbl tbody tr { cursor: pointer; }
.dtbl tbody tr:hover { background: #F7F7F6; }
.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: #F7F7F6; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.more_btn:hover { background: #F6F6F5; }

/* 조립도 */
.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 rgba(23,21,15,0.08); }
.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: #FBFAF7; }

/* 재고 */
.note {
  border-left: 3px solid var(--gold); background: #F7E4CB; 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 rgba(23,21,15,0.08); cursor: pointer; font-size: 13.5px;
}
.sr_row:last-child { border-bottom: 0; }
.sr_row:hover { background: #F7F7F6; }
.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: #FBFAF7; }
#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: #D98E4E; }
#appfoot a:hover { color: #FBFAF7; }
#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: #FBFAF7; 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: #F7F7F6; font-weight: 600; }
.spec th, .spec td { padding: 8px 13px; border: 1px solid rgba(23,21,15,0.08); }

/* ── 토스트 ── */
#app_toast {
  position: fixed; left: 50%; bottom: 34px; z-index: 5000;
  transform: translateX(-50%) translateY(10px);
  background: var(--dark); color: #FBFAF7; 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: #D98E4E; }
#install_bar #ib_add {
  flex: 0 0 auto; border: 0; background: var(--gold); color: #FBFAF7;
  font-weight: 700; font-size: 12.5px; padding: 8px 15px; cursor: pointer;
}
#install_bar #ib_add:hover { background: #E8450A; }
#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: #FBFAF7; }
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: #FBFAF7; 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: #FBFAF7; 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(--gold);border-color:var(--gold);color:#fff}
.acc_tabs a.on small{color:rgba(255,255,255,.8)}

/* 상단바 견적 문의 버튼 (2026-09-01) */
.tb_quote{flex:0 0 auto;margin-left:auto;border:0;background:#E8890A;color:#1A1509;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 rgba(0,0,0,.12);background:#fff;transition:box-shadow .18s,transform .18s}
.pcat:hover{box-shadow:0 12px 30px rgba(0,0,0,.10);transform:translateY(-2px)}
.pcat_im{height:190px;overflow:hidden;background:#F2F2F0}
.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 rgba(0,0,0,.12);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:#F5A623;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 #1C1913}
.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:#1C1913;color:#F5A623;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 rgba(0,0,0,.2)}
.pcat_perf i.g1{background:#E8890A;border-color:#E8890A;color:#1A1509}
@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: #3D3A31; max-width: 780px; margin: 0 0 16px; }
.ha_btn { display: inline-block; background: #1C1913; color: #F5A623; font: 700 12px var(--font-label); letter-spacing: 1.5px; padding: 11px 18px; }
.ha_btn:hover { background: #E8890A; color: #1A1509; }
.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 rgba(23,21,15,.35); padding: 9px 14px; font: 600 12px var(--font-label); color: #1C1913; margin: 0 -1px -1px 0; }
.hl_btns a:hover { background: #E8890A; color: #17150F; }
.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: #1C1913; 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: #F5A623; 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: #E8890A; color: #1A1509; 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: #E8890A; color: #F5A623; }
.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, rgba(23,21,15,.3)); background: var(--card); color: var(--ink, #17150F); font-size: 12.5px; font-weight: 700; padding: 9px 14px; }
.dr_b a:hover { border-color: #E8890A; color: #B4540A; }
.dr_b a.hot { background: #1C1913; color: #F5A623; border-color: #1C1913; }
@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: #FBFAF7; 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 rgba(23,21,15,.35); background: #fff; color: #17150F; font-size: 12.5px; font-weight: 700; padding: 10px 12px; text-align: center; }
.md_docs .md_docs_in a:first-of-type { background: #1C1913; color: #F5A623; border-color: #1C1913; }
.md_docs .md_docs_in a:hover { border-color: #E8890A; }