/* ============================================================
   extra.css - 수정본(Node/EJS)에서 추가된 동적 컴포넌트 스타일
   (원본 style.css 와 충돌하지 않도록 신규 클래스만 정의)
   ============================================================ */

:root {
  --point: #b08d57;     /* 골드 포인트 */
  --dark: #1a1a1a;
  --line: #e3e3e3;
  --gray: #777;
  --red: #c0392b;
}

.txt_red { color: var(--red); }

/* 가로 스크롤(오버플로) 방지 — 모바일 레이아웃 깨짐 차단 */
html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; }

/* 푸터 우측 컬럼 글자 깨짐(전화번호 줄 중간 끊김) 보완 */
footer .inner .footer_content { gap: 40px; align-items: flex-start; }
footer .inner .footer_content .footer_info { flex: 1; min-width: 0; }
footer .inner .footer_content .footer_others { width: auto; flex: none; gap: 40px; }
footer .footer_center h2 { font-size: 20px; line-height: 1.45; white-space: nowrap; }
footer .footer_center p,
footer .footer_account p { white-space: nowrap; }
footer .footer_content .footer_others h3 { white-space: nowrap; }

/* 공통 버튼 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 13px 30px;
  font-size: 15px;
  letter-spacing: 0.02em;
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid var(--dark);
  background: #fff;
  color: var(--dark);
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn_dark:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
.btn_dark { background: var(--dark); color: #fff; }
.btn_dark:hover { background: #000; }
.btn_line:hover { background: var(--dark); color: #fff; }

/* ===================== 제품 목록 ===================== */
.prd_list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 24px;
  margin-top: 20px;
}
.prd_list .empty { grid-column: 1 / -1; text-align: center; color: var(--gray); padding: 80px 0; }
.prd_item {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.prd_item:hover { transform: translateY(-7px); box-shadow: 0 18px 38px rgba(30,22,12,.12); }
.prd_item a { display: block; }
.prd_thumb {
  position: relative;
  overflow: hidden;
  background: #f6f4f1;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
.prd_thumb img { max-width: 76%; max-height: 76%; transition: transform 0.55s ease; }
.prd_item a:hover .prd_thumb img { transform: scale(1.08); }
.prd_thumb::after {
  content: "자세히 보기 →"; position: absolute; left: 0; right: 0; bottom: 0; padding: 42px 0 16px;
  text-align: center; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .03em;
  background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0));
  opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.prd_item a:hover .prd_thumb::after { opacity: 1; transform: translateY(0); }
.prd_badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 4px; z-index: 3; }
.badge { font-size: 11px; color: #fff; padding: 3px 8px; border-radius: 2px; letter-spacing: 0.04em; }
.badge_best { background: #1a1a1a; }
.badge_new { background: var(--point); }
.badge_rec { background: var(--red); }
.prd_info { padding: 18px 16px 20px; text-align: center; }
.prd_name { font-size: 16px; font-weight: 600; color: #222; }
.prd_summary { font-size: 12.5px; color: var(--gray); margin-top: 7px; line-height: 1.5; min-height: 2.6em; }
.prd_price { margin-top: 12px; font-size: 16px; }
.prd_price s { color: #b6b6b6; font-size: 13px; margin-right: 6px; }
.prd_price strong { color: var(--point); font-weight: 700; font-size: 17px; }

/* 메인 상품 영역에서도 동일 그리드 사용 */
.main_product .prd_list { margin-top: 50px; }

/* ===================== 제품 상세 ===================== */
.prd_view { display: flex; gap: 56px; align-items: flex-start; margin-top: 20px; }
.prd_view_img {
  flex: 0 0 46%;
  background: #f6f4f1; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1;
}
.prd_view_img img { max-width: 75%; max-height: 75%; }
.prd_view_info { flex: 1; padding-top: 10px; }
.prd_view_en { color: var(--point); letter-spacing: 0.1em; font-size: 14px; }
.prd_view_name { font-size: 30px; font-weight: 700; margin: 10px 0 14px; color: #1a1a1a; }
.prd_view_summary { color: var(--gray); font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
.prd_view_table { width: 100%; border-top: 2px solid var(--dark); margin-bottom: 28px; }
.prd_view_table th, .prd_view_table td { padding: 14px 6px; border-bottom: 1px solid var(--line); font-size: 15px; text-align: left; }
.prd_view_table th { width: 110px; color: #555; font-weight: 500; }
.prd_view_table s { color: #aaa; margin-right: 8px; }
.prd_view_btns { display: flex; gap: 10px; }
.prd_view_detail { margin-top: 80px; border-top: 1px solid var(--line); padding-top: 50px; }
.detail_tit { font-size: 20px; font-weight: 700; margin: 30px 0 16px; padding-left: 12px; border-left: 3px solid var(--point); }
.detail_content { font-size: 15px; line-height: 1.9; color: #444; }

/* ===================== 게시판 - 리스트형 ===================== */
.board_list { width: 100%; border-top: 2px solid var(--dark); margin-top: 10px; border-collapse: collapse; }
.board_list th, .board_list td { padding: 16px 10px; border-bottom: 1px solid var(--line); font-size: 15px; text-align: center; }
.board_list thead th { background: #faf8f5; color: #444; font-weight: 500; }
.board_list .col_title { text-align: left; }
.board_list .col_title a:hover { color: var(--point); text-decoration: underline; }
.board_list tr.is_notice { background: #fcfaf6; }
.board_list tr.is_notice .col_no { color: var(--red); font-weight: 700; }
.board_list .empty { padding: 70px 0; color: var(--gray); }

/* ===================== 게시판 - 갤러리형 ===================== */
.gallery_list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 10px; }
.gallery_list .empty { grid-column: 1/-1; text-align: center; color: var(--gray); padding: 70px 0; }
.gallery_thumb { overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--line); background: #f6f4f1; }
.gallery_thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.gallery_item a:hover .gallery_thumb img { transform: scale(1.06); }
.gallery_info { padding: 14px 4px; }
.gallery_title { font-size: 16px; font-weight: 500; color: #222; }
.gallery_date { font-size: 13px; color: var(--gray); }

/* ===================== FAQ 아코디언 ===================== */
.faq_list { border-top: 2px solid var(--dark); margin-top: 10px; }
.faq_item { border-bottom: 1px solid var(--line); }
.faq_q { display: flex; align-items: center; gap: 16px; padding: 22px 14px; cursor: pointer; }
.faq_q .q_ico { width: 32px; height: 32px; line-height: 32px; text-align: center; background: var(--dark); color: #fff; border-radius: 50%; font-weight: 700; flex: none; }
.faq_q .q_txt { flex: 1; font-size: 16px; font-weight: 500; }
.faq_q .q_arrow { width: 12px; height: 12px; border-right: 2px solid #999; border-bottom: 2px solid #999; transform: rotate(45deg); transition: 0.2s; }
.faq_q.on .q_arrow { transform: rotate(-135deg); }
.faq_a { display: flex; gap: 16px; padding: 22px 14px; background: #faf8f5; }
.faq_a .a_ico { width: 32px; height: 32px; line-height: 32px; text-align: center; background: var(--point); color: #fff; border-radius: 50%; font-weight: 700; flex: none; }
.faq_a .a_txt { flex: 1; font-size: 15px; line-height: 1.8; color: #444; }

/* ===================== 게시판 상세 ===================== */
.board_view { border-top: 2px solid var(--dark); margin-top: 10px; }
.board_view_head { padding: 24px 14px; border-bottom: 1px solid var(--line); }
.view_title { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.view_meta { color: var(--gray); font-size: 14px; }
.view_meta span { margin-right: 18px; }
.view_image { text-align: center; padding: 30px 0; }
.view_image img { max-width: 100%; }
.board_view_body { padding: 30px 14px 60px; font-size: 15px; line-height: 1.9; color: #444; min-height: 160px; }
.view_q { font-size: 17px; margin-bottom: 18px; }
.view_a { background: #faf8f5; padding: 20px; line-height: 1.8; }

/* ===================== 폼 (글쓰기 / 문의) ===================== */
.board_form { margin-top: 10px; }
.form_guide { color: var(--gray); margin-bottom: 24px; font-size: 15px; }
.form_table { width: 100%; border-top: 2px solid var(--dark); border-collapse: collapse; }
.form_table th, .form_table td { padding: 16px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.form_table th { width: 150px; background: #faf8f5; font-weight: 500; color: #444; }
.form_table th em { color: var(--red); font-style: normal; }
.form_table input[type="text"], .form_table input[type="email"], .form_table input[type="password"], .form_table textarea {
  width: 100%; max-width: 520px; padding: 11px 12px; border: 1px solid #ccc; border-radius: 2px; font-size: 15px; font-family: inherit;
}
.form_table textarea { max-width: 100%; resize: vertical; }
.form_agree { display: block; margin: 22px 0; font-size: 14px; color: #555; }
.form_agree input { margin-right: 8px; }
.form_error { background: #fdecea; color: var(--red); padding: 14px 18px; border-radius: 3px; margin-bottom: 20px; font-size: 14px; }

/* ===================== 페이지네이션 / 버튼영역 ===================== */
.board_paging { text-align: center; margin: 40px 0 10px; }
.board_paging a { display: inline-block; min-width: 38px; padding: 9px 0; margin: 0 3px; border: 1px solid var(--line); color: #555; border-radius: 2px; }
.board_paging a.on, .board_paging a:hover { background: var(--dark); color: #fff; border-color: var(--dark); }
.board_btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 36px; }

/* ===================== 회원 인증 카드(로그인/가입/마이페이지) ===================== */
.partner_auth { max-width: 560px; margin: 0 auto; }
.partner_welcome { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #faf8f5; border: 1px solid var(--line); border-radius: 6px; padding: 18px 22px; margin-bottom: 30px; }
.partner_welcome p { font-size: 16px; }
.footer_admin { opacity: 0.5; }
.ref_banner { background: #f3efe7; border: 1px solid #e4dcc9; color: #7a6a45; border-radius: 6px;
  padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.ref_banner span { color: #a99; font-size: 13px; }

/* ===================== 파트너센터 (전용 대시보드) ===================== */
.pc_code { padding: 2px 10px; border-radius: 5px; letter-spacing: 1px; }

.pc_cards { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; margin: 22px 0; }
.pc_card { background: #fff; border: 1px solid #e6e8ec; border-radius: 8px; padding: 20px; text-align: center; }
.pc_card.highlight { background: #fff; border-color: #e6d6b8; }
.pc_label { display: block; font-size: 13px; color: var(--gray); margin-bottom: 10px; }
.pc_value { font-size: 26px; font-weight: 700; color: #1a1a1a; }
.pc_value em { font-size: 14px; font-weight: 400; color: #888; margin-left: 3px; font-style: normal; }
.pc_card.highlight .pc_value { color: var(--point); }

.pc_panel { background: #fff; border: 1px solid #e6e8ec; border-radius: 8px; padding: 24px 26px; margin-bottom: 22px; }
.pc_panel_tit { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.pc_panel_tit i { color: var(--point); margin-right: 8px; }
.pc_panel_desc { color: var(--gray); font-size: 13px; margin-bottom: 18px; }
.pc_empty { color: var(--gray); padding: 26px 0; text-align: center; }

.pc_ref { margin-bottom: 14px; }
.pc_ref label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; font-weight: 500; }
.pc_copy { display: flex; gap: 8px; }
.pc_copy input { flex: 1; padding: 11px 13px; border: 1px solid #d4d7dd; border-radius: 5px; font-size: 13px; background: #fafbfc; color: #555; }
.pc_copy .btn { white-space: nowrap; padding: 0 20px; }

.pc_cards4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* 출금 신청 폼 */
.wd_form { max-width: 760px; }
.wd_field { margin-bottom: 18px; }
.wd_field > label { display: block; font-size: 13px; font-weight: 500; color: #555; margin-bottom: 8px; }
.wd_field > label em { color: var(--red); font-style: normal; }
.wd_field input { width: 100%; padding: 12px 14px; border: 1px solid #d4d7dd; border-radius: 7px; font-size: 14px; font-family: inherit; background: #fff; transition: border-color .15s, box-shadow .15s; }
.wd_field input:focus { outline: none; border-color: var(--point); box-shadow: 0 0 0 3px rgba(176,141,87,.14); }
.wd_amount { display: flex; gap: 10px; }
.wd_inwrap { position: relative; flex: 1; }
.wd_inwrap input { padding-right: 38px; text-align: right; font-weight: 700; font-size: 18px; letter-spacing: .3px; }
.wd_unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #888; font-size: 14px; pointer-events: none; }
.wd_max { flex: none; white-space: nowrap; padding: 0 22px; border-radius: 7px; }
.wd_hint { font-size: 13px; color: #8a909a; margin-top: 8px; }
.wd_hint b { color: var(--point); font-weight: 700; }
.wd_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.wd_grid .wd_field { margin-bottom: 0; }
.wd_grid .full { grid-column: 1 / -1; }
.wd_actions { margin-top: 24px; }
.wd_actions .btn { min-width: 160px; }
.wd_notice { background: #eef2f7; border: 1px solid #dbe3ec; color: #4a5663; border-radius: 7px; padding: 12px 15px; font-size: 13px; line-height: 1.6; margin-bottom: 18px; }
.wd_notice i { color: var(--point); margin-right: 6px; }
.wd_notice b { color: #23272f; }
.wd_notice span { color: #8a909a; }
.wd_calc { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 12px; padding: 12px 16px; background: #f7f8fa; border: 1px solid #eceef1; border-radius: 7px; font-size: 13px; color: #666; }
.wd_calc b { color: #23272f; font-weight: 700; margin-left: 4px; }
.wd_calc_net b { color: var(--point); }
@media (max-width: 620px) { .wd_grid { grid-template-columns: 1fr; } }

.pc_table { width: 100%; border-collapse: collapse; }
.pc_table th, .pc_table td { padding: 10px 8px; border-bottom: 1px solid #eef0f3; font-size: 13px; text-align: left; }
.pc_table thead th { color: #888; font-weight: 500; }
.pc_table .pc_amt { color: #1e7d39; font-weight: 700; text-align: right; }

/* 패널 헤더(타이틀 + 트리 컨트롤) */
.pc_panel_bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pc_panel_bar .pc_panel_tit { margin-bottom: 6px; }
.tree_ctrl { display: flex; gap: 6px; }
.sm_btn { padding: 6px 14px; font-size: 12px; border-radius: 16px; white-space: nowrap; }

/* 링크처럼 보이는 로그아웃 버튼(POST 폼용) */
.logout_btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }

/* ===================== 하부 조직도 (2가지 뷰: 목록형/조직도형) ===================== */
.orgchart_wrap { overflow-x: auto; margin-top: 18px; padding: 30px 12px 26px;
  background: #fafbfc; border: 1px solid #e6e8ec; border-radius: 6px; }

/* ----- 노드 공통 ----- */
.orgnode { position: relative; vertical-align: top; text-align: left; white-space: normal;
  padding: 16px 18px 17px; background: #fff; border: 1px solid #e2e5ea; border-radius: 6px;
  transition: border-color .15s, box-shadow .15s; }
.orgnode:hover { border-color: #c4cad3; box-shadow: 0 3px 12px rgba(35,39,47,.07); }
.orgnode_head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.orgnode_name { font-size: 14.5px; font-weight: 600; color: #23272f; letter-spacing: -.2px; }
.orgnode_lv { flex: none; font-size: 10.5px; font-weight: 500; color: #9298a2; letter-spacing: .4px; }
.orgnode_mgr { font-size: 12.5px; color: #8a909a; margin-top: 6px; }
.orgnode_st { font-size: 10px; color: #b07d1e; border: 1px solid #e7d3a8; border-radius: 2px; padding: 0 5px; margin-left: 5px; }
.orgnode_meta { font-size: 11.5px; color: #9298a2; letter-spacing: .1px;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid #eef0f3; }

/* 단계별 좌측 띠 (의사요소 — 테두리/호버와 독립) */
.orgnode { --band: var(--point); }
.orgnode.lv1 { --band: #c8a16a; }
.orgnode.lv2 { --band: #6f8f86; }
.orgnode.lv3 { --band: #9b8499; }
.orgnode.lv4 { --band: #a9776a; }
.orgnode.is_me { --band: var(--point); }
.orgnode::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px;
  background: var(--band); border-radius: 6px 0 0 6px; }

/* 내 노드(루트) — 플랫 차콜 */
.orgnode.is_me { background: #23272f; border-color: #23272f; }
.orgnode.is_me .orgnode_name { color: #fff; }
.orgnode.is_me .orgnode_lv { color: #b08d57; }
.orgnode.is_me .orgnode_mgr { color: #a7adb7; }
.orgnode.is_me .orgnode_meta { color: #9298a2; border-top-color: rgba(255,255,255,.12); }

/* 토글 공통 */
.orgnode .tnode_toggle { position: absolute; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid #d4d7dd; background: #fafbfc; color: #8a909a; font-size: 9px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s; z-index: 2; }
.orgnode .tnode_toggle:hover { color: var(--point); border-color: var(--point); }
.orgnode.is_me .tnode_toggle { background: #23272f; border-color: #3a4049; color: #b08d57; }

/* ============ 모드 ①: 조직도형 (하향식) ============ */
.orgchart { display: inline-block; min-width: 100%; padding: 0 16px; }
.pc_chart { text-align: center; white-space: nowrap; }
.pc_chart ul { display: flex; justify-content: center; align-items: flex-start; margin: 0; padding: 30px 0 0; list-style: none; position: relative; }
.pc_chart li { list-style: none; position: relative; padding: 30px 1px 0;
  display: flex; flex-direction: column; align-items: center; } /* 자식들 위 중앙정렬 → 연결선이 각 박스 가로중앙에 */
.pc_chart li::before, .pc_chart li::after {
  content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 30px; border-top: 1px solid #d4d7dd; }
.pc_chart li::after { right: auto; left: 50%; border-left: 1px solid #d4d7dd; }
.pc_chart li:only-child::before, .pc_chart li:only-child::after { display: none; }
.pc_chart li:only-child { padding-top: 30px; }
.pc_chart li:first-child::before, .pc_chart li:last-child::after { border: 0; }
.pc_chart li:last-child::before { border-right: 1px solid #d4d7dd; }
.pc_chart ul ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 30px; border-left: 1px solid #d4d7dd; }
.pc_chart .orgchart_root, .pc_chart .orgchart_root > li { padding-top: 0; }
.pc_chart .orgchart_root > li::before, .pc_chart .orgchart_root > li::after { display: none; }
.pc_chart .orgnode { display: block; width: 196px; }
.pc_chart .orgnode_name, .pc_chart .orgnode_mgr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc_chart .orgnode .tnode_toggle { left: 50%; bottom: -11px; transform: translateX(-50%); }
.pc_chart li.collapsed > ul { display: none; }
.pc_chart li.collapsed > .orgnode .tnode_toggle { transform: translateX(-50%) rotate(180deg); }

/* ============ 모드 ②: 목록형 (들여쓰기) ============ */
.pc_list { display: block; text-align: left; }
.pc_list ul { list-style: none; margin: 0; padding: 0; }
.pc_list .orgchart_level { padding-left: 32px; }
.pc_list .orgchart_root { padding-left: 4px; }
.pc_list li { position: relative; padding-left: 30px; }
.pc_list li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid #d4d7dd; }
.pc_list li:last-child::before { bottom: auto; height: 44px; }
.pc_list li::after { content: ""; position: absolute; left: 0; top: 44px; width: 24px; border-top: 1px solid #d4d7dd; }
.pc_list .orgchart_root > li { padding-left: 0; }
.pc_list .orgchart_root > li::before, .pc_list .orgchart_root > li::after { display: none; }
.pc_list .orgnode { display: inline-block; width: auto; min-width: 240px; max-width: 380px; margin: 7px 0; }
.pc_list .orgnode .tnode_toggle { left: -13px; top: 44px; transform: translateY(-50%); }
.pc_list li.collapsed > ul { display: none; }
.pc_list li.collapsed > .orgnode .tnode_toggle { transform: translateY(-50%) rotate(180deg); }

/* 뷰 전환 / 하단 요약 */
.pc_org_tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.org_viewswitch { display: inline-flex; border: 1px solid #d4d7dd; border-radius: 18px; overflow: hidden; background: #fff; }
.org_viewswitch .vw { border: 0; background: transparent; padding: 6px 15px; font-size: 12.5px; color: #6b7280; cursor: pointer; transition: background .15s, color .15s; }
.org_viewswitch .vw + .vw { border-left: 1px solid #e6e8ec; }
.org_viewswitch .vw.on { background: #23272f; color: #fff; }
.orgchart_legend { display: flex; align-items: center; justify-content: flex-end; gap: 22px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #e6e8ec; font-size: 12.5px; color: #8a909a; }
.orgchart_legend_sum b { color: #23272f; font-weight: 600; }

/* ===================== 쇼핑(장바구니/주문/결제) ===================== */
.prd_qty { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; }
.prd_qty label { font-size: 14px; color: #555; }
.prd_qty input { width: 80px; padding: 9px; border: 1px solid #d4cfc2; border-radius: 5px; text-align: center; font-size: 14px; }
.hd_cart { position: relative; }
.hd_cart .hd_cart_n { display: inline-block; margin-left: 4px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--point); color: #fff; border-radius: 9px; font-size: 11px; line-height: 17px; text-align: center;
  font-weight: 700; vertical-align: middle; }

/* 헤더 로그인/유틸 영역: 우측 상단 2줄 정렬 (데스크톱) */
header nav .inner .header_login { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; line-height: 1.2; }
header nav .inner .header_login .hl_row { display: flex; align-items: center; }
header nav .inner .header_login .hl_top { gap: 12px; }
header nav .inner .header_login .hl_user { font-size: 13px; color: #555; }
header nav .inner .header_login .hl_user b { color: var(--point); font-weight: 700; }
header nav .inner .header_login .hl_top .logout_btn { font-size: 12px; color: #aaa; transition: color .2s; }
header nav .inner .header_login .hl_top .logout_btn:hover { color: #666; }
header nav .inner .header_login .hl_links a { position: relative; font-size: 13px; color: #666; padding: 0 12px; transition: color .2s; }
header nav .inner .header_login .hl_links a:first-child { padding-left: 0; }
header nav .inner .header_login .hl_links a:last-child { padding-right: 0; }
header nav .inner .header_login .hl_links a + a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 11px; background: #dcdcdc; }
header nav .inner .header_login .hl_links a:hover { color: var(--point); }

.cart_table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.cart_table th, .cart_table td { padding: 14px 10px; border-bottom: 1px solid var(--line); font-size: 14px; text-align: center; vertical-align: middle; }
.cart_table thead th { color: #888; font-weight: 500; background: #faf8f5; }
.cart_prd { display: flex; align-items: center; gap: 14px; text-align: left; }
.cart_prd img { width: 60px; height: 60px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; background: #f6f4f1; }
.cart_prd a { font-weight: 600; color: #222; }
.cart_qty { display: inline-flex; gap: 6px; align-items: center; }
.cart_qty input { width: 64px; padding: 7px; border: 1px solid #d4cfc2; border-radius: 5px; text-align: center; }
.cart_sub { font-weight: 700; color: var(--point); }
.cart_total { text-align: right; font-size: 16px; padding: 18px 4px; border-top: 2px solid var(--dark); }
.cart_total strong { font-size: 24px; color: var(--point); margin-left: 10px; }

.order_box { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: start; margin: 24px 0; }
.order_summary { background: #faf8f5; border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; }
.order_summary h3 { font-size: 16px; margin: 0 0 14px; }
.order_line { display: flex; justify-content: space-between; font-size: 14px; padding: 7px 0; color: #555; }
.order_line.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; font-size: 16px; color: #222; }
.order_line.total b { color: var(--point); font-size: 20px; }
.pay_notice { background: #eef2f7; border: 1px solid #dbe3ec; color: #4a5663; border-radius: 8px; padding: 14px 16px; font-size: 13px; line-height: 1.6; margin-bottom: 18px; }
.pay_notice i { color: var(--point); margin-right: 6px; }
@media (max-width: 760px) {
  .order_box { grid-template-columns: 1fr; }
  .cart_table thead { display: none; }
  .cart_table, .cart_table tbody, .cart_table tr, .cart_table td { display: block; width: 100%; }
  .cart_table tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .cart_table td { border: 0; text-align: left; padding: 6px 4px; }
}

/* ===================== 문의 완료 ===================== */
.form_done { text-align: center; padding: 80px 0; }
.form_done i { font-size: 60px; color: var(--point); }
.form_done h3 { font-size: 24px; margin: 24px 0 14px; }
.form_done p { color: var(--gray); line-height: 1.8; margin-bottom: 36px; }

/* ===================== 햄버거 버튼 (기본: 데스크톱 숨김) ===================== */
.nav_toggle { display: none; }
body.no_scroll { overflow: hidden; }

/* ============================================================
   반응형
   ============================================================ */

/* ----- 태블릿 ----- */
@media (max-width: 1024px) {
  .prd_list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* 헤더: 한 줄 레이아웃 + 햄버거 */
  header { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
  header nav {
    display: flex; align-items: center; justify-content: space-between;
    height: 60px; padding: 0 16px;
  }
  header nav .header_logo { padding-top: 0; }
  header nav .header_logo a img { width: 130px; }

  .nav_toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 32px; height: 32px; background: none; border: 0; cursor: pointer; padding: 0;
    position: fixed; right: 16px; top: 14px; z-index: 1002;
  }
  .nav_toggle span { display: block; width: 26px; height: 3px; border-radius: 2px; background: #222; transition: 0.3s; }
  header.menu_open .nav_toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  header.menu_open .nav_toggle span:nth-child(2) { opacity: 0; }
  header.menu_open .nav_toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 메뉴 패널: 슬라이드 다운 */
  header nav .inner {
    position: fixed; left: 0; top: 60px; width: 100%;
    height: 0; overflow: hidden; background: #fff; display: block; padding: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08); transition: height 0.3s ease;
  }
  header.menu_open nav .inner { height: auto; max-height: calc(100vh - 60px); overflow-y: auto; }

  header nav .inner ul.menu {
    position: static; transform: none; display: block; width: 100%;
    gap: 0; padding: 6px 0 14px;
  }
  header nav .inner ul.menu li { border-top: 1px solid #f0eee9; }
  header nav .inner ul.menu li > a {
    height: auto; line-height: 1.4; padding: 16px 22px; font-size: 16px;
    display: flex; justify-content: space-between; align-items: center;
  }
  header nav .inner ul.menu li > a:before { display: none; }
  /* 하위메뉴 화살표 */
  header nav .inner ul.menu li:has(.sidemenu) > a:after {
    content: ""; width: 8px; height: 8px; border-right: 2px solid #999; border-bottom: 2px solid #999;
    transform: rotate(45deg); transition: 0.25s;
  }
  header nav .inner ul.menu li.open > a:after { transform: rotate(-135deg); }
  header nav .inner ul.menu li .sidemenu {
    position: static; transform: none; width: 100%; background: #f7f5f2;
    padding: 0; display: none; text-align: left;
  }
  header.on nav .inner ul.menu li .sidemenu { background: #f7f5f2; }
  header nav .inner ul.menu li.open .sidemenu { display: block; }
  header nav .inner ul.menu li .sidemenu a { padding: 12px 34px; font-size: 14px; color: #666; }

  /* 언어 선택기: 패널 안에서 전체폭 */
  header nav .inner .lang_wrap { width: calc(100% - 44px); margin: 14px 22px 4px; }

  /* 로그인/회원가입 영역: 패널 안에서 표시 (2줄 구조, 좌측 정렬) */
  header nav .inner .header_login {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 16px 22px; border-top: 1px solid #f0eee9; text-align: left;
  }
  header nav .inner .header_login .hl_row { gap: 16px; }
  header nav .inner .header_login .hl_user,
  header nav .inner .header_login .hl_links a { font-size: 15px; color: #333; }
  header nav .inner .header_login .hl_top .logout_btn { font-size: 14px; color: #888; }

  /* 메인비주얼 — 가로형 배너가 과도하게 잘리지 않도록 높이 축소 + 피사체 중심 정렬 */
  .main_visual .main_visual_slide { height: 460px; }
  .main_visual .main_visual_slide img { object-position: center; }
  .main_visual .main_visual_txt {
    width: 88%; left: 50%; right: auto; transform: translate(-50%, -50%); text-align: center;
  }
  .main_visual .main_visual_txt h2 { font-size: 30px; margin-bottom: 18px; }
  .main_visual .main_visual_txt p { font-size: 15px; }

  /* 홈 상품 썸네일: 제품이 잘리지 않도록 contain */
  .main_product .inner .main_prd li .thumb { background: #f6f4f1; }
  .main_product .inner .main_prd li .thumb img { object-fit: contain; padding: 14px; }
}
@media (max-width: 768px) {
  .main_visual .main_visual_slide { height: 400px; }
}

/* ----- 모바일 ----- */
@media (max-width: 768px) {
  .prd_list, .gallery_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prd_view { flex-direction: column; gap: 30px; }
  .prd_view_img { flex: none; width: 100%; }
  .prd_view_name { font-size: 24px; }
  .form_table th { width: 96px; font-size: 14px; padding: 14px 10px; }
  .form_table td { padding: 14px 10px; }
  .board_list .col_writer, .board_list .col_hit { display: none; }
  .board_list th, .board_list td { padding: 13px 6px; font-size: 14px; }

  /* 섹션 상단 여백 축소 */
  .container section:not(.main_visual) { margin-top: 60px; }

  /* 메인비주얼 */
  .main_visual .main_visual_txt h2 { font-size: 24px; }

  /* 메인 인트로 */
  .main_intro .inner .main_intro_txt h2 { font-size: 26px; }
  .main_intro .inner .main_intro_txt p:first-of-type { font-size: 16px; }
  .main_intro .inner .main_intro_txt p:last-of-type { font-size: 15px; }
  .main_intro .inner img { max-width: 100%; height: auto; }

  /* 메인 상품: 2열 유지 */
  .main_product .inner .main_prd li { width: 48%; }

  /* 메인 제품특징: 세로 스택 */
  .main_prdinfo .inner ul { flex-direction: column; border: 0; }
  .main_prdinfo .inner ul li { padding: 30px 0; border-right: 0; border-bottom: 1px solid #ccc; }
  .main_prdinfo .inner ul li:last-of-type { border-bottom: 0; }
  .main_prdinfo .inner ul li img { max-width: 100%; height: auto; }
  .main_prdinfo .inner ul li .main_prdinfo_txt h3 { font-size: 24px; margin: 18px 0 10px; }

  /* 메인 회사소개 영상 텍스트 */
  .main_about .main_about_video .main_title h2 { font-size: 20px; padding: 0 16px; }
  .main_about .main_about_video .main_title p { font-size: 13px; padding: 0 16px; }
  .main_title h2 { font-size: 30px; }

  /* 서브 공통 */
  .sub .subtop { height: 220px; }
  .sub .sub_cont { margin: 40px 0; }
  .sub .sub_title { margin-bottom: 30px; }
  .sub .sub_title h2 { font-size: 30px; }
  .sub .sub_title h2 img { width: 150px; }
  .sub .submenu { flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0 14px; }
  .sub .submenu a { padding: 8px 16px; font-size: 14px; }

  /* 회사소개 */
  .sub .sub_about .inner .sub_about_txt h2 { font-size: 22px; }
  .sub .sub_about .inner .sub_about_txt > div { margin: 36px 0; }
  .sub .sub_about .inner .sub_about_txt img { width: 100%; }

  /* 기업이념(power): 세로 스택 */
  .sub .power .inner { flex-direction: column; gap: 24px; }
  .sub .power .inner > img,
  .sub .power .inner .power_txt { width: 100%; }

  /* 서브 콘텐츠 좌우 여백 (원본은 padding:0 이라 모바일에서 끝이 잘림) */
  .sub .sub_cont .inner { padding: 0 16px; }

  /* 찾아오시는 길 */
  .location_search { flex-wrap: wrap; gap: 10px; }
  .location_search a, .location_search a:nth-child(2) { padding: 8px 16px; margin: 0; }
  .location_search a span { margin-left: 10px; }
  .location_table th, .location_table td { padding: 10px 8px; font-size: 13px; word-break: keep-all; }
  .location_table th { width: 64px; }
  .sub_about03 .inner iframe, .sub05 iframe { height: 320px; }

  /* 푸터: 세로 스택 */
  footer { padding: 50px 0; }
  footer > .inner { flex-direction: column; align-items: stretch; }
  footer .inner .footer_content { flex-direction: column; gap: 30px; }
  footer .inner .footer_content .footer_others { width: 100%; flex-direction: column; gap: 24px; }
  footer .inner .footer_content .footer_info ul li { display: block; margin-right: 0; }
  footer .inner .footer_content .footer_info ul li:last-of-type { margin-top: 12px; }

  /* 제품 상세 버튼/표 */
  .prd_view_btns { flex-wrap: wrap; }
  .board_btns { flex-wrap: wrap; }
}

/* ----- 소형 모바일 ----- */
@media (max-width: 480px) {
  .prd_list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .gallery_list { grid-template-columns: 1fr; }
  .main_visual .main_visual_txt h2 { font-size: 21px; }
  .sub .sub_title h2 { font-size: 24px; }
  .btn { padding: 11px 22px; font-size: 14px; }
}

/* 파트너센터 반응형 */
@media (max-width: 900px) {
  .pc_cards, .pc_cards4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 768px) {
  .pc_table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 600px) {
  .pc_cards, .pc_cards4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pc_copy { flex-direction: column; }
  .pc_copy .btn { padding: 11px; }
  .wd_amount { flex-direction: column; }
  .wd_max { padding: 11px 0; }
}

/* ── 회원가입 확장 폼 / 추천인 변경 (보상플랜) ───────────────── */
.form_subtitle { margin: 26px 0 10px; font-size: 16px; font-weight: 700; color: #333; border-left: 3px solid #b98a2e; padding-left: 10px; }
.form_subtitle .hint { font-weight: 400; font-size: 12px; color: #999; margin-left: 6px; }
.form_table td .hint { display: inline-block; margin-left: 8px; font-size: 12px; color: #999; }
.form_agree { margin: 6px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.form_agree label { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.5; color: #444; }
.form_agree input[type=checkbox] { margin-top: 3px; }
.rc_note { background: #faf6ee; border: 1px solid #ecdfc4; border-radius: 8px; padding: 14px 16px; font-size: 13px; color: #6b5a33; line-height: 1.6; margin-bottom: 18px; }
.rc_list { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13.5px; }
.rc_list th, .rc_list td { border: 1px solid #e5e5e5; padding: 9px 10px; text-align: center; }
.rc_list th { background: #f7f7f7; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 11px; font-size: 12px; }
.badge.wait { background: #fff4e0; color: #b9822e; }
.badge.ok { background: #e6f5ea; color: #2e8b57; }
.badge.no { background: #fbe9e9; color: #c0392b; }
.rank-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; background:#eef2fb; color:#3a4a7a; }
.rank-badge.팀장 { background:#eaf4ff; color:#1f6fb0; }
.rank-badge.국장 { background:#eef7ee; color:#2e8b57; }
.rank-badge.본부장 { background:#f6eefb; color:#7a3a9a; }

/* ── 약관 페이지 / 가입폼 약관 박스 ───────────────────────────── */
.terms_wrap { max-width: 900px; margin: 0 auto; }
.terms_tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; position: sticky; top: 0; background: #fff; padding: 10px 0; z-index: 2; border-bottom: 1px solid #eee; }
.terms_tabs a { padding: 8px 14px; border: 1px solid #ddd; border-radius: 20px; font-size: 13px; color: #555; }
.terms_tabs a:hover { background: #b98a2e; color: #fff; border-color: #b98a2e; }
.terms_sec { margin-bottom: 40px; scroll-margin-top: 70px; }
.terms_h { font-size: 22px; font-weight: 700; color: #222; padding-bottom: 12px; border-bottom: 2px solid #b98a2e; margin-bottom: 18px; }
.tm_ch { font-size: 16px; font-weight: 700; color: #b98a2e; margin: 22px 0 10px; }
.tm_art { font-size: 14.5px; font-weight: 700; color: #333; margin: 16px 0 6px; }
.tm_p { font-size: 13.5px; line-height: 1.75; color: #555; margin: 4px 0; white-space: pre-line; }
.tm_label { margin: 18px 0 6px; font-size: 13.5px; font-weight: 600; color: #444; }
.terms_box { height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 8px; padding: 14px 16px; background: #fcfbf9; }
.terms_box .tm_ch { font-size: 14px; margin: 14px 0 8px; }
.terms_box .tm_art { font-size: 13px; }
.terms_box .tm_p { font-size: 12.5px; line-height: 1.65; }

/* ── 특허증 원본 다운로드 ─────────────────────────────────────── */
.patent_docs { max-width: 860px; margin: 0 auto 34px; }
.patent_docs_title { font-size: 17px; font-weight: 700; color: #333; margin-bottom: 12px; padding-left: 10px; border-left: 3px solid #b98a2e; }
.patent_doc_list { display: flex; flex-direction: column; gap: 8px; }
.patent_doc_list a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid #e6ddc7; border-radius: 8px; background: #fcfbf8; transition: .2s; }
.patent_doc_list a:hover { border-color: #b98a2e; background: #faf5ea; }
.patent_doc_list .pd_no { font-weight: 700; color: #b98a2e; white-space: nowrap; font-size: 14px; }
.patent_doc_list .pd_name { flex: 1; color: #555; font-size: 13.5px; line-height: 1.5; }
.patent_doc_list .pd_ico { font-size: 11px; font-weight: 700; color: #fff; background: #c0392b; padding: 3px 8px; border-radius: 4px; }
@media (max-width: 600px){ .patent_doc_list a { flex-wrap: wrap; } .patent_doc_list .pd_name { flex-basis: 100%; } }

/* ── 보너스(수익) 유형 뱃지 ───────────────────────────────────── */
.btype { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11.5px; font-weight:600; background:#eef2f7; color:#4a5568; white-space:nowrap; }
.btype-판권 { background:#fff3e0; color:#b9770a; }
.btype-팀성장 { background:#eaf4ff; color:#1f6fb0; }
.btype-팀관리 { background:#eef7ee; color:#2e8b57; }
.btype-공유 { background:#f3edfb; color:#7a3a9a; }
.btype-센터 { background:#fdeaea; color:#c0392b; }
.btype-legacy { background:#eee; color:#888; }

/* ── 장바구니 수량 스텝퍼(자동 반영) ─────────────────────────── */
.cart_qty { display: inline-flex; align-items: center; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; }
.cart_qty .qbtn { width: 32px; height: 34px; border: none; background: #f6f4f1; font-size: 17px; line-height: 1; cursor: pointer; color: #555; }
.cart_qty .qbtn:hover { background: #ece7de; color: #b98a2e; }
.cart_qty .qinput { width: 46px; height: 34px; border: none; border-left: 1px solid #eee; border-right: 1px solid #eee; text-align: center; font-size: 14px; -moz-appearance: textfield; }
.cart_qty .qinput::-webkit-outer-spin-button, .cart_qty .qinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── 주문서(체크아웃) ─────────────────────────────────────────── */
.orderer_table th, .orderer_table td { padding: 8px 12px; }
.orderer_table td { color: #555; font-size: 14px; }
.same_chk { float: right; font-size: 13px; font-weight: 400; color: #666; cursor: pointer; }
.same_chk input { vertical-align: middle; margin-right: 4px; }
.zip_row { display: flex; gap: 8px; align-items: center; }
.zip_row input { max-width: 160px; background: #f7f5f1; }
.zip_row .btn { white-space: nowrap; }

/* ── 우편번호 검색 레이어 / 배송지 도구 ───────────────────────── */
.zip_layer { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999; display: none; align-items: center; justify-content: center; }
.zip_layer_box { background: #fff; width: 94%; max-width: 540px; max-height: 92vh; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.3); display: flex; flex-direction: column; }
.zip_layer_head { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #eee; font-weight: 600; }
.zip_layer_head button { border: none; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: #888; }
.zip_embed { flex: 1 1 auto; width: 100%; height: min(640px, 82vh); }
.ship_tools { float: right; display: inline-flex; gap: 10px; align-items: center; }
.ship_tools .same_chk { float: none; }

/* ── 저장된 배송지 / 저장 동의 ─────────────────────────────────── */
.saved_addr { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 14px; }
.saved_addr_label { font-size: 13px; color: #888; margin-right: 2px; }
.saved_addr_btn { padding: 7px 13px; border: 1px solid #ddd; border-radius: 20px; background: #fff; font-size: 13px; color: #555; cursor: pointer; }
.saved_addr_btn:hover { border-color: #b98a2e; color: #b98a2e; }
.saved_addr_btn.on { border-color: #b98a2e; background: #faf5ea; color: #b98a2e; font-weight: 600; }
.save_addr_chk { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; color: #444; cursor: pointer; }
.save_addr_chk .rec { color: #b98a2e; font-weight: 700; }

/* ── 상품 검색 / 품절 ─────────────────────────────────────────── */
.prd_search { display: flex; gap: 8px; max-width: 420px; margin: 0 auto 34px; }
.prd_search input { flex: 1; padding: 11px 14px; border: 1px solid #d4cfc2; border-radius: 4px; font-size: 14px; }
.prd_search .btn { padding: 11px 20px; }
.prd_soldout { position: absolute; inset: 0; background: rgba(255,255,255,.62); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #c0392b; letter-spacing: 2px; z-index: 2; }

/* ── 결제 동의 ────────────────────────────────────────────────── */
.buy_agree { display: flex; align-items: flex-start; gap: 7px; margin-top: 14px; font-size: 13px; color: #555; line-height: 1.5; }
.buy_agree .rec { color: var(--point); font-weight: 700; }

/* ── 선택 확장 기능(리뷰·옵션·쿠폰/적립금·게스트) ── */
.prd_rating{display:inline-flex;align-items:center;gap:6px;color:#e6a817;font-weight:600;text-decoration:none;margin:2px 0 8px;font-size:14px}
.prd_rating em{color:#999;font-style:normal;font-weight:400}
.stars{color:#e6a817;letter-spacing:1px}
.prd_option{margin:14px 0}
.prd_option label{display:block;font-weight:600;margin-bottom:6px;font-size:14px}
.prd_option select{width:100%;max-width:340px;padding:10px;border:1px solid #ddd;border-radius:6px;background:#fff}
.prd_reviews{margin-top:40px;border-top:1px solid #eee;padding-top:24px}
.review_form{background:#faf8f5;border:1px solid #eee;border-radius:8px;padding:16px;margin-bottom:20px}
.review_stars{margin-bottom:8px}
.rstar{border:none;background:none;font-size:22px;color:#ddd;cursor:pointer;padding:0 1px}
.rstar.on{color:#e6a817}
.review_form textarea{width:100%;border:1px solid #ddd;border-radius:6px;padding:10px;margin-bottom:8px;resize:vertical;font-family:inherit}
.review_list{list-style:none;padding:0;margin:0}
.review_item{border-bottom:1px solid #f0eee9;padding:14px 0}
.review_head{display:flex;align-items:center;gap:8px;font-size:14px}
.review_date{color:#aaa;font-size:12px;margin-left:auto}
.review_body{margin:8px 0 0;color:#555;font-size:14px;line-height:1.6}
.discount_box{border-top:1px dashed #e5e0d8;margin-top:10px;padding-top:10px;display:flex;flex-direction:column;gap:8px}
.discount_box input{padding:9px;border:1px solid #ddd;border-radius:6px;width:100%}
.pts_row{display:flex;gap:8px;align-items:center}
.pts_row input{flex:1}
.pts_row span{font-size:12px;color:#888;white-space:nowrap}
.disc_note{font-size:11px;color:#aaa;margin:0}
.guest_banner{background:#f4f8ff;border:1px solid #d6e4ff;border-radius:6px;padding:10px 14px;font-size:13px;color:#356;margin-bottom:14px}
.guest_banner a{color:#1a56db;font-weight:600}
.rc_list{width:100%;border-collapse:collapse;margin:12px 0}
.rc_list th,.rc_list td{border-bottom:1px solid #eee;padding:10px;text-align:center;font-size:14px}
.txt_red{color:#c0392b}

/* ===== 공용 빈 상태(empty state) ===== */
.empty_state { text-align: center; padding: 72px 20px; }
.empty_state svg { width: 58px; height: 58px; stroke: #d3ccbf; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.empty_state p { font-size: 15px; color: #9a958c; margin: 0 0 4px; }
.empty_state .btn { margin-top: 22px; }

/* ===== 회원 마이페이지/주문: 카드형 정보 ===== */
.info_card { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 14px rgba(30,22,12,.04); overflow: hidden; }
.info_card .ic_row { display: flex; align-items: center; gap: 14px; padding: 15px 22px; border-bottom: 1px solid #f3f0ea; font-size: 15px; }
.info_card .ic_row:last-child { border-bottom: 0; }
.info_card .ic_row .ic_k { width: 108px; flex: none; color: #8a8f96; font-size: 14px; }
.info_card .ic_row .ic_v { color: #333; font-weight: 500; }

/* 조직도형: 박스 마우스 드래그 이동 */
.pc_chart { position: relative; }
.pc_chart .orgnode { cursor: grab; touch-action: none; user-select: none; }
.pc_chart .orgnode[data-root] { cursor: default; }
.pc_chart .orgnode.dragging { cursor: grabbing; box-shadow: 0 8px 22px rgba(0,0,0,.18); opacity: .92; }
.pc_chart .orgnode.drop_target { border-color: var(--pt, #c8a16a); box-shadow: 0 0 0 3px var(--pt, #c8a16a); }
.pc_chart .orgnode.moving { opacity: .5; pointer-events: none; }
/* JS 로 그리는 SVG 연결선 (박스를 옮겨도 항상 이어짐) */
.tree_links { display: none; position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; overflow: visible; }
.mode_chart > .tree_links, .pc_chart > .tree_links { display: block; } /* 목록형에서는 숨김 */
.tree_links path { fill: none; stroke: #d4d7dd; stroke-width: 1.5; }
.js_links li::before, .js_links li::after, .js_links ul::before { display: none !important; }
.js_links .orgnode { position: relative; z-index: 1; }

/* ── 마이페이지 정산센터(구 파트너센터 통합) ─────────────────────────── */
.mc_wrap { max-width: 900px; margin: 0 auto; }
.mc_wrap.mc_wide { max-width: 1100px; }
/* 기능 페이지 상단 탭 내비 (구 파트너 사이드바 대체) */
.mc_nav { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.mc_nav a { padding: 9px 16px; border-radius: 22px; font-size: 14px; color: #555; background: #f4f5f7; transition: .15s; white-space: nowrap; }
.mc_nav a:hover { background: #e9ebef; color: #222; }
.mc_nav a.on { background: var(--dark); color: #fff; }
.mc_nav a.mc_nav_my { background: transparent; color: var(--point); border: 1px solid var(--point); }
.mc_nav a.mc_nav_my:hover { background: var(--point); color: #fff; }
/* 페이지 소제목/요약 줄 */
.mc_head { text-align: center; margin: -4px 0 22px; color: #666; font-size: 15px; }
.mc_head b { color: var(--point); }
/* 마이페이지 기능 메뉴 그리드 */
.mc_menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 30px 0 10px; }
.mc_menu_item { display: flex; flex-direction: column; gap: 3px; padding: 18px 16px; background: #fff; border: 1px solid #e6e8ec; border-radius: 10px; transition: .15s; }
.mc_menu_item:hover { border-color: var(--point); box-shadow: 0 6px 18px rgba(0,0,0,.06); transform: translateY(-2px); }
.mc_menu_item i { font-size: 18px; color: var(--point); margin-bottom: 6px; }
.mc_menu_item b { font-size: 15px; color: #222; }
.mc_menu_item span { font-size: 12px; color: #999; }
@media (max-width: 640px) {
  .mc_menu { grid-template-columns: repeat(2, 1fr); }
  .mc_nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
}

/* ─────────────────────────────────────────────────────────────
   회원가입 약관 동의 (요구사항 1장 — 전체동의 버튼 / '필수' 표기 깨짐 수정)
   ───────────────────────────────────────────────────────────── */
.form_agree .agree_all {
  padding: 12px 14px; margin-bottom: 6px; border: 1px solid #ddd; border-radius: 6px;
  background: #fafafa; font-size: 14.5px; align-items: center;
}
.form_agree .agree_all b { font-weight: 700; color: #222; }
.form_agree .agree_all .hint { margin-left: 6px; font-size: 12px; color: #999; }
.form_agree label > span { flex: 1; min-width: 0; }
/* [필수]/[선택] 배지 — 줄바꿈으로 글자가 잘리지 않도록 고정폭 배지로 처리 */
.form_agree i.req, .form_agree i.opt {
  flex: 0 0 auto; display: inline-block; min-width: 40px; text-align: center;
  padding: 2px 6px; border-radius: 3px; font-style: normal; font-size: 11.5px;
  font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.form_agree i.req { background: #c0392b; color: #fff; }
.form_agree i.opt { background: #e6e6e6; color: #666; }

/* 주소 입력(도로명 검색 + 직접 입력) */
.addr_row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.addr_row .addr_zip { max-width: 130px; }
.btn_sm { padding: 6px 12px !important; font-size: 12.5px !important; }

/* ─────────────────────────────────────────────────────────────
   제품담기 (요구사항 2장)
   ───────────────────────────────────────────────────────────── */
.starter_limit { margin: 8px 0 14px; font-size: 15px; color: #333; font-weight: 600; }
.starter_limit b { color: var(--point, #c9184a); font-size: 17px; }
/* 제품담기 요약 바 — 한도·선택액·남은 금액을 항상 보이게 */
.starter_sum { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 16px; }
.starter_sum .ss_item { flex: 1 1 160px; padding: 10px 14px; background: #f7f7f7; border: 1px solid #e5e5e5; border-radius: 4px; }
.starter_sum .ss_item span { display: block; font-size: 13px; color: #777; margin-bottom: 3px; }
.starter_sum .ss_item b { font-size: 18px; font-weight: 700; color: #222; }
.starter_sum .ss_left b { color: var(--point, #c9184a); }
.starter_sum.is_over .ss_left { background: #fdecea; border-color: #f0b8ae; }
.starter_sum.is_over .ss_left b { color: #c0392b; }
@media (max-width: 640px) { .starter_sum .ss_item { flex: 1 1 100%; } }
.starter_wrap { overflow-x: auto; }
.starter_table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.starter_table th, .starter_table td { padding: 12px 8px; border-bottom: 1px solid #eee; text-align: center; }
.starter_table thead th { background: #f7f7f7; font-weight: 700; color: #333; border-top: 2px solid #333; }
.starter_table .c_name { text-align: left; }
.starter_table .c_price, .starter_table .c_amt { text-align: right; }
.starter_table .c_img img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; }
.starter_table .st_noimg { color: #ccc; }
.starter_table .st_qty { width: 68px; text-align: center; padding: 6px; }
.starter_table .st_qty:disabled { background: #f4f4f4; }
.starter_table .st_soldout { color: #c0392b; font-size: 12px; }
.starter_table .st_empty { padding: 40px; color: #999; }
.starter_table tfoot td { border-top: 2px solid #333; border-bottom: none; font-size: 15px; }
.starter_table .st_total_label { text-align: right; font-weight: 700; }
.starter_table tfoot #st_total { color: var(--point, #c9184a); font-size: 18px; }

/* ─────────────────────────────────────────────────────────────
   출석체크 (요구사항 6장)
   ───────────────────────────────────────────────────────────── */
.att_status { display: flex; gap: 12px; margin: 16px 0 22px; flex-wrap: wrap; }
.att_card {
  flex: 1 1 200px; padding: 16px 18px; border: 1px solid #e2e2e2; border-radius: 8px;
  background: #fafafa; display: flex; flex-direction: column; gap: 4px;
}
.att_card.ok { border-color: #2b8a3e; background: #f3fbf5; }
.att_card .att_k { font-size: 13px; color: #777; }
.att_card .att_v { font-size: 22px; font-weight: 700; color: #222; }
.att_card .att_s { font-size: 12.5px; color: #c0392b; font-weight: 600; }
.att_card.ok .att_s { color: #2b8a3e; }

.att_form { padding: 16px 18px; border: 1px solid #e2e2e2; border-radius: 8px; margin-bottom: 12px; }
.att_title { font-size: 15px; font-weight: 700; color: #222; margin: 0 0 12px; }
.att_row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.att_row label { font-size: 13px; color: #555; display: flex; align-items: center; gap: 6px; }
.att_row input[type=text] { padding: 7px 10px; border: 1px solid #ddd; border-radius: 4px; background: #f7f7f7; max-width: 160px; }
.att_row .att_chk { font-weight: 700; color: #222; }
.att_done { color: #2b8a3e; font-weight: 600; font-size: 14px; margin: 0; }
.form_done_msg { padding: 10px 14px; border-radius: 6px; background: #f3fbf5; color: #2b8a3e; font-size: 14px; margin: 0 0 14px; }

/* ─────────────────────────────────────────────────────────────
   선결재 (요구사항 7장)
   ───────────────────────────────────────────────────────────── */
.pp_balance {
  display: flex; align-items: baseline; gap: 12px; padding: 20px 22px; margin-bottom: 14px;
  border: 1px solid #e2e2e2; border-radius: 8px; background: #fafafa;
}
.pp_balance .pp_k { font-size: 14px; color: #777; }
.pp_balance .pp_v { font-size: 26px; font-weight: 700; color: var(--point, #c9184a); }
.pp_alert {
  padding: 12px 16px; margin-bottom: 14px; border-radius: 6px;
  background: #fff5f5; border: 1px solid #f0c0c0; color: #c0392b; font-size: 14px; line-height: 1.6;
}
.pp_form { margin-bottom: 26px; }
.pp_form label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; }
.pp_inwrap { display: flex; align-items: center; gap: 6px; max-width: 320px; }
.pp_inwrap input { flex: 1; padding: 11px 12px; border: 1px solid #ddd; border-radius: 4px; text-align: right; font-size: 15px; }
.pp_unit { font-size: 14px; color: #666; }
.pp_quick { display: flex; gap: 6px; margin: 10px 0 14px; flex-wrap: wrap; }

/* 로그인 시 선결재 알림창 — 확인을 눌러야 닫힌다 */
.pp_modal {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.pp_modal_box {
  background: #fff; border-radius: 10px; padding: 28px 26px; max-width: 420px; width: 100%;
  text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.pp_modal_box h3 { font-size: 17px; font-weight: 700; color: #c0392b; margin: 0 0 12px; }
.pp_modal_box p { font-size: 14.5px; color: #444; line-height: 1.65; margin: 0 0 8px; }
.pp_modal_amt b { color: var(--point, #c9184a); font-size: 16px; }
.pp_modal_btns { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }

/* 표가 있는 마이페이지 화면(제품담기·출석통계·선결재·문의)은 기본 560px 폭으로는
   열이 잘린다 → 전용 폭을 준다. (요구사항 2장 화면의 갯수/금액 열 가림 방지) */
.partner_auth.partner_auth_wide { max-width: 1000px; }
@media (max-width: 1040px) {
  .partner_auth.partner_auth_wide { max-width: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   반응형 보정 (7개 뷰포트 실측 결과 반영)
   ───────────────────────────────────────────────────────────── */

/* 브랜드 페이지: 성분명처럼 띄어쓰기 없는 긴 한글이 word-break:keep-all 때문에
   컬럼을 밀어내고, body 의 overflow-x:hidden 에 잘려 아예 안 읽히던 문제.
   keep-all 은 유지하되 한 낱말이 칸보다 길면 강제로 끊는다. */
.prod_info, .patent_box li, .patent_box p {
  overflow-wrap: anywhere;
  word-break: keep-all;
}
@media (max-width: 480px) {
  .patent_box { padding: 16px 14px; }
}

/* 조직도 컨트롤이 360px 에서 잘리던 문제 */
.tree_ctrl { flex-wrap: wrap; }
.tree_ctrl .btn { white-space: nowrap; }

/* 가로 스크롤이 필요한 표에 "옆으로 밀어서 보세요" 힌트를 준다.
   (제품담기·정산 내역 등에서 수량/금액 열이 화면 밖이라 기능을 못 찾던 문제) */
.scroll_hint { display: none; font-size: 12px; color: #999; margin: 0 0 6px; }
@media (max-width: 860px) {
  .scroll_hint { display: block; }
  .starter_wrap, .pc_table_wrap { position: relative; }
  /* 스크롤 여지가 있음을 시각적으로 알리는 우측 그라데이션 */
  .starter_wrap::after, .pc_table_wrap::after {
    content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.95));
    pointer-events: none;
  }
}

/* 게시판 목록: 번호·날짜 칸이 좁아 글자가 세로로 쪼개지던 문제 */
.board_list .col_no, .board_list .col_date,
.board_list th:first-child, .board_list td:first-child { white-space: nowrap; }
.board_list th:last-child, .board_list td:last-child { white-space: nowrap; }

/* 회원가입 라벨이 2줄로 접히던 문제 */
.form_table th label { word-break: keep-all; overflow-wrap: anywhere; }

/* 모바일 터치 타깃 최소 높이 확보 */
@media (max-width: 768px) {
  .mo_util a, .mo_util button { min-height: 40px; display: flex; align-items: center; }
  .footer_menu a { min-height: 34px; display: inline-flex; align-items: center; }
}

/* 마이페이지 조직도 박스 — 관리자 등급 조직도와 같은 항목을 보여준다 */
.orgnode_grid {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid #eef0f3; font-size: 11.5px;
}
.orgnode_grid .k { color: #9298a2; white-space: nowrap; }
.orgnode_grid .v { color: #3a3f48; font-weight: 600; text-align: right; }
.orgnode_grid .v small { color: #9298a2; font-weight: 400; }
.orgnode_foot {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid #eef0f3; font-size: 11px;
}
.orgnode .orgnode_lv { font-size: 11px; color: #9298a2; font-weight: 400; }
.orgnode.is_me .orgnode_grid .k { color: #a7adb7; }
.orgnode.is_me .orgnode_grid .v { color: #e3e6ea; }
.orgnode.is_me .orgnode_grid, .orgnode.is_me .orgnode_foot { border-top-color: rgba(255,255,255,.14); }

/* ── 마이페이지 조직도(/member/organization) 박스 접기/펼치기 — 관리자 등급 조직도와 동일 ── */
#myTree .orgnode_grid,
#myTree .orgnode_foot { display: none; }
#myTree .orgnode.box_open .orgnode_grid { display: grid; }
#myTree .orgnode.box_open .orgnode_foot { display: flex; }
#myTree .orgnode_head { cursor: pointer; justify-content: flex-start; }
#myTree .orgnode_head .rank-badge { margin-left: auto; }
#myTree .orgnode_head::after {
  content: ""; flex: none; align-self: center; margin-left: 4px;
  border: 4px solid transparent; border-top-color: #9298a2; border-bottom: 0;
  transition: transform .15s;
}
#myTree .orgnode.box_open .orgnode_head::after { transform: rotate(180deg); }

/* ── 아이디/비밀번호 찾기 ─────────────────────────────────────────── */
.login_help { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--gray); }
.login_help a { color: var(--gray); text-decoration: none; }
.login_help a:hover { color: var(--point); text-decoration: underline; }
.login_help span { margin: 0 8px; color: #ccc; }

.form_note { margin: 14px 0 0; font-size: 13px; line-height: 1.7; color: var(--gray); }

/* .form_done 은 주문완료용(padding 80px)이라 인증 화면 안에서는 여백을 줄인다 */
.partner_auth .form_done { padding: 24px 0 8px; text-align: left; }
.partner_auth .form_done > p { font-size: 15px; line-height: 1.8; margin: 0 0 8px; }

.find_result { list-style: none; margin: 16px 0 0; padding: 0; }
.find_result li {
  padding: 14px 18px; margin-bottom: 8px; border: 1px solid #e5e5e5; border-radius: 3px;
  background: #fafafa; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.find_result li b { font-size: 17px; letter-spacing: 1px; word-break: break-all; }
.find_result li span { font-size: 13px; color: var(--gray); }

@media (max-width: 560px) {
  .login_help { font-size: 13px; }
  .find_result li b { font-size: 16px; }
}

/* 조직도 가입구분 뱃지 — 관리자(admin.css)와 같은 모양을 회원 화면에도 준다.
   admin.css 는 회원 페이지에서 로드되지 않아 여기에도 있어야 한다. */
.atree_join { padding: 1px 7px; border-radius: 3px; background: #eaf3ff; color: #2b6cb0; font-weight: 600; }
.atree_join.sp { background: #f3eaff; color: #6b46c1; }


/* ── 조직도 모바일: 세로 창 크게 + 좌우(및 상하) 스크롤 자유롭게 ── */
@media (max-width: 768px) {
  .orgchart_wrap { height: 75vh; overflow: auto; }
  /* 터치 제어(스와이프=스크롤 / 길게눌러=드래그)를 JS가 직접 하므로 네이티브 제스처는 끈다 */
  .pc_chart .orgnode { touch-action: none; }
}


/* === 모바일 전용 히어로(4:3 크롭 이미지) — 잘림 없이 피사체 중심 표시 (2026-09-17) ===
   ≤768px 에선 index.ejs 의 <picture> 가 800x600(4:3) 이미지를 쓴다.
   swiper effect:fade 라 슬라이드가 absolute → 컨테이너 높이를 4:3 비율로 고정,
   문구는 이미지 아래로 정적 배치. */
@media (max-width: 768px) {
  .main_visual .main_visual_slide { height: auto; aspect-ratio: 4 / 3; }
  .main_visual .scroll_down_box { display: none; }
  .main_visual .swiper-button-next,
  .main_visual .swiper-button-prev { display: none; }
  .main_visual .main_visual_txt {
    position: static; transform: none; width: 100%;
    left: auto; right: auto; top: auto; text-align: center;
    padding: 26px 20px 6px;
  }
}