@charset "UTF-8";
/* ==================================================================
   main.css ? 회원 · 게시판 · 쇼핑몰 페이지 공용 스타일
   경로 : /css/main.css
   호출 : common/head.php 에서 다른 CSS 보다 뒤에 연결

   ┌──────────────────────────────────────────────────────────────┐
   │  목  차                                                       │
   │  ※ 줄 번호는 내용을 추가하면 밀립니다.                        │
   │    편집기에서 아래 [찾기] 문구로 검색하시면 정확합니다.        │
   ├──────────────────────────────────────────────────────────────┤
   │                                                              │
   │  [1] 공용 부품                        클래스 st-             │
   │      · 색·모서리 토큰                 [찾기] :root           │
   │      · 페이지 틀 · 제목               [찾기] .st-section     │
   │      · 카드 · 버튼 · 링크             [찾기] ── 버튼         │
   │      · 표(게시판) · 페이지번호 · 검색  [찾기] ── 표          │
   │      · 입력 · 정보표 · 안내상자        [찾기] ── 입력 요소   │
   │      · 확인창(모달)                   [찾기] ── 확인 창      │
   │                                                              │
   │  [2] 회원 페이지 공용                                        │
   │      · 결과 화면(가입완료·탈퇴완료 등) [찾기] 회원 페이지 공용 │
   │      · 진행 단계 · 안내 상자                                 │
   │      · 입력 폼 부품                   [찾기] 입력 폼 계열     │
   │      · 약관 동의                      [찾기] 약관 동의        │
   │                                                              │
   │  [3] 페이지 전용                      [찾기] [페이지 전용]    │
   │      로그인            .lg-           login.php              │
   │      회원탈퇴          .sc-           secede.php             │
   │      회원정보 수정     .mm-           join_upd.php           │
   │      인증팝업(가입)    .pv-           phone.php              │
   │      인증팝업(수정)    .pu-           phone-upd.php          │
   │      무료체험 신청     .dm-           request_my_demo.php    │
   │      공지사항          .nt-           support/noticenew.php  │
   │      제품 목록         .sh-           mall/shop.php          │
   │      제품 상세         .it-           mall/item.php          │
   │      주문 · 결제       .po-           mall/buy/shop_my_pay.php│
   │                                                              │
   │  [3-2] 일반 페이지 (2026-08-04 인라인 <style> 에서 이관)      │
   │      홈              .hp-   .home-page      index.php        │
   │      왜 Seetrol인가  .my-   .my-page        whyseetrol.php   │
   │      시스템 구성도   .sys-  .sys-page       system.php       │
   │      활용사례        .uc-   .uc-page        casestudy.php    │
   │      동작원리        .hiw-  .hiw-page       howitworks.php   │
   │      가성비 비교     .pc-   .pc-page        costcomparison   │
   │      주요 납품처     .ref-  .ref-page       myreference.php  │
   │      고객 리뷰       .rv-   (스코프 없음)   wepledge.php     │
   │      History         .sh-   .history-page   history.php      │
   │      설치방법        .ins-  .ins-page       howinstall.php   │
   │      설치용 웹       .ez-   .ez-page        ezinstall.php    │
   │      다운로드        .dl-   .dl-page        download.php     │
   │      다운로드(단종)  .dl-   .dld-page       downloaddrop.php │
   │      무료체험 안내   .tn-   .tn-page        demo/trial_notice│
   │      비밀번호 변경   .pw-   .pw-page        join_passwd_upd  │
   │      정보수정 완료   .rs-   .rs-page        result-join-upd  │
   │      견적서 요청            .quote-page     view_quote_ask   │
   │      견적서 문서            .quote-doc      view_quote_form  │
   │      VPP82 엔진      .vp-   .vp-page        vpp82.php        │
   │      보상판매        .cm-   .cm-page        compensation.php │
   │      보상판매 견적서 .rg-   .rg-page        register-form.php│
   │                                                              │
   │  ※ .sh- 는 제품목록과 History 두 곳이 씁니다. History 쪽은    │
   │    .history-page 스코프로 격리했습니다.                       │
   │  ※ .dl- 은 다운로드 두 페이지가 공유하되 스코프가 다릅니다.   │
   │    같은 클래스에 값이 달라 .dl-page / .dld-page 로 나눴습니다. │
   │                                                              │
   │  ※ 아래 5개는 자체 <head> 를 가진 독립 페이지라 이 파일이     │
   │    로드되지 않습니다. 인라인 <style> 을 그대로 둡니다.        │
   │      captcha.php · support/myupdate.php ·                     │
   │      support/myupdate_view.php · support/quickmanual.php ·    │
   │      mall/compensation/compensation-quotation.php ·           │
   │      demo/demo_result.php                                     │
   │                                                              │
   │  [4] 일반 페이지 토큰                 [찾기] --pg-           │
   │      홈·소개·다운로드 계열이 함께 쓰는 색·모서리·그림자      │
   │      (인라인 <style> 에서 옮겨온 페이지들이 함께 씁니다)     │
   │                                                              │
   │  ※ 푸터는 /css/footer.css 에 따로 있습니다.                  │
   │  ※ 이 파일을 고치신 뒤에는 common/head.php 의 ?v=날짜 를     │
   │    바꿔 주세요. 그대로 두면 이용자가 옛 CSS 를 계속 받습니다.│
   │    main.css 를 <link> 로 거는 곳은 지금 여기 한 곳뿐입니다.  │
   │                                                              │
   │  ※ payment/PayRequest.php 는 main.css 를 받지 않습니다.      │
   │    자체 <head> 에서 payrequest.css 만 겁니다 — ?v=날짜 도    │
   │    그 파일 쪽을 바꾸셔야 합니다. 예전에는 여기서 main.css 를 │
   │    통째로 받았고, 그때는 이 안내가 두 곳을 가리켰습니다.     │
   │    .oc- 규칙이 payrequest.css 에 복사돼 있으니 고치실 때     │
   │    함께 — 자세한 내용은 아래 "주문 완료(oc-)" 항목에.        │
   └──────────────────────────────────────────────────────────────┘

   [원칙]
   1. 본문·라벨 등은 font-size 를 px 나 rem 으로 새로 정하지 않고
      em 으로 지정해 테마의 기준 크기를 따라갑니다.
      단, 페이지 제목과 결과 화면은 회원 페이지와 크기를 정확히
      맞춰야 해서 rem 을 씁니다.
   2. 페이지 제목은 .st-head 규격을 씁니다 (회원가입과 동일).
   3. 클래스는 모두 st- 로 시작합니다. 테마 클래스와 겹치지 않습니다.
   4. 색상·여백·모서리만 이 파일에서 관리합니다.
   5. 새 페이지를 만들 때 <style> 을 파일 안에 쓰지 마십시오.
      이 파일에 [페이지 전용] 섹션으로 넣고, 페이지에는 스코프 클래스만
      붙입니다. 색·모서리·그림자는 --st- 또는 --pg- 토큰을 씁니다.

   [인라인 CSS 통합 — 2026-08-04-05 완료]
   페이지 파일 안에 흩어져 있던 <style> 을 이 파일로 모았습니다.
   18개 페이지 · 약 3,000줄. 각 페이지가 이미 고유한 스코프 클래스와
   접두사를 쓰고 있어 규칙은 손대지 않고 그대로 옮겼습니다.
   페이지가 자기 안에서 정의하던 토큰(--hp- · --pc- …)은 위 [4] 의
   --pg- 를 참조하게 바꿨습니다. 같은 값을 15곳에서 다시 적고 있었습니다.

   [새 페이지를 만들 때]
   <style> 을 페이지 안에 쓰지 마시고 이 파일에 [페이지 전용] 섹션으로
   넣어 주세요. 목차 [3-2] 에 한 줄 추가하면 다음 사람이 찾기 쉽습니다.

   [주의 — 전역 선택자]
   옮길 블록에 body · * · :root 같은 선택자가 있으면 그대로 옮기면 안
   됩니다. 이 파일은 사이트 전 페이지가 읽으므로 그 규칙이 모든 화면을
   덮습니다. 실제로 demo/demo_result.php 를 옮겼다가 body 의 padding ·
   배경 · font-family 가 전 페이지에 적용된 적이 있어 되돌렸습니다.
   그런 페이지는 인라인으로 두는 편이 맞습니다.

   [주의 — 자체 <head> 페이지]
   common/head.php 를 부르지 않는 페이지는 이 파일을 받지 못합니다.
   옮기면 스타일이 사라집니다. 목차 아래 제외 목록을 보세요.
   판단할 때는 주석이 아니라 실제 include 문이 있는지 확인하십시오.
================================================================== */

:root{
	--st-primary:#0066ff;
	--st-primary-dark:#0047b3;
	--st-ink:#1a1d24;
	--st-body:#3f4654;
	--st-muted:#8b93a1;
	--st-line:#e4e8ef;
	--st-bg:#f5f7fb;
	--st-success:#0f9d6e;
	--st-danger:#dc3545;
	--st-warn:#b7791f;
	--st-radius-card:16px;
	--st-radius-ctl:12px;
	--st-shadow:0 10px 30px rgba(16,24,40,0.06);

	/* ==============================================================
	   일반 페이지(홈·소개·다운로드 계열) 토큰          접두사 --pg-

	   [왜 따로 두는가]
	   그 페이지들은 인라인 <style> 안에서 --hp- · --pc- · --sys- …
	   처럼 페이지마다 같은 값을 다시 정의하고 있었습니다.
	   색 하나 바꾸려면 15곳을 고쳐야 했습니다. 여기로 모읍니다.

	   [--st- 와의 관계]
	   · 색상 4개는 값이 완전히 같아 --st- 를 그대로 참조합니다.
	     색을 바꾸면 회원·게시판·쇼핑몰과 일반 페이지가 함께 바뀝니다.
	   · 아래 5개는 값이 다릅니다. 일반 페이지는 모서리가 더 둥글고
	     (18px) 그림자가 강한 계열입니다. 억지로 --st- 에 맞추면 한쪽
	     화면이 바뀌므로 일부러 나눠 두었습니다.

	   [--pg-muted 는 --st-muted 와 값이 다릅니다 — 일부러 둡니다]
	   2026-08-04 에 --st-muted(#8b93a1) 하나로 합쳤다가, 흐린 글씨가
	   밝아져 보기에 좋지 않아 원래 값(#7a828f)으로 되돌렸습니다.
	   두 값이 다른 것은 실수가 아닙니다. 합치려면 이 줄만 고치면 되지만
	   일반 페이지의 설명문·라벨이 전부 밝아지므로 화면 확인이 필요합니다.
	   ============================================================== */
	--pg-primary:var(--st-primary);           /* #0066ff — st 와 동일 */
	--pg-primary-dark:var(--st-primary-dark); /* #0047b3 — st 와 동일 */
	--pg-ink:var(--st-ink);                   /* #1a1d24 — st 와 동일 */
	--pg-body:var(--st-body);                 /* #3f4654 — st 와 동일 */

	--pg-muted:#7a828f;                       /* st 는 #8b93a1 — 일부러 다름 */
	--pg-line:rgba(16,24,40,0.08);            /* st 는 #e4e8ef */
	--pg-radius:18px;                         /* st 카드는 16px */
	--pg-shadow:0 12px 34px rgba(16,24,40,0.09);
	--pg-shadow-sm:0 6px 18px rgba(16,24,40,0.06);
}

/* ── 페이지 틀 ───────────────────────────────────────────── */
.st-section{
	background:var(--st-bg);
	padding:60px 0 90px;
	color:var(--st-body);
}
.st-section *{ box-sizing:border-box; }
.st-wrap{ max-width:1000px; margin:0 auto; }
.st-wrap--narrow{ max-width:900px; }

/* ── 페이지 제목 ──────────────────────────────────────────
   회원가입 · 로그인 · 찾기 · 탈퇴 페이지와 같은 규격입니다.
   (32px / 굵기 800 ? 테마의 .sec-title_heading 과는 다릅니다)
   rem 을 쓰는 이유 : 회원 페이지들이 rem 으로 되어 있어
   똑같은 크기가 나오려면 같은 단위를 써야 합니다. */
.st-head{ text-align:center; margin-bottom:26px; }
.st-head h2,
.st-page-title{
	margin:0 0 10px;
	color:var(--st-ink);
	font-weight:800;
	font-size:var(--fs-3xl);
	line-height:1.35;
	word-break:keep-all;
}

/* 제목 아래 설명 ? 크기는 테마 본문 기준의 0.94배 */
.st-lead{
	margin:0 0 26px;
	color:var(--st-muted);
	font-size:0.94em;
	line-height:1.7;
	text-align:center;
	word-break:keep-all;
}
.st-head .st-lead{ margin:0; }

/* ── 카드 ────────────────────────────────────────────────── */
.st-card{
	background:#fff;
	border:1px solid var(--st-line);
	border-radius:var(--st-radius-card);
	box-shadow:var(--st-shadow);
	overflow:hidden;
}
.st-card + .st-card{ margin-top:18px; }
.st-card--pad{ padding:30px; }

.st-card-title{
	display:flex; align-items:center; gap:9px;
	margin:0 0 18px;
	color:var(--st-ink); font-weight:700; font-size:1.05em; line-height:1.5;
}
.st-card-title i{ color:var(--st-primary); font-size:0.9em; }
.st-card-title small{
	margin-left:auto; color:var(--st-muted); font-size:0.78em; font-weight:400;
}

/* ── 상단 바 (건수 + 버튼) ───────────────────────────────── */
.st-bar{
	display:flex; align-items:center; justify-content:space-between;
	gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.st-count{ color:var(--st-body); font-size:0.92em; }
.st-count b{ color:var(--st-primary); font-weight:700; }
.st-chip{
	display:inline-block; margin-left:6px; padding:3px 10px;
	border-radius:999px; background:#eef2f8;
	color:var(--st-body); font-size:0.86em;
}

/* ── 버튼 ────────────────────────────────────────────────── */
.st-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:7px;
	height:46px; min-width:104px; padding:0 20px; margin:0;
	border:1px solid var(--st-line); border-radius:var(--st-radius-ctl);
	background:#fff; color:var(--st-body);
	font-family:inherit; font-size:0.95em; font-weight:600; line-height:1;
	white-space:nowrap; cursor:pointer; text-decoration:none;
	transition:border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.st-btn:hover,
.st-btn:focus{ border-color:#c8d2e2; background:#f7f9fc; color:var(--st-body); text-decoration:none; }
.st-btn i{ font-size:0.9em; }

.st-btn--primary{
	border-color:transparent; color:#fff;
	background:linear-gradient(135deg,var(--st-primary),#3a8bff);
	box-shadow:0 8px 20px rgba(0,102,255,0.22);
}
.st-btn--primary:hover,
.st-btn--primary:focus{
	color:#fff; transform:translateY(-2px);
	box-shadow:0 12px 26px rgba(0,102,255,0.3);
	background:linear-gradient(135deg,var(--st-primary),#3a8bff);
}
.st-btn--dark{ border-color:transparent; background:var(--st-ink); color:#fff; }
.st-btn--dark:hover,
.st-btn--dark:focus{ background:#000; color:#fff; }
.st-btn--danger{ color:var(--st-danger); }
.st-btn--danger:hover,
.st-btn--danger:focus{ border-color:#f3b7bd; background:#fff5f6; color:#c82333; }
.st-btn--danger-solid{
	border-color:transparent; background:var(--st-danger); color:#fff;
	box-shadow:0 8px 20px rgba(220,53,69,0.22);
}
.st-btn--danger-solid:hover,
.st-btn--danger-solid:focus{ background:#c82333; color:#fff; }
.st-btn--lg{ height:52px; min-width:150px; padding:0 26px; }
.st-btn--sm{ height:42px; min-width:0; padding:0 16px; font-size:0.9em; }
.st-btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

.st-actions{
	display:flex; align-items:center; justify-content:center;
	gap:8px; flex-wrap:wrap; margin-top:22px;
}
.st-actions--split{ justify-content:space-between; }
.st-actions-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ── 링크 ────────────────────────────────────────────────── */
.st-link{
	display:inline-flex; align-items:center; gap:5px;
	color:var(--st-muted); font-size:0.9em; text-decoration:none;
}
.st-link:hover{ color:var(--st-primary); text-decoration:underline; text-underline-offset:3px; }

/* ── 목록으로 돌아가기 버튼 줄 ────────────────────────────
   2026-08-05 삭제한 css/seetroldesk.css 에서 옮겨왔습니다.
   그 파일에서 실제로 쓰이던 규칙은 이것 하나뿐이었고, 나머지
   (.searching-section · .select-div 등)는 어디에서도 쓰이지 않아
   함께 버렸습니다.

   ※ .qna-view 로 스코프를 붙였습니다. .action-buttons 는 이름이
     일반적이라 전역에 두면 나중에 다른 화면과 부딪힐 수 있습니다.
     지금 쓰는 곳은 support/quickmanual_view.php 한 곳입니다.
   ------------------------------------------------------------ */
.qna-view .action-buttons{ text-align:center; margin:20px auto; }

@media (max-width:575px){
	.qna-view .action-buttons button{ display:block; width:100%; }
}

/* ── 표 (게시판) ─────────────────────────────────────────── */
.st-table{ width:100%; border-collapse:collapse; }
.st-table th{
	background:#f7f9fc; color:var(--st-ink);
	font-weight:600; font-size:0.9em; text-align:center;
	padding:14px 12px; border-bottom:1px solid var(--st-line); white-space:nowrap;
}
.st-table td{
	padding:15px 12px; border-bottom:1px solid #eef1f6;
	font-size:0.94em; color:var(--st-body); text-align:center; vertical-align:middle;
}
.st-table tbody tr:last-child td{ border-bottom:0; }
.st-table tbody tr{ transition:background .15s ease; }
.st-table tbody tr:hover{ background:#fafbfd; }
.st-table .st-col-no{ width:74px; color:var(--st-muted); font-size:0.9em; }
.st-table .st-col-writer{ width:120px; }
.st-table .st-col-date{ width:150px; color:var(--st-muted); font-size:0.9em; white-space:nowrap; }

/* 표 좌우 끝 여백
   ※ .st-section 을 앞에 붙여 우선순위를 높였습니다.
     테마 CSS 가 th/td 의 padding 을 먼저 잡고 있어, 클래스 하나만으로는
     밀리면서 마지막 칸(작성일)이 카드 오른쪽 끝에 붙어 버렸습니다. */
.st-section .st-table th,
.st-section .st-table td{ padding:15px 12px; }
.st-section .st-table th:first-child,
.st-section .st-table td:first-child{ padding-left:20px; }
.st-section .st-table th:last-child,
.st-section .st-table td:last-child{ padding-right:20px; }
.st-table th.st-col-subject,
.st-table td.st-col-subject{ text-align:left; padding-left:16px; }
.st-table td.st-col-subject a{ color:var(--st-ink); font-weight:600; text-decoration:none; }
.st-table td.st-col-subject a:hover{ color:var(--st-primary); text-decoration:underline; text-underline-offset:3px; }

.st-badge{
	display:inline-block; padding:2px 8px; margin-right:7px;
	border-radius:999px; background:rgba(0,102,255,0.08);
	color:var(--st-primary); font-size:0.8em; font-weight:600;
	vertical-align:middle;
}
.st-badge--green{ background:rgba(15,157,110,0.1); color:var(--st-success); }

/* 빈 목록 */
.st-empty{ padding:60px 20px !important; text-align:center; }
.st-empty i{ display:block; font-size:2em; color:#c9d2df; margin-bottom:14px; }
.st-empty strong{ display:block; color:var(--st-ink); font-weight:700; margin-bottom:6px; }
.st-empty span{ display:block; color:var(--st-muted); font-size:0.92em; line-height:1.7; }

/* ── 페이지 번호 ─────────────────────────────────────────── */
.st-paging{
	display:flex; align-items:center; justify-content:center;
	gap:6px; flex-wrap:wrap; list-style:none; margin:26px 0 0; padding:0;
}
.st-paging li{ margin:0; }
.st-paging a,
.st-paging span{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:38px; height:38px; padding:0 11px;
	border:1px solid var(--st-line); border-radius:10px; background:#fff;
	color:var(--st-body); font-size:0.92em; font-weight:600; text-decoration:none;
	transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.st-paging a:hover{ border-color:var(--st-primary); color:var(--st-primary); }
.st-paging .is-current span{
	background:var(--st-primary); border-color:var(--st-primary); color:#fff;
}
.st-paging .is-disabled span{ color:#c3cbd8; background:#f7f9fc; }

/* ── 검색 ────────────────────────────────────────────────── */
.st-search{
	display:flex; align-items:center; justify-content:center;
	gap:8px; flex-wrap:wrap;
	margin-top:26px; padding:18px;
	background:#fff; border:1px solid var(--st-line);
	border-radius:var(--st-radius-card);
	box-shadow:0 6px 18px rgba(16,24,40,0.04);
}

/* ── 입력 요소 ───────────────────────────────────────────── */
.st-input,
.st-select,
.st-textarea{
	-webkit-appearance:none; -moz-appearance:none; appearance:none;
	display:block; width:100%; margin:0;
	border:1px solid var(--st-line); border-radius:var(--st-radius-ctl);
	background-color:#fff; color:var(--st-ink);
	font-family:inherit; font-size:0.96em; font-weight:400; line-height:1.6;
	outline:none; box-shadow:none;
	transition:border-color .16s ease, box-shadow .16s ease;
}
.st-input,
.st-select{ height:48px; padding:0 15px; }
.st-textarea{ min-height:230px; padding:14px 15px; resize:vertical; }
.st-select{
	cursor:pointer; padding-right:34px;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b93a1' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 13px center;
}
.st-input::placeholder,
.st-textarea::placeholder{ color:#aab2c0; }
.st-input:focus,
.st-select:focus,
.st-textarea:focus{
	border-color:var(--st-primary);
	box-shadow:0 0 0 4px rgba(0,102,255,0.12);
}
.st-input--auto{ width:auto; }
.st-select--auto{ width:118px; }
.st-input--search{ width:280px; max-width:100%; }

.st-field{ margin-bottom:18px; }
.st-field:last-child{ margin-bottom:0; }
.st-field > label{
	display:block; margin:0 0 8px;
	color:var(--st-ink); font-size:0.92em; font-weight:600;
}
.st-req{ color:var(--st-danger); margin-left:3px; }
.st-hint{
	display:block; margin:7px 0 0;
	color:var(--st-muted); font-size:0.86em; line-height:1.6;
}
.st-counter{
	display:block; margin-top:7px; text-align:right;
	color:var(--st-muted); font-size:0.86em;
}
.st-counter.is-full{ color:var(--st-danger); font-weight:600; }

.st-grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 18px; }

/* ── 읽기 전용 정보 표 ───────────────────────────────────── */
.st-info{
	display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
	background:var(--st-line); border:1px solid var(--st-line);
	border-radius:var(--st-radius-ctl); overflow:hidden;
}
.st-info--1col{ grid-template-columns:1fr; }
.st-info .st-info-row{ display:flex; background:#fff; }
.st-info .st-info-label{
	flex:0 0 108px; padding:13px 14px; background:#f7f9fc;
	color:var(--st-muted); font-size:0.9em; font-weight:600;
	display:flex; align-items:center;
}
.st-info .st-info-value{
	flex:1 1 auto; min-width:0; padding:13px 14px;
	color:var(--st-ink); font-size:0.94em; font-weight:500;
	display:flex; align-items:center; word-break:break-all;
}
.st-info .st-info-value:empty::before{ content:'-'; color:var(--st-muted); }

/* ── 안내문 ──────────────────────────────────────────────── */
.st-notice{
	margin:18px 0 0; padding:18px 20px;
	border:1px solid #eef1f6; border-radius:var(--st-radius-ctl); background:#f7f9fc;
}
.st-notice ul{ margin:0; padding:0; list-style:none; }
.st-notice li{
	position:relative; margin:0 0 7px; padding-left:15px;
	color:var(--st-body); font-size:0.9em; line-height:1.65; word-break:keep-all;
}
.st-notice li:last-child{ margin-bottom:0; }
.st-notice li::before{
	content:''; position:absolute; left:2px; top:0.62em;
	width:4px; height:4px; border-radius:50%; background:#c3cbd8;
}
.st-notice li.is-warn{ color:var(--st-warn); font-weight:600; }
.st-notice li.is-warn::before{ background:#e0a63a; }

/* ── 동의 박스 ───────────────────────────────────────────── */
.st-agree{
	display:flex; align-items:center; gap:10px;
	margin-top:14px; padding:15px 18px;
	border:1px solid var(--st-line); border-radius:var(--st-radius-ctl); background:#fff;
	cursor:pointer;
	transition:border-color .16s ease, background .16s ease;
}
.st-agree:hover{ border-color:#c8d2e2; }
.st-agree.is-checked{ border-color:var(--st-primary); background:rgba(0,102,255,0.04); }
.st-agree input{
	width:19px; height:19px; margin:0; flex:0 0 auto;
	accent-color:var(--st-primary); cursor:pointer;
}
.st-agree label{
	margin:0; color:var(--st-ink); font-size:0.94em; font-weight:500;
	cursor:pointer; word-break:keep-all;
}

/* ── 첨부파일 ────────────────────────────────────────────── */
.st-file{
	display:flex; align-items:center; gap:12px; flex-wrap:wrap;
	padding:18px; border:1px dashed #cfd9e8;
	border-radius:var(--st-radius-ctl); background:#f9fbfe;
}
.st-file-none{ color:var(--st-muted); font-size:0.9em; }
.st-file-name{
	display:none; align-items:center; gap:8px; min-width:0;
	padding:8px 12px; border-radius:999px; background:rgba(0,102,255,0.07);
}
.st-file-name > label{
	margin:0; color:var(--st-muted); font-size:0.84em; font-weight:600; white-space:nowrap;
}
.st-file-name p{
	margin:0; max-width:280px;
	color:var(--st-primary); font-size:0.9em; font-weight:500;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.st-file-clear{
	border:0; background:transparent; padding:0 2px; margin:0;
	color:var(--st-muted); font-size:0.95em; line-height:1; cursor:pointer;
}
.st-file-clear:hover{ color:var(--st-danger); }
.st-file-down{
	display:inline-flex; align-items:center; gap:8px;
	color:var(--st-primary); font-size:0.94em; font-weight:500;
	text-decoration:none; word-break:break-all;
}
.st-file-down:hover{ text-decoration:underline; text-underline-offset:3px; }
.st-file-down img{ width:18px; height:18px; flex:0 0 auto; }

/* ── 상세 보기 ───────────────────────────────────────────── */
.st-view-top{ padding:24px 28px; border-bottom:1px solid var(--st-line); background:#fbfcfe; }
.st-view-mark{
	display:inline-flex; align-items:center; justify-content:center;
	width:34px; height:34px; margin-bottom:12px;
	border-radius:10px; background:var(--st-primary);
	color:#fff; font-weight:700; font-size:1em;
}
.st-view-mark.is-answer{ background:var(--st-success); }
.st-view-title{
	margin:0 0 12px; color:var(--st-ink);
	font-weight:700; font-size:1.25em; line-height:1.5; word-break:keep-all;
}
.st-meta{
	display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px;
	margin:0; padding:0; list-style:none;
	color:var(--st-muted); font-size:0.9em;
}
.st-meta li{ display:inline-flex; align-items:center; gap:6px; margin:0; }
.st-meta li i{ color:#b3bccb; font-size:0.88em; }
.st-view-contact{
	display:flex; flex-wrap:wrap; gap:10px;
	padding:16px 28px; border-bottom:1px solid var(--st-line); background:#fff;
}
.st-view-contact .st-item{
	display:inline-flex; align-items:center; gap:8px;
	padding:7px 14px; border-radius:999px;
	background:#f4f7fb; border:1px solid #e9eef6; font-size:0.9em;
}
.st-view-contact .st-item b{ color:var(--st-muted); font-weight:500; }
.st-view-contact .st-item span{ color:var(--st-ink); font-weight:500; }
.st-view-body{
	padding:30px 28px; min-height:180px;
	color:var(--st-body); line-height:1.85;
	word-break:break-word; overflow-wrap:break-word;
}
.st-view-body img{ max-width:100%; height:auto; }
.st-view-body a{ color:var(--st-primary); }
.st-view-file{ margin:0 28px 28px; }
.st-view-file .st-file-label{
	color:var(--st-muted); font-size:0.86em; font-weight:600; white-space:nowrap;
}

/* ── 확인 창 ─────────────────────────────────────────────── */
.st-modal{
	position:fixed; inset:0; z-index:9999;
	display:none; align-items:center; justify-content:center; padding:20px;
	background:rgba(16,24,40,0.55);
	-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.st-modal.is-open{ display:flex; }
.st-modal-box{
	width:100%; max-width:400px; padding:30px 28px 24px;
	background:#fff; border-radius:18px; text-align:center;
	box-shadow:0 24px 60px rgba(16,24,40,0.28);
	animation:stPop .18s ease-out;
}
@keyframes stPop{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.st-modal-icon{
	display:inline-flex; align-items:center; justify-content:center;
	width:52px; height:52px; margin-bottom:16px;
	border-radius:50%; background:#fdecee; color:var(--st-danger); font-size:1.2em;
}
.st-modal-icon.is-done{ background:#e8f7f1; color:var(--st-success); }
.st-modal h4{ margin:0 0 8px; color:var(--st-ink); font-weight:700; font-size:1.1em; line-height:1.5; }
.st-modal-target{
	margin:0 0 10px; padding:10px 14px; border-radius:10px;
	background:var(--st-bg); color:var(--st-body); font-size:0.92em; font-weight:500;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.st-modal-desc{
	margin:0 0 22px; color:var(--st-muted); font-size:0.9em; line-height:1.65; word-break:keep-all;
}
.st-modal-error{
	display:none; margin:0 0 18px; padding:11px 14px;
	border:1px solid #f7ccd2; border-radius:10px; background:#fdecee;
	color:#c82333; font-size:0.9em; font-weight:500; line-height:1.6;
	text-align:left; word-break:break-all;
}
.st-modal-error.is-on{ display:block; }
.st-modal-actions{ display:flex; gap:8px; }
.st-modal-actions .st-btn{ flex:1 1 0; min-width:0; }
body.st-modal-open{ overflow:hidden; }

/* ── 반응형 ──────────────────────────────────────────────── */
@media (max-width:768px){
	.st-section{ padding:40px 0 70px; }
	.st-head h2,
	.st-page-title{ font-size:var(--fs-2xl); }
	.st-card--pad{ padding:22px 18px; }
	.st-grid2{ grid-template-columns:1fr; }
	.st-info{ grid-template-columns:1fr; }
	.st-file{ flex-direction:column; align-items:stretch; }
	.st-file-name p{ max-width:100%; }
	.st-actions{ flex-direction:column-reverse; align-items:stretch; }
	.st-actions--split{ flex-direction:column-reverse; }
	.st-actions-group{ flex-direction:column; align-items:stretch; }
	.st-btn{ width:100%; }
	.st-modal-actions{ flex-direction:row; }
	.st-modal-actions .st-btn{ width:auto; }

	.st-view-top{ padding:20px 18px; }
	.st-view-contact{ padding:14px 18px; gap:8px; }
	.st-view-body{ padding:22px 18px; }
	.st-view-file{ margin:0 18px 20px; }
}

@media (max-width:640px){
	/* 표 → 카드 */
	.st-table--card thead{ display:none; }
	.st-table--card,
	.st-table--card tbody,
	.st-table--card tr,
	.st-table--card td{ display:block; width:100%; }
	.st-table--card tr{ padding:14px 16px; border-bottom:1px solid #eef1f6; }
	.st-table--card td{ border:0; padding:0; text-align:left; }
	.st-table--card .st-col-no{ display:none !important; }
	.st-table--card td.st-col-subject{ margin-bottom:6px; padding-left:0; }
	.st-table--card td.st-col-subject a{ font-weight:600; }
	.st-table--card .st-col-writer,
	.st-table--card .st-col-date{
		display:inline-block !important; width:auto;
		color:var(--st-muted); font-size:0.88em;
	}
	/* 카드형에서는 위에서 준 좌우 여백을 되돌립니다 */
	.st-section .st-table--card td:first-child,
	.st-section .st-table--card td:last-child{ padding-left:0; padding-right:0; }
	.st-table--card .st-col-writer::after{ content:'·'; margin:0 6px; color:#c9d2df; }

	.st-search{ flex-direction:column; align-items:stretch; padding:16px; }
	.st-select--auto,
	.st-input--search{ width:100%; }
	.st-search .st-btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
	.st-section *,
	.st-modal *{ transition:none !important; animation:none !important; }
}

/* ==================================================================
   회원 페이지 공용 (login / register / join / find / secede / result)
   ------------------------------------------------------------------
   여기부터는 각 회원 페이지의 <style> 블록에서 옮겨 온 것입니다.
   값은 옮기기 전과 동일합니다. 클래스 이름만 st- 로 통일했습니다.
================================================================== */

/* 결과 안내 화면 (가입완료 · 비밀번호변경 · 탈퇴완료 · 임시비밀번호) */
.st-section--tall{ padding:80px 0 100px; }

.st-result{
	max-width:620px; margin:0 auto; padding:56px 46px 46px;
	text-align:center; background:#fff;
	border:1px solid var(--st-line); border-radius:20px;
	box-shadow:0 20px 60px rgba(16,24,40,0.10);
}

/* 원형 일러스트 + 배지 */
.st-result-visual{
	position:relative; width:170px; height:170px; margin:0 auto 28px;
	border-radius:50%;
	background:radial-gradient(circle at 50% 45%, #eaf2ff 0%, #f3f7ff 60%, #f7faff 100%);
	display:flex; align-items:center; justify-content:center;
	animation:stPopIn .5s cubic-bezier(.22,1.2,.4,1) both;
}
.st-result-visual img{ width:118px; height:auto; display:block; }
.st-result-check{
	position:absolute; right:6px; bottom:6px;
	width:52px; height:52px; border-radius:50%;
	border:4px solid #fff; color:#fff; font-size:var(--fs-lg);
	display:flex; align-items:center; justify-content:center;
	background:linear-gradient(135deg,#12b76a,#39d68e);
	box-shadow:0 8px 20px rgba(18,183,106,0.35);
	animation:stPopIn .45s .28s cubic-bezier(.22,1.4,.4,1) both;
}
.st-result-check.is-blue{
	background:linear-gradient(135deg,var(--st-primary),#3a8bff);
	box-shadow:0 8px 20px rgba(0,102,255,0.35);
}
.st-result-check.is-red{
	background:linear-gradient(135deg,#e5484d,#f2777a);
	box-shadow:0 8px 20px rgba(229,72,77,0.35);
}
@keyframes stPopIn{
	from{ opacity:0; transform:scale(.6); }
	to{ opacity:1; transform:scale(1); }
}

/* 상태 라벨 */
.st-eyebrow{
	display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
	padding:7px 16px; border-radius:999px;
	background:rgba(18,183,106,0.10); color:#12b76a;
	font-weight:800; font-size:var(--fs-xs);
}
.st-eyebrow.is-blue{ background:rgba(0,102,255,0.09); color:var(--st-primary); }
.st-eyebrow.is-red{ background:rgba(229,72,77,0.09); color:#e5484d; }

.st-result h2{
	margin:0 0 12px; color:var(--st-ink);
	font-weight:800; font-size:var(--fs-2xl); line-height:1.4; word-break:keep-all;
}
.st-result > p{
	max-width:430px; margin:0 auto;
	color:var(--st-body); font-size:var(--fs-base); line-height:1.8; word-break:keep-all;
}

/* 파란 안내 상자 (체크 목록) */
.st-infobox{
	margin:28px 0 0; padding:18px 20px; border-radius:12px; text-align:left;
	background:rgba(0,102,255,0.05); border:1px solid rgba(0,102,255,0.14);
}
.st-infobox h4{
	display:flex; align-items:center; gap:8px; margin:0 0 12px;
	color:var(--st-ink); font-weight:800; font-size:var(--fs-base);
}
.st-infobox h4 i{ color:var(--st-primary); font-size:var(--fs-base); }
.st-infobox ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
/* [수정] 기존에는 li 를 flex 로 잡았습니다.
   그러면 li 안의 글자 덩어리·<a>·<strong> 이 각각 별개의 칸으로 취급되어
   사이사이가 gap 만큼 벌어지고 문장이 조각조각 흩어집니다.
   아이콘만 왼쪽에 띄우고 본문은 보통 문장으로 흐르게 합니다. */
.st-infobox li{
	position:relative; padding-left:21px;
	color:var(--st-body); font-size:var(--fs-xs); line-height:1.7; word-break:keep-all;
}
.st-infobox li i{
	position:absolute; left:0; top:0.55em;
	color:var(--st-primary); font-size:var(--fs-2xs);
}
.st-infobox strong{ color:var(--st-ink); }
.st-infobox a{ color:var(--st-primary); font-weight:700; text-decoration:underline; }
.st-infobox.is-red{ background:rgba(229,72,77,0.05); border-color:rgba(229,72,77,0.16); }
.st-infobox.is-red h4 i,
.st-infobox.is-red li i{ color:#e5484d; }

/* 결과 화면 버튼 줄 (주 버튼 + 보조 버튼) */
.st-result-actions{
	display:flex; gap:12px; margin-top:30px; padding-top:28px;
	border-top:1px solid var(--st-line);
}
.st-result-actions .st-btn{ height:54px; font-size:var(--fs-base); font-weight:800; border-radius:12px; }
.st-result-actions .st-btn--primary{ flex:1 1 auto; }
.st-result-actions .st-btn--ghost{
	flex:0 0 168px; border-color:transparent; background:#eef1f6; color:var(--st-body);
}
.st-result-actions .st-btn--ghost:hover{ background:#e3e7ee; color:var(--st-body); }

@media (max-width:575px){
	.st-section--tall{ padding:50px 0 70px; }
	.st-result{ padding:38px 22px 32px; }
	.st-result h2{ font-size:var(--fs-xl); }
	.st-result-visual{ width:140px; height:140px; }
	.st-result-visual img{ width:96px; }
	.st-result-actions{ flex-direction:column-reverse; }
	.st-result-actions .st-btn{ width:100%; }
	.st-result-actions .st-btn--ghost{ flex:0 0 50px; height:50px; }
}

@media (prefers-reduced-motion:reduce){
	.st-result-visual,
	.st-result-check{ animation:none !important; }
}

/* 아이콘만 있는 원형 배지 (탈퇴완료 등) */
.st-result-badge{
	width:66px; height:66px; margin:0 auto 22px; border-radius:50%;
	background:#eef1f6; color:var(--st-muted); font-size:var(--fs-2xl);
	display:flex; align-items:center; justify-content:center;
}

/* 본문 아래 삽화 */
.st-result-illust{ margin:24px 0 4px; }
.st-result-illust img{ width:150px; max-width:55%; height:auto; }

/* 회색 안내 상자 (아이콘 목록) */
.st-plainbox{
	margin:26px 0 0; padding:18px 20px; border-radius:12px; text-align:left;
	background:#f7f9fc; border:1px solid var(--st-line);
}
.st-plainbox ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
/* st-infobox 와 같은 이유로 flex 를 쓰지 않습니다 */
.st-plainbox li{
	position:relative; padding-left:21px;
	color:var(--st-body); font-size:var(--fs-xs); line-height:1.7; word-break:keep-all;
}
.st-plainbox li i{
	position:absolute; left:0; top:0.55em;
	color:var(--st-muted); font-size:var(--fs-2xs);
}

/* 카드 밖 하단 문의 안내 */
.st-result-foot{
	margin:18px 0 0; text-align:center;
	color:var(--st-muted); font-size:var(--fs-xs); line-height:1.6;
}
.st-result-foot a{ color:var(--st-muted); text-decoration:underline; text-underline-offset:2px; }
.st-result-foot a:hover{ color:var(--st-primary); }

/* 원형 배지 색상 변형 */
.st-result-badge.is-green{ background:rgba(15,157,110,0.10); color:var(--st-success); font-size:var(--fs-2xl);
	animation:stPopIn .45s cubic-bezier(.2,.9,.3,1.2) both; }
.st-result-badge.is-blue{ background:rgba(0,102,255,0.10); color:var(--st-primary); font-size:var(--fs-2xl);
	animation:stPopIn .45s cubic-bezier(.2,.9,.3,1.2) both; }
.st-result-badge.is-red{ background:rgba(220,53,69,0.10); color:var(--st-danger); font-size:var(--fs-2xl);
	animation:stPopIn .45s cubic-bezier(.2,.9,.3,1.2) both; }
.st-result-badge.is-warn{ background:rgba(183,121,31,0.10); color:var(--st-warn); font-size:var(--fs-2xl);
	animation:stPopIn .45s cubic-bezier(.2,.9,.3,1.2) both; }

/* 결과 화면 바깥 묶음 (단계 표시가 카드 밖에 있을 때) */
.st-result-wrap{ max-width:660px; margin:0 auto; }
.st-result-wrap .st-result{ max-width:100%; }

/* 진행 단계 (약관동의 → 정보입력 → 가입완료) */
.st-steps{
	display:flex; align-items:center; justify-content:center;
	flex-wrap:wrap; gap:0 6px; margin:0 0 28px; padding:0; list-style:none;
}
.st-steps li{
	display:inline-flex; align-items:center; gap:8px;
	color:var(--st-muted); font-size:var(--fs-xs); font-weight:700;
}
.st-steps li b{
	width:24px; height:24px; border-radius:50%;
	display:inline-flex; align-items:center; justify-content:center;
	background:#e4e8ef; color:#98a0ae; font-size:var(--fs-2xs); font-weight:800;
}
.st-steps li.is-done b{ background:rgba(0,102,255,0.14); color:var(--st-primary); }
.st-steps li.is-active{ color:var(--st-primary); }
.st-steps li.is-active b{ background:var(--st-primary); color:#fff; }
.st-steps .st-step-line{ width:34px; height:2px; margin:0 4px; border-radius:2px; background:var(--st-line); }

/* 아이디 표시 칩 */
.st-idchip{
	display:inline-flex; align-items:center; gap:8px;
	margin:16px 0 0; padding:8px 16px; border-radius:999px;
	background:#f2f5fa; border:1px solid var(--st-line);
	color:var(--st-ink); font-size:var(--fs-base); font-weight:700;
}
.st-idchip i{ color:var(--st-primary); font-size:var(--fs-xs); }
.st-idchip em{ font-style:normal; color:var(--st-muted); font-weight:600; }

/* 다음에 할 수 있는 것 목록 */
.st-next{ margin-top:30px; padding-top:26px; border-top:1px solid var(--st-line); text-align:left; }
.st-next h3{
	display:flex; align-items:center; gap:8px; margin:0 0 16px;
	color:var(--st-ink); font-weight:800; font-size:var(--fs-base);
}
.st-next h3 i{ color:var(--st-primary); font-size:var(--fs-base); }
.st-next ul{ list-style:none; margin:0; padding:0; }
.st-next li{
	display:flex; align-items:flex-start; gap:12px; margin-bottom:14px;
	font-size:var(--fs-base); line-height:1.6; word-break:keep-all;
}
.st-next li:last-child{ margin-bottom:0; }
.st-next li .st-ico{
	flex:0 0 auto; width:32px; height:32px; border-radius:9px;
	background:rgba(0,102,255,0.08); color:var(--st-primary);
	display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs);
}
.st-next li strong{ display:block; margin-bottom:2px; color:var(--st-ink); font-weight:700; }
.st-next li span span{ display:block; color:var(--st-muted); font-size:var(--fs-xs); }

/* 주의 상자 */
.st-warnbox{
	display:flex; align-items:flex-start; gap:11px; text-align:left;
	margin:26px 0 0; padding:16px 18px; border-radius:12px;
	background:rgba(183,121,31,0.08); border:1px solid rgba(183,121,31,0.22);
	color:var(--st-body); font-size:var(--fs-xs); line-height:1.7; word-break:keep-all;
}
.st-warnbox i{ color:var(--st-warn); margin-top:4px; flex:0 0 auto; }
.st-warnbox strong{ color:var(--st-ink); font-weight:800; }

/* 번호가 붙은 안내 목록 */
.st-steplist{ list-style:none; margin:22px 0 0; padding:0; text-align:left; }
.st-steplist li{
	position:relative; padding-left:36px; margin-bottom:12px;
	font-size:var(--fs-base); line-height:1.6; word-break:keep-all;
}
.st-steplist li:last-child{ margin-bottom:0; }
.st-steplist b{
	position:absolute; left:0; top:0.1em;
	width:24px; height:24px; border-radius:50%;
	background:rgba(0,102,255,0.10); color:var(--st-primary);
	display:inline-flex; align-items:center; justify-content:center;
	font-size:var(--fs-2xs); font-weight:800;
}

/* 결과 화면 버튼 줄 ? 구분선 없는 형태 */
.st-result-actions--plain{ padding-top:0; border-top:0; }

@media (max-width:767px){
	.st-steps li{ font-size:var(--fs-xs); }
	.st-steps .st-step-line{ width:18px; margin:0 2px; }
}

/* ==================================================================
   입력 폼 계열 (find_id / register / join / login / secede)
================================================================== */

.st-wrap--md{ max-width:920px; }

/* 카드 2단 배치
   [2026-08-05] align-items:start 였습니다. 두 카드가 각자 내용 높이만큼만
   잡혀서 아이디 찾기 / 비밀번호 찾기 상자의 아래끝이 어긋났습니다.
   stretch 로 높이를 맞추고, 남는 공간이 카드 하단 각주(.st-cardnote) 위로
   가도록 카드를 세로 flex 로 두었습니다. 각주와 폼 사이 18px 은 폼의
   margin-bottom 으로 지킵니다(각주 쪽 margin-top 은 auto 라 0 이 될 수 있음). */
.st-cards2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; }
.st-cards2 > .st-card{ display:flex; flex-direction:column; }
/* .st-card + .st-card 의 margin-top:18px 은 세로로 쌓을 때 쓰는 값입니다.
   그리드 안에서는 두 번째 칸에만 걸려, 오른쪽 카드만 위가 18px 내려가고
   그만큼 높이가 줄었습니다(아래끝은 맞고 높이만 다른 증상). 여기서는 끕니다. */
.st-cards2 > .st-card + .st-card{ margin-top:0; }
.st-cards2 > .st-card > form{ margin-bottom:18px; }
.st-cards2 > .st-card > .st-cardnote{ margin-top:auto; }

/* 카드 머리 (아이콘 + 제목 + 설명) */
.st-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.st-card-head h3{ margin:0; color:var(--st-ink); font-weight:800; font-size:var(--fs-lg); }
.st-card-ico{
	flex:0 0 auto; width:40px; height:40px; border-radius:11px;
	background:rgba(0,102,255,0.10); color:var(--st-primary);
	display:flex; align-items:center; justify-content:center; font-size:var(--fs-base);
}
.st-card-desc{
	margin:0 0 22px; color:var(--st-muted);
	font-size:var(--fs-xs); line-height:1.65; word-break:keep-all;
}

/* 아이콘이 들어간 입력창 */
.st-inputbox{ position:relative; }
.st-inputbox > i{
	position:absolute; left:16px; top:50%; transform:translateY(-50%);
	color:var(--st-muted); font-size:var(--fs-base); pointer-events:none;
	transition:color .18s ease;
}
.st-inputbox input{
	width:100%; height:52px; padding:0 16px 0 44px;
	border:1.5px solid var(--st-line); border-radius:12px;
	background:#fbfcfe; color:var(--st-ink);
	font-family:inherit; font-size:var(--fs-base); outline:none; box-shadow:none;
	transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.st-inputbox input::placeholder{ color:#b6bdc9; }
.st-inputbox input:focus{
	border-color:var(--st-primary); background:#fff;
	box-shadow:0 0 0 4px rgba(0,102,255,0.12);
}
.st-inputbox input:focus ~ i{ color:var(--st-primary); }

/* 입력 라벨 (오른쪽에 상태 표시가 붙을 수 있음) */
.st-form-field{ margin-bottom:16px; }
.st-form-field > label{
	display:flex; align-items:center; gap:6px; flex-wrap:wrap;
	margin:0 0 8px; color:var(--st-ink); font-weight:700; font-size:var(--fs-xs);
}
.st-req{ color:var(--st-danger); margin-left:3px; }

/* 상태 표시 (인증 전 / 인증 완료) */
.st-tag{
	display:inline-flex; align-items:center; gap:5px;
	margin-left:auto; padding:3px 9px; border-radius:999px;
	font-size:var(--fs-2xs); font-weight:700; white-space:nowrap;
}
.st-tag i{ font-size:var(--fs-2xs); }
.st-tag.is-wait{ background:rgba(183,121,31,0.10); color:var(--st-warn); }
.st-tag.is-done{ background:rgba(15,157,110,0.10); color:var(--st-success); }

/* 큰 제출 버튼 */
.st-btn--block{ width:100%; }
.st-btn--xl{ height:54px; font-size:var(--fs-base); font-weight:800; border-radius:12px; }
.st-btn--outline{
	background:#fff; color:var(--st-primary);
	border:1.5px solid var(--st-primary); box-shadow:none;
}
.st-btn--outline:hover,
.st-btn--outline:focus{
	background:var(--st-primary); color:#fff;
	box-shadow:0 10px 24px rgba(0,102,255,0.26);
}
.st-btn.is-off,
.st-btn--primary.is-off{
	background:#c3cbd8; border-color:transparent; color:#fff;
	box-shadow:none; transform:none;
}
.st-btn.is-off:hover,
.st-btn--primary.is-off:hover{ background:#c3cbd8; transform:none; box-shadow:none; }

/* 입력창 + 옆 버튼 */
.st-inline{ display:flex; gap:9px; align-items:stretch; }
.st-inline .st-inputbox{ flex:1 1 auto; min-width:0; }
.st-side-btn{
	flex:0 0 112px; height:52px; border-radius:12px; cursor:pointer;
	border:1.5px solid var(--st-primary); background:#fff; color:var(--st-primary);
	font-family:inherit; font-weight:700; font-size:var(--fs-xs);
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	transition:background .18s ease, color .18s ease, box-shadow .18s ease, opacity .16s ease;
}
.st-side-btn:hover{ background:var(--st-primary); color:#fff; box-shadow:0 8px 18px rgba(0,102,255,0.24); }
.st-side-btn i{ font-size:var(--fs-xs); }
.st-side-btn[disabled]{ pointer-events:none; opacity:0.55; }

/* 카드 하단 각주 */
.st-cardnote{
	display:flex; align-items:flex-start; gap:8px;
	margin:18px 0 0; padding-top:16px; border-top:1px solid var(--st-line);
	color:var(--st-muted); font-size:var(--fs-xs); line-height:1.6; word-break:keep-all;
}
.st-cardnote i{ margin-top:3px; flex:0 0 auto; }

/* 하단 링크 줄 */
.st-links{
	display:flex; align-items:center; justify-content:center;
	gap:0 18px; flex-wrap:wrap; margin:28px 0 0; padding:0; list-style:none;
}
.st-links li{ position:relative; }
.st-links li + li::before{
	content:''; position:absolute; left:-9px; top:50%; transform:translateY(-50%);
	width:1px; height:12px; background:var(--st-line);
}
.st-links a{
	color:var(--st-body); font-size:var(--fs-base); font-weight:600;
	text-decoration:none; transition:color .18s ease;
}
.st-links a:hover{ color:var(--st-primary); text-decoration:underline; text-underline-offset:3px; }
.st-links a.is-strong{ color:var(--st-primary); font-weight:700; }

/* 페이지 맨 아래 문의 각주 */
.st-footnote{
	margin:16px 0 0; text-align:center;
	color:var(--st-muted); font-size:var(--fs-xs); line-height:1.6;
}
.st-footnote a{ color:var(--st-muted); text-decoration:underline; text-underline-offset:2px; }
.st-footnote a:hover{ color:var(--st-primary); }

@media (max-width:767px){
	.st-cards2{ grid-template-columns:1fr; gap:18px; }
	.st-head h2{ font-size:var(--fs-2xl); }
}
@media (max-width:479px){
	.st-inline{ flex-wrap:wrap; }
	.st-side-btn{ flex:1 1 100%; }
}

/* ── 약관 동의 (register.php) ─────────────────────────────── */
.st-alert{
	display:flex; align-items:flex-start; gap:11px;
	margin-bottom:18px; padding:16px 18px; border-radius:14px;
	background:rgba(220,53,69,0.06); border:1px solid rgba(220,53,69,0.22);
	color:var(--st-body); font-size:var(--fs-base); line-height:1.65; word-break:keep-all;
}
.st-alert i{ color:var(--st-danger); margin-top:4px; flex:0 0 auto; }

.st-agree-all{
	display:flex; align-items:center; gap:12px;
	margin-bottom:18px; padding:18px 22px; border-radius:14px;
	background:#fff; border:1.5px solid var(--st-line);
	box-shadow:0 6px 18px rgba(16,24,40,0.05);
	transition:border-color .18s ease, background .18s ease;
}
.st-agree-all.is-on{ border-color:var(--st-primary); background:rgba(0,102,255,0.04); }
.st-agree-all label{
	margin:0; cursor:pointer; color:var(--st-ink);
	font-weight:800; font-size:var(--fs-base); line-height:1.4;
}
.st-agree-all .st-agree-sub{
	display:block; margin-top:3px;
	color:var(--st-muted); font-weight:500; font-size:var(--fs-xs);
}
.st-agree-all input[type="checkbox"]{ width:22px; height:22px; }

.st-doc{
	margin-bottom:18px; overflow:hidden; border-radius:18px;
	background:#fff; border:1px solid var(--st-line);
	box-shadow:0 10px 30px rgba(16,24,40,0.06);
	transition:border-color .18s ease;
}
.st-doc.is-agreed{ border-color:rgba(0,102,255,0.45); }
.st-doc input[type="checkbox"]{
	flex:0 0 auto; width:20px; height:20px; margin:0;
	accent-color:var(--st-primary); cursor:pointer;
}
.st-agree-all input[type="checkbox"]{
	flex:0 0 auto; margin:0; accent-color:var(--st-primary); cursor:pointer;
}
.st-doc-head{
	display:flex; align-items:center; gap:10px;
	padding:18px 22px; border-bottom:1px solid var(--st-line);
}
.st-doc-head h3{
	display:flex; align-items:center; gap:9px; margin:0;
	color:var(--st-ink); font-weight:800; font-size:var(--fs-md);
}
.st-doc-head h3 i{ color:var(--st-primary); font-size:var(--fs-base); }
.st-req-tag{
	margin-left:auto; flex:0 0 auto; padding:4px 10px; border-radius:999px;
	background:rgba(0,102,255,0.10); color:var(--st-primary);
	font-size:var(--fs-2xs); font-weight:800;
}

.st-doc-scroll{ position:relative; }
.st-doc-body{
	max-height:300px; overflow-y:auto; overscroll-behavior:contain;
	padding:22px 24px 30px;
	color:var(--st-body); font-size:var(--fs-base); line-height:1.85; word-break:keep-all;
	scrollbar-width:thin; scrollbar-color:#d7dde8 transparent;
}
.st-doc-body:focus-visible{ outline:2px solid rgba(0,102,255,0.35); outline-offset:-2px; }
.st-doc-body h5{ margin:22px 0 8px; color:var(--st-ink); font-weight:800; font-size:var(--fs-base); line-height:1.5; }
.st-doc-body h5:first-child{ margin-top:0; }
.st-doc-body p{ margin:0 0 6px; }
.st-doc-body .st-doc-empty{ color:var(--st-muted); text-align:center; padding:24px 0; }
.st-doc-body::-webkit-scrollbar{ width:10px; }
.st-doc-body::-webkit-scrollbar-track{ background:transparent; }
.st-doc-body::-webkit-scrollbar-thumb{
	background:#d7dde8; border-radius:99px;
	border:3px solid #fff; background-clip:padding-box;
}
.st-doc-body::-webkit-scrollbar-thumb:hover{ background:#c2cad8; background-clip:padding-box; }

.st-doc-fade{
	position:absolute; left:1px; right:11px; bottom:0; height:44px;
	background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
	pointer-events:none; opacity:1; transition:opacity .2s ease;
}
.st-doc-fade.is-hidden{ opacity:0; }

.st-doc-foot{
	display:flex; align-items:center; gap:11px;
	padding:15px 22px; background:#fbfcfe; border-top:1px solid var(--st-line);
}
.st-doc-foot label{ margin:0; cursor:pointer; color:var(--st-ink); font-weight:700; font-size:var(--fs-base); }
.st-scroll-hint{
	margin-left:auto; display:inline-flex; align-items:center; gap:6px;
	color:var(--st-muted); font-size:var(--fs-xs);
}

/* 하단 큰 버튼 줄 (보조 + 주 버튼) */
.st-form-actions{ display:flex; gap:12px; margin-top:28px; }
.st-form-actions .st-btn{ height:56px; font-size:var(--fs-md); font-weight:800; border-radius:12px; }
.st-form-actions .st-btn--primary{ flex:1 1 auto; order:2; }
.st-form-actions .st-btn--ghost{
	flex:0 0 130px; order:1;
	border-color:transparent; background:#eef1f6; color:var(--st-body);
}
.st-form-actions .st-btn--ghost:hover{ background:#e3e7ee; color:var(--st-body); }

@media (max-width:767px){
	.st-doc-head{ padding:16px 18px; }
	.st-doc-body{ padding:18px 18px 26px; max-height:260px; }
	.st-doc-foot{ padding:14px 18px; flex-wrap:wrap; }
	.st-scroll-hint{ display:none; }
	.st-agree-all{ padding:16px 18px; }
	.st-form-actions{ flex-direction:column; }
	.st-form-actions .st-btn{ width:100%; }
	.st-form-actions .st-btn--primary{ order:1; }
	.st-form-actions .st-btn--ghost{ order:2; flex:0 0 50px; height:50px; }
}

/* ── 입력 카드 · 섹션 (join / join_upd / secede) ──────────── */
.st-formcard{
	background:#fff; border:1px solid var(--st-line); border-radius:18px;
	box-shadow:0 18px 50px rgba(16,24,40,0.10); padding:36px 38px;
}
.st-fsection + .st-fsection{ margin-top:30px; padding-top:26px; border-top:1px solid var(--st-line); }
.st-fsection-title{
	display:flex; align-items:center; gap:9px; margin:0 0 6px;
	color:var(--st-ink); font-weight:800; font-size:var(--fs-md);
}
.st-fsection-title i{ color:var(--st-primary); font-size:var(--fs-base); }
.st-fsection-desc{
	margin:0 0 20px; color:var(--st-muted);
	font-size:var(--fs-xs); line-height:1.6; word-break:keep-all;
}

/* 기본 입력창 (아이콘 없는 형태) */
.st-formcard .form-control,
.st-formcard input[type="text"],
.st-formcard input[type="email"],
.st-formcard input[type="tel"],
.st-formcard input[type="password"]{
	width:100%; height:52px; padding:0 15px;
	border:1.5px solid var(--st-line); border-radius:12px;
	background:#fbfcfe; color:var(--st-ink);
	font-family:inherit; font-size:var(--fs-base); box-shadow:none;
	transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.st-formcard input::placeholder{ color:#b6bdc9; }
.st-formcard input:hover{ border-color:#d3d9e4; }
.st-formcard input:focus{
	outline:none; border-color:var(--st-primary); background:#fff;
	box-shadow:0 0 0 4px rgba(0,102,255,0.12);
}

.st-fielditem{ margin-bottom:20px; }
.st-fielditem:last-child{ margin-bottom:0; }
.st-label{
	display:flex; align-items:center; gap:6px; flex-wrap:wrap;
	margin:0 0 8px; color:var(--st-ink); font-weight:700; font-size:var(--fs-base);
}
.st-req-mark{ color:var(--st-primary); font-weight:800; }
.st-help{ margin:7px 0 0; color:var(--st-muted); font-size:var(--fs-xs); line-height:1.6; word-break:keep-all; }

/* 입력 + 옆 버튼 (join 계열은 input 이 직접 자식) */
.st-inline > input{ flex:1 1 auto; min-width:0; }
.st-side-btn--wide{ flex:0 0 118px; font-size:var(--fs-base); }

/* 비밀번호 보기 토글 */
.st-pw-box{ position:relative; }
.st-pw-box input{ padding-right:48px; }
.st-eye{
	position:absolute; right:7px; top:50%; transform:translateY(-50%);
	width:38px; height:38px; border:0; background:transparent;
	color:var(--st-muted); cursor:pointer; border-radius:9px;
	display:flex; align-items:center; justify-content:center;
	transition:color .18s ease, background .18s ease;
}
.st-eye:hover{ color:var(--st-primary); background:rgba(0,102,255,0.07); }

/* 입력 아래 한 줄 안내 */
.st-inline-msg{ display:block; margin-top:7px; font-size:var(--fs-xs); font-weight:600; line-height:1.5; }
.st-inline-msg.is-ok{ color:var(--st-success); }
.st-inline-msg.is-ng{ color:var(--st-danger); }

/* 아이디 중복확인 결과 ? 기존 JS 클래스명을 그대로 씁니다 */
.st-section .fail-check-id{ border-color:var(--st-danger) !important; box-shadow:0 0 0 4px rgba(220,53,69,0.10) !important; }
.st-section .success-check-id{ border-color:var(--st-success) !important; box-shadow:0 0 0 4px rgba(15,157,110,0.12) !important; }
.st-section .fail-id-comment{ display:block; margin-top:7px; color:var(--st-danger); font-size:var(--fs-xs); font-weight:600; }
.st-section .success-id-comment{ display:block; margin-top:7px; color:var(--st-success); font-size:var(--fs-xs); font-weight:600; }
.st-section .hide-id-comment{ display:none; }

/* 비밀번호 규칙 체크리스트 */
.st-rules{ list-style:none; margin:9px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; }
.st-rules li{
	display:inline-flex; align-items:center; gap:6px;
	color:var(--st-muted); font-size:var(--fs-xs); font-weight:600; transition:color .18s ease;
}
.st-rules li i{ font-size:var(--fs-2xs); opacity:0.5; }
.st-rules li.is-ok{ color:var(--st-success); }
.st-rules li.is-ok i{ opacity:1; }

/* 진행 중 표시 */
.st-btn--primary.is-loading{ pointer-events:none; opacity:0.72; transform:none; box-shadow:none; }
.st-spin{
	width:16px; height:16px; border-radius:50%;
	border:2px solid rgba(255,255,255,0.45); border-top-color:#fff;
	animation:stSpin .7s linear infinite;
}
@keyframes stSpin{ to{ transform:rotate(360deg); } }

/* 구분선이 있는 하단 버튼 줄 */
.st-form-actions--top{ margin-top:32px; padding-top:26px; border-top:1px solid var(--st-line); }

@media (max-width:767px){
	.st-formcard{ padding:26px 20px; }
	.st-side-btn--wide{ flex:0 0 100px; font-size:var(--fs-xs); }
}

/* 제목 아래 설명 안의 링크 */
.st-lead a{ color:var(--st-primary); font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ==================================================================
   [페이지 전용] 아래는 특정 페이지에서만 쓰이는 부품입니다.
   다른 페이지에서 재사용할 일이 없어 클래스 이름은 원래대로 두고
   위치만 이 파일로 옮겼습니다. (PHP 파일에는 CSS 가 남지 않습니다)
   각 블록은 자기 페이지 클래스(.lg-page 등) 안에서만 적용됩니다.
================================================================== */


/* ------------------------------------------------------------------
   로그인  ?  login.php
------------------------------------------------------------------ */
/* ============================================================
   로그인 페이지 : 모던 카드형 UI (scoped: .lg-page)
   ※ 모든 스타일은 .lg-page 안에서만 적용 → 전역 CSS 영향 없음
   [2026-07 개선]
   A안 : 회원가입 / 아이디·비밀번호 찾기 링크를 폼 상단·라벨 줄로 이동
          → 카드 최하단에 있던 lg-links 제거 (스크롤 없이 노출)
   B안 : 모바일(991px 이하)에서 폼 패널을 브랜드 패널보다 먼저 배치
============================================================ */
.lg-page{
	--lg-primary:#0066ff;
	--lg-primary-dark:#0047b3;
	--lg-ink:#1a1d24;
	--lg-body:#3f4654;
	--lg-muted:#8b93a1;
	--lg-line:#e4e8ef;
	--lg-bg:#f5f7fb;
	--lg-radius:20px;
	background:var(--lg-bg);
	padding:70px 0 90px;
}
.lg-page *{ box-sizing:border-box; }
/* 카드 : 좌 브랜드 / 우 폼 */
.lg-page .lg-card{
	max-width:960px; margin:0 auto;
	background:#fff;
	border:1px solid var(--lg-line);
	border-radius:var(--lg-radius);
	box-shadow:0 20px 60px rgba(16,24,40,0.10);
	overflow:hidden;
	display:flex; flex-wrap:wrap;
}
/* 좌측 브랜드 패널 */
.lg-page .lg-aside{
	flex:1 1 380px; min-width:300px;
	background:linear-gradient(150deg,#0047b3 0%,#0066ff 55%,#3a8bff 100%);
	color:#fff; padding:52px 46px;
	display:flex; flex-direction:column; justify-content:center;
	position:relative; overflow:hidden;
}
.lg-page .lg-aside::after{
	content:''; position:absolute;
	right:-90px; bottom:-90px;
	width:260px; height:260px; border-radius:50%;
	background:rgba(255,255,255,0.10);
}
.lg-page .lg-aside::before{
	content:''; position:absolute;
	right:40px; top:-60px;
	width:150px; height:150px; border-radius:50%;
	background:rgba(255,255,255,0.07);
}
.lg-page .lg-aside-inner{ position:relative; z-index:1; }
.lg-page .lg-aside-eyebrow{
	display:inline-block;
	background:rgba(255,255,255,0.16);
	border:1px solid rgba(255,255,255,0.24);
	border-radius:999px; padding:6px 14px;
	font-size:var(--fs-xs); font-weight:700; letter-spacing:0.06em;
	margin-bottom:22px;
}
.lg-page .lg-aside h2{
	color:#fff; font-weight:800;
	font-size:var(--fs-3xl); line-height:1.4; margin:0 0 24px;
	word-break:keep-all;
}
.lg-page .lg-aside p{
	color:rgba(255,255,255,0.86);
	font-size:var(--fs-base); line-height:1.8; margin:0 0 28px;
	word-break:keep-all;
}
/* 브랜드 패널 : 기능 목록 (아이콘 + 제목 + 설명) */
.lg-page .lg-aside-list{ list-style:none; margin:0; padding:0; }
.lg-page .lg-aside-list li{
	display:flex; align-items:flex-start; gap:14px;
	margin-bottom:20px;
}
.lg-page .lg-aside-list li:last-child{ margin-bottom:0; }
.lg-page .lg-aside-ico{
	flex:0 0 auto; width:34px; height:34px; border-radius:10px;
	background:rgba(255,255,255,0.16);
	border:1px solid rgba(255,255,255,0.22);
	display:flex; align-items:center; justify-content:center;
	font-size:var(--fs-xs); color:#fff;
}
.lg-page .lg-aside-txt strong{
	display:block; color:#fff; font-weight:700;
	font-size:var(--fs-base); line-height:1.4; margin:0 0 3px;
}
.lg-page .lg-aside-txt span{
	display:block; color:rgba(255,255,255,0.78);
	font-size:var(--fs-xs); line-height:1.6; word-break:keep-all;
}
/* 하단 보조 문구 : 구분선 없이 여백만으로 분리 */
.lg-page .lg-aside-foot{
	margin:24px 0 0; padding:0;
	color:rgba(255,255,255,0.72);
	font-size:var(--fs-xs); line-height:1.6; word-break:keep-all;
}
/* 우측 폼 패널 */
.lg-page .lg-form-wrap{
	flex:1 1 420px; min-width:300px;
	padding:52px 48px;
	display:flex; flex-direction:column; justify-content:center;
}
/* ------------------------------------------------------------
   [2026-08-07] "로그인이 필요한 페이지입니다" 안내 배너

   lib/check-login.php 가 ?need=login 을 붙여 보낼 때만 나옵니다.
   예전에는 빈 화면에 브라우저 기본 경고창을 띄우고 확인을 눌러야
   여기로 넘어왔습니다. 이제 경고창 없이 바로 오고, 이유는 이 배너가
   말해 줍니다.
------------------------------------------------------------ */
.lg-page .lg-need{
	display:flex; align-items:flex-start; gap:13px;
	margin:0 0 24px; padding:16px 18px;
	background:#eef4ff; border:1px solid #bcd3fb; border-left:4px solid var(--st-primary);
	border-radius:12px;
}
.lg-page .lg-need-ico{
	flex:0 0 auto; width:34px; height:34px; border-radius:50%;
	display:inline-flex; align-items:center; justify-content:center;
	background:var(--st-primary); color:#fff; font-size:var(--fs-xs);
}
.lg-page .lg-need-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.lg-page .lg-need-txt b{ color:#0b3f8f; font-weight:800; font-size:var(--fs-base); }
.lg-page .lg-need-txt span{ color:#3f5a86; font-size:var(--fs-xs); line-height:1.6; }

.lg-page .lg-form-head{ margin-bottom:26px; }
.lg-page .lg-form-head h3{
	color:var(--lg-ink); font-weight:800;
	font-size:var(--fs-2xl); margin:0 0 8px;
}
.lg-page .lg-form-head p{
	color:var(--lg-muted); font-size:var(--fs-base); line-height:1.6; margin:0;
}
/* [A안] 폼 제목 아래 회원가입 유도 링크 */
.lg-page .lg-head-link{
	color:var(--lg-primary); font-weight:700;
	text-decoration:underline; text-underline-offset:2px;
	transition:color .18s ease;
}
.lg-page .lg-head-link:hover{ color:var(--lg-primary-dark); text-decoration:underline; }
/* 보조 안내 (Seetrol DESK) : 최소 강조 ? 폼 하단 각주 */
.lg-page .lg-note{
	margin:16px 0 0; text-align:center;
	color:var(--lg-muted); font-size:var(--fs-xs); line-height:1.6;
	word-break:keep-all;
}
.lg-page .lg-note a{
	color:var(--lg-muted); text-decoration:underline; text-underline-offset:2px;
	transition:color .18s ease;
}
.lg-page .lg-note a:hover{ color:var(--lg-primary); }
/* 입력 필드 */
.lg-page .lg-field{ margin-bottom:18px; }
.lg-page .lg-field label{
	display:block; color:var(--lg-ink);
	font-weight:700; font-size:var(--fs-xs); margin:0 0 8px;
}
/* [A안] 라벨 + 우측 보조 링크 한 줄 배치 */
.lg-page .lg-label-row{
	display:flex; align-items:center; justify-content:space-between;
	gap:12px; margin:0 0 8px;
}
.lg-page .lg-label-row label{ margin:0; }
.lg-page .lg-inline-link{
	font-size:var(--fs-xs); font-weight:600; color:var(--lg-muted);
	text-decoration:none; white-space:nowrap;
	transition:color .18s ease;
}
.lg-page .lg-inline-link:hover{ color:var(--lg-primary); text-decoration:underline; }
.lg-page .lg-input-box{ position:relative; }
.lg-page .lg-input-box > i.lg-lead-icon{
	position:absolute; left:16px; top:50%; transform:translateY(-50%);
	color:var(--lg-muted); font-size:var(--fs-base); pointer-events:none;
	transition:color .18s ease;
}
.lg-page .lg-input-box input{
	width:100%; height:54px;
	padding:0 16px 0 44px;
	border:1.5px solid var(--lg-line);
	border-radius:12px;
	background:#fbfcfe;
	color:var(--lg-ink); font-size:var(--fs-base); font-weight:500;
	outline:none; box-shadow:none;
	transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.lg-page .lg-input-box input::placeholder{ color:#b6bdc9; font-weight:400; }
.lg-page .lg-input-box input:focus{
	border-color:var(--lg-primary);
	background:#fff;
	box-shadow:0 0 0 4px rgba(0,102,255,0.12);
}
.lg-page .lg-input-box input:focus ~ i.lg-lead-icon{ color:var(--lg-primary); }
.lg-page .lg-input-box input[type="password"],
.lg-page .lg-input-box input.has-toggle{ padding-right:48px; }
/* 비밀번호 보기 토글 */
.lg-page .lg-eye{
	position:absolute; right:6px; top:50%; transform:translateY(-50%);
	width:38px; height:38px; border:0; background:transparent;
	color:var(--lg-muted); cursor:pointer; border-radius:9px;
	display:flex; align-items:center; justify-content:center;
	transition:color .18s ease, background .18s ease;
}
.lg-page .lg-eye:hover{ color:var(--lg-primary); background:rgba(0,102,255,0.07); }
/* reCAPTCHA */
.lg-page .lg-captcha{
	margin:6px 0 20px;
	display:flex; justify-content:center;
}
.lg-page .lg-captcha .g-recaptcha{ transform-origin:center; }
/* 로그인 버튼 */
.lg-page .lg-submit{
	width:100%; height:56px; border:0; cursor:pointer;
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	background:linear-gradient(135deg,var(--lg-primary),#3a8bff);
	color:#fff; font-weight:800; font-size:var(--fs-md);
	border-radius:12px;
	box-shadow:0 10px 24px rgba(0,102,255,0.28);
	transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.lg-page .lg-submit:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,102,255,0.36); color:#fff; }
.lg-page .lg-submit:active{ transform:translateY(0); filter:brightness(0.96); }
/* 반응형 */
@media (max-width:991px){
	.lg-page{ padding:44px 0 64px; }
	.lg-page .lg-card{ max-width:560px; flex-direction:column; }
	/* [B안] 모바일에서 로그인 폼을 먼저 노출 → 브랜드 패널은 아래로 */
	.lg-page .lg-form-wrap{ order:1; }
	.lg-page .lg-aside{ order:2; }
	.lg-page .lg-aside{ flex:1 1 100%; padding:34px 30px; }
	.lg-page .lg-aside h2{ font-size:var(--fs-xl); margin-bottom:20px; }
	.lg-page .lg-aside p{ margin-bottom:20px; }
	.lg-page .lg-aside-list li{ margin-bottom:16px; }
	.lg-page .lg-aside-foot{ margin-top:20px; }
	.lg-page .lg-form-wrap{ flex:1 1 100%; padding:34px 30px 40px; }
}
@media (max-width:479px){
	.lg-page{ padding:30px 0 50px; }
	.lg-page .lg-form-wrap{ padding:28px 20px 34px; }
	.lg-page .lg-aside{ padding:28px 22px; }
	.lg-page .lg-form-head h3{ font-size:var(--fs-xl); }
	/* 좁은 화면에서 라벨 줄이 좁아지면 링크를 아래로 흘림 */
	.lg-page .lg-label-row{ flex-wrap:wrap; gap:4px 12px; }
	/* 좁은 화면에서 reCAPTCHA 위젯 축소 */
	.lg-page .lg-captcha .g-recaptcha{ transform:scale(0.86); }
}


/* ------------------------------------------------------------------
   회원탈퇴 신청  ?  secede.php
------------------------------------------------------------------ */
/* ============================================================
   회원탈퇴 : 경고형 확인 페이지 (scoped: .sc-page)
============================================================ */
.sc-page{
	--sc-primary:#0066ff;
	--sc-danger:#e0524d;
	--sc-danger-dark:#c2403b;
	--sc-ink:#1a1d24;
	--sc-body:#3f4654;
	--sc-muted:#8b93a1;
	--sc-line:#e4e8ef;
	--sc-bg:#f5f7fb;
	--sc-radius:20px;
	background:var(--sc-bg);
	padding:70px 0 95px;
}
.sc-page *{ box-sizing:border-box; }
/* ── 헤더 ── */
.sc-page .sc-head{ text-align:center; max-width:620px; margin:0 auto 34px; }
.sc-page .sc-eyebrow{
	display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
	background:rgba(224,82,77,0.10); color:var(--sc-danger);
	font-weight:700; font-size:var(--fs-base); padding:8px 18px; border-radius:999px;
}
.sc-page .sc-head h2{ color:var(--sc-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 12px; line-height:1.35; }
.sc-page .sc-head p{ color:var(--sc-body); font-size:var(--fs-base); line-height:1.75; margin:0; word-break:keep-all; }
/* ── 카드 ── */
.sc-page .sc-card{
	max-width:760px; margin:0 auto;
	background:#fff; border:1px solid var(--sc-line);
	border-radius:var(--sc-radius);
	box-shadow:0 20px 60px rgba(16,24,40,0.10);
	padding:40px 42px 36px;
}
/* 안내 2블록 */
.sc-page .sc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:26px; }
.sc-page .sc-item{
	border:1px solid rgba(224,82,77,0.22);
	background:#fffafa;
	border-radius:14px; padding:26px 24px; text-align:center;
}
.sc-page .sc-item-img{
	width:76px; height:76px; margin:0 auto 16px;
	border-radius:50%; background:#fff;
	border:1px solid rgba(224,82,77,0.16);
	display:flex; align-items:center; justify-content:center;
}
.sc-page .sc-item-img img{ max-width:44px; max-height:44px; display:block; }
.sc-page .sc-item h3{
	color:var(--sc-danger); font-weight:800;
	font-size:var(--fs-md); margin:0 0 10px; line-height:1.4; word-break:keep-all;
}
.sc-page .sc-item p{
	color:var(--sc-body); font-size:var(--fs-base); line-height:1.7;
	margin:0; word-break:keep-all;
}
/* 강조 경고 배너 */
.sc-page .sc-alert{
	display:flex; align-items:flex-start; gap:14px;
	background:linear-gradient(135deg,#fff1f0,#fff7f6);
	border:1.5px solid rgba(224,82,77,0.35);
	border-radius:14px; padding:22px 24px; margin-bottom:22px;
}
.sc-page .sc-alert-icon{
	width:42px; height:42px; border-radius:50%; flex:0 0 auto;
	background:var(--sc-danger); color:#fff;
	display:flex; align-items:center; justify-content:center;
	font-size:var(--fs-md); box-shadow:0 6px 16px rgba(224,82,77,0.32);
}
.sc-page .sc-alert-body{ min-width:0; }
.sc-page .sc-alert-body h4{
	color:var(--sc-danger-dark); font-weight:800;
	font-size:var(--fs-md); margin:0 0 8px; line-height:1.45; word-break:keep-all;
}
.sc-page .sc-alert-body p{
	color:var(--sc-body); font-size:var(--fs-base); line-height:1.75;
	margin:0 0 8px; word-break:keep-all;
}
.sc-page .sc-alert-body p:last-child{ margin-bottom:0; }
.sc-page .sc-alert-body strong{ color:var(--sc-danger-dark); }
.sc-page .sc-alert-body a{ color:var(--sc-danger-dark); font-weight:700; text-decoration:underline; }
/* 삭제 항목 리스트 */
.sc-page .sc-detail{
	background:#f7f9fc; border:1px solid var(--sc-line);
	border-radius:14px; padding:22px 24px; margin-bottom:24px;
}
.sc-page .sc-detail h4{
	display:flex; align-items:center; gap:8px;
	color:var(--sc-ink); font-weight:800; font-size:var(--fs-base); margin:0 0 14px;
}
.sc-page .sc-detail h4 i{ color:var(--sc-danger); font-size:var(--fs-base); }
.sc-page .sc-detail ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.sc-page .sc-detail li{
	display:flex; align-items:flex-start; gap:9px;
	color:var(--sc-body); font-size:var(--fs-base); line-height:1.65; word-break:keep-all;
}
.sc-page .sc-detail li i{ color:var(--sc-danger); font-size:var(--fs-2xs); margin-top:6px; flex:0 0 auto; }
/* 본인 확인 */
.sc-page .sc-verify{
	background:#fff; border:1.5px solid var(--sc-line);
	border-radius:14px; padding:22px 24px; margin-bottom:20px;
}
.sc-page .sc-verify h4{
	display:flex; align-items:center; gap:8px;
	color:var(--sc-ink); font-weight:800; font-size:var(--fs-base); margin:0 0 6px;
}
.sc-page .sc-verify h4 i{ color:var(--sc-primary); font-size:var(--fs-base); }
.sc-page .sc-verify p{ color:var(--sc-muted); font-size:var(--fs-xs); line-height:1.6; margin:0 0 14px; word-break:keep-all; }
.sc-page .sc-pw-box{ position:relative; }
.sc-page .sc-pw-box input{
	width:100%; height:52px;
	border:1.5px solid var(--sc-line); border-radius:12px;
	padding:0 48px 0 15px; font-size:var(--fs-base); color:var(--sc-ink);
	background:#fbfcfe; outline:none;
	transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.sc-page .sc-pw-box input::placeholder{ color:#b6bdc9; }
.sc-page .sc-pw-box input:focus{
	border-color:var(--sc-primary); background:#fff;
	box-shadow:0 0 0 4px rgba(0,102,255,0.12);
}
.sc-page .sc-eye{
	position:absolute; right:6px; top:50%; transform:translateY(-50%);
	width:38px; height:38px; border:0; background:transparent;
	color:var(--sc-muted); cursor:pointer; border-radius:9px;
	display:flex; align-items:center; justify-content:center;
	transition:color .18s ease, background .18s ease;
}
.sc-page .sc-eye:hover{ color:var(--sc-primary); background:rgba(0,102,255,0.07); }
/* 동의 체크 */
.sc-page .sc-agree{
	display:flex; align-items:flex-start; gap:12px; cursor:pointer;
	padding:18px 20px; border-radius:14px;
	border:1.5px solid var(--sc-line); background:#fbfcfe;
	transition:border-color .18s ease, background .18s ease;
	user-select:none;
}
.sc-page .sc-agree:hover{ border-color:rgba(224,82,77,0.4); }
.sc-page .sc-agree.is-on{ border-color:var(--sc-danger); background:rgba(224,82,77,0.05); }
.sc-page .sc-agree input{
	width:20px; height:20px; margin:2px 0 0; flex:0 0 auto;
	accent-color:var(--sc-danger); cursor:pointer;
}
.sc-page .sc-agree span{
	color:var(--sc-ink); font-size:var(--fs-base); font-weight:600;
	line-height:1.6; word-break:keep-all;
}
/* 버튼 */
.sc-page .sc-actions{ display:flex; gap:12px; margin-top:26px; }
.sc-page .sc-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	height:56px; border:none; cursor:pointer; text-decoration:none;
	font-weight:800; font-size:var(--fs-base); border-radius:12px;
	transition:transform .16s ease, box-shadow .16s ease, background .16s ease, filter .16s ease, opacity .16s ease;
}
/* 취소를 주 버튼으로 (되돌릴 수 없는 동작이므로) */
.sc-page .sc-btn-keep{
	flex:1 1 auto;
	background:linear-gradient(135deg,var(--sc-primary),#3a8bff); color:#fff;
	box-shadow:0 10px 24px rgba(0,102,255,0.28);
}
.sc-page .sc-btn-keep:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,102,255,0.36); color:#fff; }
.sc-page .sc-btn-danger{
	flex:0 0 190px;
	background:#fff; color:var(--sc-danger);
	border:1.5px solid var(--sc-danger);
}
.sc-page .sc-btn-danger:hover{ background:var(--sc-danger); color:#fff; box-shadow:0 10px 22px rgba(224,82,77,0.28); }
.sc-page .sc-btn-danger:disabled,
.sc-page .sc-btn-danger[disabled]{
	opacity:0.45; cursor:not-allowed;
	background:#fff; color:var(--sc-danger); box-shadow:none; transform:none;
}
.sc-page .sc-foot{
	text-align:center; color:var(--sc-muted);
	font-size:var(--fs-xs); line-height:1.7; margin:20px 0 0; word-break:keep-all;
}
@media (max-width:767px){
	.sc-page{ padding:48px 0 72px; }
	.sc-page .sc-head h2{ font-size:var(--fs-2xl); }
	.sc-page .sc-card{ padding:28px 20px 26px; }
	.sc-page .sc-grid{ grid-template-columns:1fr; gap:14px; }
	.sc-page .sc-item{ padding:22px 18px; }
	.sc-page .sc-actions{ flex-direction:column; }
	.sc-page .sc-btn-danger{ flex:0 0 52px; height:52px; }
}
@media (prefers-reduced-motion:reduce){
	.sc-page *{ transition:none !important; }
}


/* ------------------------------------------------------------------
   회원정보 수정  ?  join_upd.php
------------------------------------------------------------------ */
/* ============================================================
   Seetrol 회원정보 수정 : 2단 구성 폼 UI (scoped: .mm-page)
   ※ 폼 필드 id/name·AJAX 엔드포인트·검증 로직은 그대로 유지
      (로그인·무료체험 페이지와 동일 디자인 토큰 사용)

   [디자인 보완]
   - 아이디: 비활성 입력창(+클릭 시 alert) → 정적 계정 배지로 교체
   - 폼을 '기본 정보' / '본인 확인' 2개 섹션으로 분리해 위계 정리
   - 휴대폰 인증 상태 배지 추가 (인증 필요 / 인증 완료)
   - 필수 항목 표시, 저장 중 버튼 로딩 상태, 버튼 순서 정리
   - 사용하지 않는 아이디 중복확인 스타일·스크립트 제거
============================================================ */
.mm-page{
	--mm-primary:#0066ff;
	--mm-primary-dark:#0047b3;
	--mm-ink:#1a1d24;
	--mm-body:#3f4654;
	--mm-muted:#8b93a1;
	--mm-line:#e4e8ef;
	--mm-bg:#f5f7fb;
	--mm-danger:#e0524d;
	--mm-success:#0f9d6e;
	--mm-warn:#b7791f;
	--mm-radius:18px;
	--mm-shadow:0 18px 50px rgba(16,24,40,0.10);
	--mm-shadow-sm:0 6px 18px rgba(16,24,40,0.06);
	background:var(--mm-bg);
	padding:66px 0 90px;
}
.mm-page *{ box-sizing:border-box; }

/* ── 헤더 ── */
.mm-page .mm-head{ text-align:center; max-width:640px; margin:0 auto 38px; }
.mm-page .mm-eyebrow{
	display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
	background:rgba(0,102,255,0.10); color:var(--mm-primary);
	font-weight:700; font-size:var(--fs-base); padding:8px 18px; border-radius:999px;
}
.mm-page .mm-head h2{ color:var(--mm-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 12px; line-height:1.35; }
.mm-page .mm-head p{ color:var(--mm-body); font-size:var(--fs-base); line-height:1.75; margin:0; word-break:keep-all; }

/* ── 2단 레이아웃 ── */
.mm-page .mm-layout{
	display:grid; grid-template-columns:minmax(0,1fr) 320px;
	gap:26px; align-items:start; max-width:1080px; margin:0 auto;
}

/* 카드 */
.mm-page .mm-card{
	background:#fff; border:1px solid var(--mm-line);
	border-radius:var(--mm-radius); box-shadow:var(--mm-shadow);
	padding:38px 40px;
}
.mm-page .mm-card-title{
	display:flex; align-items:center; gap:9px;
	color:var(--mm-ink); font-weight:800; font-size:var(--fs-lg);
	margin:0 0 24px; padding-bottom:16px; border-bottom:1px solid var(--mm-line);
}
.mm-page .mm-card-title i{ color:var(--mm-primary); font-size:var(--fs-base); }

/* 섹션 구분 (기본 정보 / 본인 확인) */
.mm-page .mm-section{ margin-top:30px; padding-top:26px; border-top:1px solid var(--mm-line); }
.mm-page .mm-section-title{
	display:flex; align-items:center; gap:8px;
	color:var(--mm-ink); font-weight:800; font-size:var(--fs-base); margin:0 0 6px;
}
.mm-page .mm-section-title i{ color:var(--mm-primary); font-size:var(--fs-base); }
.mm-page .mm-section-desc{ color:var(--mm-muted); font-size:var(--fs-xs); line-height:1.6; margin:0 0 18px; word-break:keep-all; }

/* 계정 배지 (아이디 : 변경 불가 항목을 입력창이 아닌 정보로 표시) */
.mm-page .mm-account{
	display:flex; align-items:center; gap:13px;
	padding:15px 16px; margin-bottom:24px;
	border:1px solid var(--mm-line); border-radius:14px;
	background:#f7f9fc;
}
.mm-page .mm-account-ico{
	flex:0 0 auto; width:40px; height:40px; border-radius:11px;
	background:rgba(0,102,255,0.10); color:var(--mm-primary);
	display:flex; align-items:center; justify-content:center; font-size:var(--fs-base);
}
.mm-page .mm-account-txt{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.mm-page .mm-account-txt em{
	font-style:normal; color:var(--mm-muted);
	font-size:var(--fs-2xs); font-weight:600; letter-spacing:0.02em;
}
.mm-page .mm-account-txt strong{
	color:var(--mm-ink); font-weight:800; font-size:var(--fs-base);
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mm-page .mm-lock{
	display:inline-flex; align-items:center; gap:4px;
	margin-left:auto; flex:0 0 auto; padding:4px 10px; border-radius:999px;
	background:#e8ebf1; color:var(--mm-muted);
	font-size:var(--fs-2xs); font-weight:700; white-space:nowrap;
}
.mm-page .mm-lock i{ font-size:var(--fs-2xs); }

/* 필드 */
.mm-page .mm-field{ display:flex; flex-direction:column; margin-bottom:20px; }
.mm-page .mm-field:last-child{ margin-bottom:0; }
.mm-page .mm-label{
	color:var(--mm-ink); font-weight:700; font-size:var(--fs-base); margin:0 0 8px;
	display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.mm-page .mm-req{ color:var(--mm-primary); font-weight:800; }
.mm-page .mm-help{ color:var(--mm-muted); font-size:var(--fs-xs); line-height:1.6; margin:7px 0 0; word-break:keep-all; }

/* 휴대폰 인증 상태 배지 */
.mm-page .mm-badge{
	display:inline-flex; align-items:center; gap:5px;
	margin-left:auto; padding:4px 10px; border-radius:999px;
	font-size:var(--fs-2xs); font-weight:700; white-space:nowrap;
}
.mm-page .mm-badge i{ font-size:var(--fs-2xs); }
.mm-page .mm-badge--wait{ background:rgba(183,121,31,0.10); color:var(--mm-warn); }
.mm-page .mm-badge--done{ background:rgba(15,157,110,0.10); color:var(--mm-success); }

/* 입력 (기존 form-control / bwhite 클래스 유지) */
.mm-page .form-control{
	width:100%; height:50px;
	border:1.5px solid var(--mm-line); border-radius:12px;
	padding:0 15px; font-size:var(--fs-base); color:var(--mm-ink);
	background:#fbfcfe; box-shadow:none;
	transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.mm-page .form-control::placeholder{ color:#b6bdc9; }
.mm-page .form-control:hover{ border-color:#d3d9e4; }
.mm-page .form-control:focus{
	outline:none; border-color:var(--mm-primary); background:#fff;
	box-shadow:0 0 0 4px rgba(0,102,255,0.12);
}

/* 휴대폰 + 인증 버튼 그룹 */
.mm-page .mm-inline{ display:flex; gap:10px; align-items:stretch; }
.mm-page .mm-inline .form-control{ flex:1 1 auto; min-width:0; }
.mm-page .mm-verify-btn{
	flex:0 0 118px; height:50px; border:1.5px solid var(--mm-primary);
	background:#fff; color:var(--mm-primary);
	font-weight:700; font-size:var(--fs-base); border-radius:12px; cursor:pointer;
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.mm-page .mm-verify-btn:hover{ background:var(--mm-primary); color:#fff; box-shadow:0 8px 18px rgba(0,102,255,0.26); }
.mm-page .mm-verify-btn i{ font-size:var(--fs-xs); }

/* 비밀번호 보기 토글 */
.mm-page .mm-pw-box{ position:relative; }
.mm-page .mm-pw-box .form-control{ padding-right:48px; }
.mm-page .mm-eye{
	position:absolute; right:6px; top:50%; transform:translateY(-50%);
	width:38px; height:38px; border:0; background:transparent;
	color:var(--mm-muted); cursor:pointer; border-radius:9px;
	display:flex; align-items:center; justify-content:center;
	transition:color .18s ease, background .18s ease;
}
.mm-page .mm-eye:hover{ color:var(--mm-primary); background:rgba(0,102,255,0.07); }

/* 버튼 */
.mm-page .mm-actions{ display:flex; gap:12px; margin-top:30px; padding-top:26px; border-top:1px solid var(--mm-line); }
.mm-page .mm-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	cursor:pointer; border:none; height:56px; text-decoration:none;
	font-weight:800; font-size:var(--fs-md); border-radius:12px;
	transition:transform .16s ease, box-shadow .16s ease, background .16s ease, filter .16s ease;
}
.mm-page .mm-btn-primary{
	flex:1 1 auto; order:2;
	background:linear-gradient(135deg,var(--mm-primary),#3a8bff); color:#fff;
	box-shadow:0 10px 24px rgba(0,102,255,0.28);
}
.mm-page .mm-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,102,255,0.36); color:#fff; }
.mm-page .mm-btn-primary:active{ transform:translateY(0); filter:brightness(0.96); }
.mm-page .mm-btn-ghost{ flex:0 0 130px; order:1; background:#eef1f6; color:var(--mm-body); }
.mm-page .mm-btn-ghost:hover{ background:#e3e7ee; color:var(--mm-body); }
/* 저장 중 상태 (중복 제출 차단) */
.mm-page .mm-btn[disabled],
.mm-page .mm-btn.is-loading{
	pointer-events:none; opacity:0.72; transform:none; box-shadow:none; cursor:default;
}
.mm-page .mm-spin{
	width:16px; height:16px; border-radius:50%;
	border:2px solid rgba(255,255,255,0.45); border-top-color:#fff;
	animation:mm-spin .7s linear infinite;
}
@keyframes mm-spin{ to{ transform:rotate(360deg); } }

/* ── 우측 패널 ── */
.mm-page .mm-aside{ position:sticky; top:24px; display:grid; gap:18px; }
.mm-page .mm-panel{
	background:#fff; border:1px solid var(--mm-line);
	border-radius:var(--mm-radius); box-shadow:var(--mm-shadow-sm);
	padding:26px 24px;
}
.mm-page .mm-panel h4{
	display:flex; align-items:center; gap:8px;
	color:var(--mm-ink); font-weight:800; font-size:var(--fs-md); margin:0 0 14px;
}
.mm-page .mm-panel h4 i{ color:var(--mm-primary); font-size:var(--fs-base); }
.mm-page .mm-list{ list-style:none; margin:0; padding:0; }
.mm-page .mm-list li{
	display:flex; align-items:flex-start; gap:9px;
	color:var(--mm-body); font-size:var(--fs-xs); line-height:1.65;
	margin-bottom:11px; word-break:keep-all;
}
.mm-page .mm-list li:last-child{ margin-bottom:0; }
.mm-page .mm-list i{ color:var(--mm-primary); font-size:var(--fs-2xs); margin-top:5px; flex:0 0 auto; }

/* 계정 관리 링크 */
.mm-page .mm-link{
	display:flex; align-items:center; gap:12px;
	padding:13px 14px; border-radius:12px;
	border:1px solid var(--mm-line); background:#fbfcfe;
	color:var(--mm-ink); font-weight:700; font-size:var(--fs-base);
	text-decoration:none; margin-bottom:10px;
	transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.mm-page .mm-link:last-child{ margin-bottom:0; }
.mm-page .mm-link i:first-child{ color:var(--mm-primary); font-size:var(--fs-base); flex:0 0 auto; }
.mm-page .mm-link .mm-link-arrow{ margin-left:auto; color:var(--mm-muted); font-size:var(--fs-xs); }
.mm-page .mm-link:hover{ border-color:var(--mm-primary); background:rgba(0,102,255,0.05); color:var(--mm-primary); }
.mm-page .mm-link:hover i{ color:var(--mm-primary); }
.mm-page .mm-link--danger i:first-child{ color:var(--mm-danger); }
.mm-page .mm-link--danger:hover{ border-color:var(--mm-danger); background:rgba(224,82,77,0.05); color:var(--mm-danger); }
.mm-page .mm-link--danger:hover i{ color:var(--mm-danger); }

/* ── 반응형 ── */
@media (max-width:1099px){
	.mm-page .mm-layout{ grid-template-columns:1fr; max-width:760px; }
	.mm-page .mm-aside{ position:static; grid-template-columns:1fr 1fr; }
}
@media (max-width:767px){
	.mm-page{ padding:46px 0 70px; }
	.mm-page .mm-head{ margin-bottom:28px; }
	.mm-page .mm-head h2{ font-size:var(--fs-2xl); }
	.mm-page .mm-card{ padding:26px 20px; }
	.mm-page .mm-aside{ grid-template-columns:1fr; }
	.mm-page .mm-verify-btn{ flex:0 0 104px; font-size:var(--fs-xs); }
	.mm-page .mm-actions{ flex-direction:column; }
	.mm-page .mm-btn-primary{ order:1; }
	.mm-page .mm-btn-ghost{ order:2; flex:0 0 50px; height:50px; }
}
@media (max-width:479px){
	.mm-page .mm-account{ flex-wrap:wrap; }
	.mm-page .mm-lock{ margin-left:0; }
	.mm-page .mm-inline{ flex-wrap:wrap; }
	.mm-page .mm-verify-btn{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){
	.mm-page *{ transition:none !important; animation:none !important; }
}


/* ------------------------------------------------------------------
   휴대폰 인증 팝업 (가입)  ?  phone.php
------------------------------------------------------------------ */
	/* 휴대폰 인증 팝업 (scoped: body.pv) ? 600 × 340 기준 */
	body.pv{
		--pv-primary:#0066ff;
		--pv-ink:#1a1d24;
		--pv-body:#3f4654;
		--pv-muted:#8b93a1;
		--pv-line:#e4e8ef;
		--pv-danger:#dc3545;
		margin:0; padding:0; background:#fff; color:var(--pv-body);
		font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
		-webkit-font-smoothing:antialiased;
	}
	body.pv *{ box-sizing:border-box; }
	body.pv .wrap{
		max-width:none; width:100%; min-height:100vh; margin:0;
		padding:20px 24px 18px;
		display:flex; flex-direction:column; justify-content:center;
	}

	body.pv .pv-head{ display:flex; align-items:center; gap:10px; }
	body.pv .pv-ico{
		flex:0 0 auto; width:34px; height:34px; border-radius:10px;
		background:rgba(0,102,255,0.10); color:var(--pv-primary);
		display:flex; align-items:center; justify-content:center; font-size:var(--fs-base);
	}
	body.pv .pv-head h1{ margin:0; color:var(--pv-ink); font-size:var(--fs-md); font-weight:800; letter-spacing:-0.01em; }
	body.pv .pv-sent{ margin:9px 0 14px; font-size:var(--fs-xs); line-height:1.55; color:var(--pv-muted); }
	body.pv .pv-sent b{ color:var(--pv-ink); font-weight:700; letter-spacing:0.01em; }

	body.pv .phone-code-div{ display:flex; gap:9px; align-items:stretch; margin:0; }
	body.pv .phone-code-div input{
		flex:1 1 auto; min-width:0; width:auto; height:52px;
		border:1.5px solid var(--pv-line); border-radius:12px;
		background:#fbfcfe; color:var(--pv-ink);
		font-size:var(--fs-xl); font-weight:800; letter-spacing:0.42em; text-indent:0.42em;
		text-align:center; padding:0 10px;
		transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
	}
	body.pv .phone-code-div input::placeholder{
		font-size:var(--fs-base); font-weight:400; letter-spacing:0; text-indent:0; color:#b6bdc9;
	}
	body.pv .phone-code-div input:focus{
		outline:none; border-color:var(--pv-primary); background:#fff;
		box-shadow:0 0 0 4px rgba(0,102,255,0.12);
	}
	body.pv .phone-code-div button{
		flex:0 0 104px; height:52px; border:0; border-radius:12px; cursor:pointer;
		background:linear-gradient(135deg,var(--pv-primary),#3a8bff); color:#fff;
		font-size:var(--fs-base); font-weight:800;
		display:inline-flex; align-items:center; justify-content:center;
		box-shadow:0 8px 20px rgba(0,102,255,0.26);
		transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
	}
	body.pv .phone-code-div button:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,102,255,0.34); }
	body.pv .phone-code-div button:active{ transform:translateY(0); }
	body.pv .phone-code-div button[disabled]{ pointer-events:none; opacity:0.6; box-shadow:none; transform:none; }

	body.pv .pv-foot{
		display:flex; align-items:center; justify-content:space-between;
		gap:10px; margin-top:12px; flex-wrap:wrap;
	}
	body.pv .phone-comment-div{ margin:0; }
	body.pv .phone-comment-div p{ margin:0; font-size:var(--fs-xs); line-height:1.5; color:var(--pv-muted); word-break:keep-all; }
	body.pv #tryCount-div{
		flex:0 0 auto; display:inline-flex; align-items:center; gap:4px;
		padding:4px 11px; border-radius:999px;
		background:#f0f2f6; color:var(--pv-muted);
		font-size:var(--fs-2xs); font-weight:700; white-space:nowrap;
	}
	body.pv #tryCount-div.is-warn{ background:rgba(220,53,69,0.10); color:var(--pv-danger); }
	body.pv #tryCount{ font-weight:800; }

	@media (max-width:479px){
		body.pv .wrap{ padding:18px 16px; }
		body.pv .phone-code-div{ flex-wrap:wrap; }
		body.pv .phone-code-div button{ flex:1 1 100%; height:48px; }
		body.pv .pv-foot{ flex-direction:column; align-items:flex-start; }
	}
	@media (prefers-reduced-motion:reduce){
		body.pv *{ transition:none !important; }
	}


/* ------------------------------------------------------------------
   휴대폰 인증 팝업 (정보수정)  ?  phone-upd.php
------------------------------------------------------------------ */
	/* 휴대폰 인증 팝업 (scoped: body.pv) ? 가입용 phone.php 와 동일 */
	body.pv{
		--pv-primary:#0066ff;
		--pv-ink:#1a1d24;
		--pv-body:#3f4654;
		--pv-muted:#8b93a1;
		--pv-line:#e4e8ef;
		--pv-danger:#dc3545;
		margin:0; padding:0; background:#fff; color:var(--pv-body);
		font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
		-webkit-font-smoothing:antialiased;
	}
	body.pv *{ box-sizing:border-box; }
	body.pv .wrap{
		max-width:none; width:100%; min-height:100vh; margin:0;
		padding:20px 24px 18px;
		display:flex; flex-direction:column; justify-content:center;
	}
	body.pv .pv-head{ display:flex; align-items:center; gap:10px; }
	body.pv .pv-ico{
		flex:0 0 auto; width:34px; height:34px; border-radius:10px;
		background:rgba(0,102,255,0.10); color:var(--pv-primary);
		display:flex; align-items:center; justify-content:center; font-size:var(--fs-base);
	}
	body.pv .pv-head h1{ margin:0; color:var(--pv-ink); font-size:var(--fs-md); font-weight:800; letter-spacing:-0.01em; }
	body.pv .pv-sent{ margin:9px 0 14px; font-size:var(--fs-xs); line-height:1.55; color:var(--pv-muted); }
	body.pv .pv-sent b{ color:var(--pv-ink); font-weight:700; letter-spacing:0.01em; }

	body.pv .phone-code-div{ display:flex; gap:9px; align-items:stretch; margin:0; }
	body.pv .phone-code-div input{
		flex:1 1 auto; min-width:0; width:auto; height:52px;
		border:1.5px solid var(--pv-line); border-radius:12px;
		background:#fbfcfe; color:var(--pv-ink);
		font-size:var(--fs-xl); font-weight:800; letter-spacing:0.42em; text-indent:0.42em;
		text-align:center; padding:0 10px;
		transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
	}
	body.pv .phone-code-div input::placeholder{
		font-size:var(--fs-base); font-weight:400; letter-spacing:0; text-indent:0; color:#b6bdc9;
	}
	body.pv .phone-code-div input:focus{
		outline:none; border-color:var(--pv-primary); background:#fff;
		box-shadow:0 0 0 4px rgba(0,102,255,0.12);
	}
	body.pv .phone-code-div button{
		flex:0 0 104px; height:52px; border:0; border-radius:12px; cursor:pointer;
		background:linear-gradient(135deg,var(--pv-primary),#3a8bff); color:#fff;
		font-size:var(--fs-base); font-weight:800;
		display:inline-flex; align-items:center; justify-content:center;
		box-shadow:0 8px 20px rgba(0,102,255,0.26);
		transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
	}
	body.pv .phone-code-div button:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,102,255,0.34); }
	body.pv .phone-code-div button:active{ transform:translateY(0); }
	body.pv .phone-code-div button[disabled]{ pointer-events:none; opacity:0.6; box-shadow:none; transform:none; }

	body.pv .pv-foot{
		display:flex; align-items:center; justify-content:space-between;
		gap:10px; margin-top:12px; flex-wrap:wrap;
	}
	body.pv .phone-comment-div{ margin:0; }
	body.pv .phone-comment-div p{ margin:0; font-size:var(--fs-xs); line-height:1.5; color:var(--pv-muted); word-break:keep-all; }
	body.pv #tryCount-div{
		flex:0 0 auto; display:inline-flex; align-items:center; gap:4px;
		padding:4px 11px; border-radius:999px;
		background:#f0f2f6; color:var(--pv-muted);
		font-size:var(--fs-2xs); font-weight:700; white-space:nowrap;
	}
	body.pv #tryCount-div.is-warn{ background:rgba(220,53,69,0.10); color:var(--pv-danger); }
	body.pv #tryCount{ font-weight:800; }

	@media (max-width:479px){
		body.pv .wrap{ padding:18px 16px; }
		body.pv .phone-code-div{ flex-wrap:wrap; }
		body.pv .phone-code-div button{ flex:1 1 100%; height:48px; }
		body.pv .pv-foot{ flex-direction:column; align-items:flex-start; }
	}
	@media (prefers-reduced-motion:reduce){
		body.pv *{ transition:none !important; }
	}

/* ------------------------------------------------------------------
   무료체험 신청  ?  request_my_demo.php
   ※ 원본 <style> 블록을 값 변경 없이 그대로 옮긴 것입니다.
     모든 규칙이 .demo-page 안에서만 적용됩니다.
------------------------------------------------------------------ */
.demo-page{
	--dm-primary:#0066ff;
	--dm-primary-dark:#0047b3;
	--dm-ink:#1a1d24;
	--dm-body:#3f4654;
	--dm-muted:#8b93a1;
	--dm-line:#e4e8ef;
	--dm-bg:#f5f7fb;
	--dm-radius:18px;
	--dm-shadow:0 18px 50px rgba(16,24,40,0.10);
	--dm-shadow-sm:0 6px 18px rgba(16,24,40,0.06);
	background:var(--dm-bg);
	padding:66px 0 90px;
}
.demo-page *{ box-sizing:border-box; }

/* ── 헤더 ── */
.demo-page .dm-head{ text-align:center; max-width:680px; margin:0 auto 34px; }
.demo-page .dm-badge{
	display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
	background:rgba(0,102,255,0.10); color:var(--dm-primary);
	font-weight:700; font-size:var(--fs-base); padding:9px 20px; border-radius:999px;
}
.demo-page .dm-head h2{ color:var(--dm-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 12px; line-height:1.35; }
.demo-page .dm-head p{ color:var(--dm-body); font-size:var(--fs-base); line-height:1.75; margin:0; word-break:keep-all; }

/* ── 진행 단계 ── */
.demo-page .dm-steps{
	display:flex; justify-content:center; flex-wrap:wrap; gap:0;
	max-width:820px; margin:0 auto 40px;
}
.demo-page .dm-step{
	flex:1 1 0; min-width:170px; position:relative;
	display:flex; flex-direction:column; align-items:center; text-align:center;
	padding:0 10px;
}
.demo-page .dm-step::after{
	content:''; position:absolute; top:19px; left:calc(50% + 26px);
	width:calc(100% - 52px); height:2px; background:var(--dm-line);
}
.demo-page .dm-step:last-child::after{ display:none; }
.demo-page .dm-step-num{
	width:38px; height:38px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:#fff; border:2px solid var(--dm-line);
	color:var(--dm-muted); font-weight:800; font-size:var(--fs-base);
	margin-bottom:10px; position:relative; z-index:1;
}
.demo-page .dm-step.is-now .dm-step-num{
	background:linear-gradient(135deg,var(--dm-primary),#3a8bff);
	border-color:transparent; color:#fff;
	box-shadow:0 6px 16px rgba(0,102,255,0.30);
}
.demo-page .dm-step-label{ color:var(--dm-ink); font-weight:700; font-size:var(--fs-base); margin-bottom:3px; }
.demo-page .dm-step.is-now .dm-step-label{ color:var(--dm-primary); }
.demo-page .dm-step-desc{ color:var(--dm-muted); font-size:var(--fs-xs); line-height:1.5; word-break:keep-all; }

/* ── 본문 2단 레이아웃 ── */
.demo-page .dm-layout{
	display:grid; grid-template-columns:minmax(0,1fr) 320px;
	gap:26px; align-items:start; max-width:1080px; margin:0 auto;
}

/* 폼 카드 */
.demo-page .dm-card{
	background:#fff; border:1px solid var(--dm-line);
	border-radius:var(--dm-radius); box-shadow:var(--dm-shadow);
	padding:38px 40px;
}
.demo-page .dm-card-title{
	display:flex; align-items:center; gap:9px;
	color:var(--dm-ink); font-weight:800; font-size:var(--fs-lg);
	margin:0 0 22px; padding-bottom:16px; border-bottom:1px solid var(--dm-line);
}
.demo-page .dm-card-title i{ color:var(--dm-primary); font-size:var(--fs-base); }
.demo-page .dm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.demo-page .dm-field{ display:flex; flex-direction:column; min-width:0; }
.demo-page .dm-field.full{ grid-column:1 / -1; }

/* 라벨 */
.demo-page .demo-label{
	color:var(--dm-ink); font-weight:700; font-size:var(--fs-base); margin:0 0 8px;
	display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.demo-page .dm-req{ color:#e0524d; font-weight:800; }
.demo-page .dm-lock{
	display:inline-flex; align-items:center; gap:4px;
	margin-left:auto; padding:2px 8px; border-radius:999px;
	background:#f0f2f6; color:var(--dm-muted);
	font-size:var(--fs-2xs); font-weight:600; letter-spacing:0;
}
.demo-page .dm-lock i{ font-size:var(--fs-2xs); }

/* 입력 (기존 form-control 클래스 유지, 스타일만 덮어씀) */
.demo-page .form-control{
	width:100%; height:50px;
	border:1.5px solid var(--dm-line); border-radius:12px;
	padding:0 15px; font-size:var(--fs-base); color:var(--dm-ink);
	background:#fbfcfe; box-shadow:none;
	transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.demo-page .form-control::placeholder{ color:#b6bdc9; }
.demo-page .form-control:focus{
	outline:none; border-color:var(--dm-primary); background:#fff;
	box-shadow:0 0 0 4px rgba(0,102,255,0.12);
}
.demo-page .form-control[readonly]{
	background:#f2f4f8; color:var(--dm-body);
	border-color:#e8ebf1; border-style:dashed; cursor:default;
}
.demo-page .form-control[readonly]:focus{ box-shadow:none; border-color:#e8ebf1; }
.demo-page textarea.form-control{
	height:auto; min-height:132px; padding:14px 15px;
	resize:vertical; line-height:1.7;
}

/* 글자수 카운터 */
.demo-page .dm-count{
	align-self:flex-end; margin-top:7px;
	color:var(--dm-muted); font-size:var(--fs-xs); font-variant-numeric:tabular-nums;
}
.demo-page .dm-count.is-full{ color:#e0524d; font-weight:700; }

/* 회원정보 안내 */
.demo-page .dm-note{
	grid-column:1 / -1; display:flex; align-items:flex-start; gap:10px;
	margin-top:2px; padding:14px 18px; border-radius:12px;
	background:rgba(0,102,255,0.05); border:1px solid rgba(0,102,255,0.14);
	color:var(--dm-body); font-size:var(--fs-xs); line-height:1.65; word-break:keep-all;
}
.demo-page .dm-note > i{ color:var(--dm-primary); margin-top:3px; flex:0 0 auto; }
.demo-page .dm-note strong{ color:var(--dm-ink); }

/* 버튼 */
.demo-page .dm-actions{ display:flex; gap:12px; margin-top:28px; }
.demo-page .dm-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	cursor:pointer; border:none; height:56px;
	font-weight:800; font-size:var(--fs-md); border-radius:12px;
	transition:transform .16s ease, box-shadow .16s ease, background .16s ease, filter .16s ease;
}
.demo-page .dm-btn-primary{
	flex:1 1 auto;
	background:linear-gradient(135deg,var(--dm-primary),#3a8bff); color:#fff;
	box-shadow:0 10px 24px rgba(0,102,255,0.28);
}
.demo-page .dm-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,102,255,0.36); color:#fff; }
.demo-page .dm-btn-primary:active{ transform:translateY(0); filter:brightness(0.96); }
.demo-page .dm-btn-primary:disabled{ opacity:0.55; cursor:not-allowed; transform:none; box-shadow:none; }
.demo-page .dm-btn-ghost{
	flex:0 0 130px; background:#eef1f6; color:var(--dm-body);
}
.demo-page .dm-btn-ghost:hover{ background:#e3e7ee; }

/* ── 우측 안내 패널 ── */
.demo-page .dm-aside{ position:sticky; top:24px; display:grid; gap:18px; }
.demo-page .dm-panel{
	background:#fff; border:1px solid var(--dm-line);
	border-radius:var(--dm-radius); box-shadow:var(--dm-shadow-sm);
	padding:26px 24px;
}
.demo-page .dm-panel--accent{
	background:linear-gradient(150deg,#0047b3 0%,#0066ff 60%,#3a8bff 100%);
	border-color:transparent; color:#fff;
	box-shadow:0 14px 34px rgba(0,102,255,0.28);
}
.demo-page .dm-panel h4{
	display:flex; align-items:center; gap:8px;
	color:var(--dm-ink); font-weight:800; font-size:var(--fs-md); margin:0 0 14px;
}
.demo-page .dm-panel h4 i{ color:var(--dm-primary); font-size:var(--fs-base); }
.demo-page .dm-panel--accent h4{ color:#fff; }
.demo-page .dm-panel--accent h4 i{ color:#cfe1ff; }
.demo-page .dm-panel-num{ font-weight:800; font-size:var(--fs-4xl); line-height:1; margin:0 0 6px; }
.demo-page .dm-panel--accent p{ color:rgba(255,255,255,0.88); font-size:var(--fs-base); line-height:1.7; margin:0; word-break:keep-all; }
.demo-page .dm-list{ list-style:none; margin:0; padding:0; }
/* [수정] li 를 flex 로 잡으면 문장 안에 <strong> 이나 링크가 들어갔을 때
   글자 덩어리마다 gap 이 붙어 문장이 흩어집니다.
   아이콘만 왼쪽에 띄우고 본문은 보통 문장으로 흐르게 합니다. */
.demo-page .dm-list li{
	position:relative; padding-left:20px; margin-bottom:11px;
	color:var(--dm-body); font-size:var(--fs-xs); line-height:1.65; word-break:keep-all;
}
.demo-page .dm-list li:last-child{ margin-bottom:0; }
.demo-page .dm-list i{
	position:absolute; left:0; top:0.5em;
	color:var(--dm-primary); font-size:var(--fs-2xs);
}

/* ── 반응형 ── */
@media (max-width:1099px){
	.demo-page .dm-layout{ grid-template-columns:1fr; max-width:820px; }
	.demo-page .dm-aside{ position:static; grid-template-columns:1fr 1fr; }
}
@media (max-width:767px){
	.demo-page{ padding:46px 0 70px; }
	.demo-page .dm-head h2{ font-size:var(--fs-2xl); }
	.demo-page .dm-card{ padding:26px 20px; }
	.demo-page .dm-grid{ grid-template-columns:1fr; }
	.demo-page .dm-aside{ grid-template-columns:1fr; }
	.demo-page .dm-steps{ margin-bottom:28px; }
	.demo-page .dm-step{ min-width:33.333%; padding:0 4px; }
	.demo-page .dm-step-desc{ display:none; }
	.demo-page .dm-step::after{ top:17px; left:calc(50% + 22px); width:calc(100% - 44px); }
	.demo-page .dm-actions{ flex-direction:column-reverse; }
	.demo-page .dm-btn-ghost{ flex:0 0 50px; height:50px; }
}

/* ------------------------------------------------------------------
   공지사항  ?  support/noticenew.php
   ※ 원본 <style> 블록을 옮기고, 아래 두 가지만 값을 바꿨습니다.
     · .nt-title  : 제목 줄바꿈 허용 (본문과 동일한 규칙)
     · .nt-text   : 긴 본문 접기/펼치기 추가
------------------------------------------------------------------ */
.nt-page{
	--nt-primary:#0066ff;
	--nt-primary-dark:#0047b3;
	--nt-ink:#1a1d24;
	--nt-body:#3f4654;
	--nt-muted:#7a828f;
	--nt-line:rgba(16,24,40,0.08);
	--nt-radius:18px;
	--nt-shadow:0 12px 34px rgba(16,24,40,0.09);
	--nt-shadow-sm:0 6px 18px rgba(16,24,40,0.06);
	--nt-shadow-hover:0 18px 44px rgba(16,24,40,0.13);
	padding:72px 0 90px;
}
.nt-page .nt-inner{ position:relative; z-index:1; }

/* 공통 헤더 */
.nt-page .nt-head{ text-align:center; max-width:720px; margin:0 auto 30px; }
.nt-page .nt-eyebrow{
	display:inline-block; color:var(--nt-primary);
	font-weight:700; letter-spacing:0.04em;
	font-size:var(--fs-lg); margin-bottom:14px;
}
.nt-page .nt-head h2{ color:var(--nt-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 14px; line-height:1.35; }
.nt-page .nt-head p{ color:var(--nt-body); font-size:var(--fs-base); line-height:1.8; margin:0; }

/* 건수 표시 */
.nt-page .nt-count{
	max-width:900px; margin:0 auto 14px;
	color:var(--nt-muted); font-size:var(--fs-base);
}
.nt-page .nt-count b{ color:var(--nt-primary); font-weight:800; }

/* 공지 리스트 */
.nt-page .nt-list{ max-width:900px; margin:0 auto; display:grid; gap:18px; }
.nt-page .nt-empty{
	text-align:center; color:var(--nt-muted); font-size:var(--fs-md);
	background:#fff; border:1px solid var(--nt-line); border-radius:var(--nt-radius);
	box-shadow:var(--nt-shadow-sm); padding:60px 20px; max-width:900px; margin:0 auto;
}
.nt-page .nt-empty i{ display:block; font-size:var(--fs-3xl); color:#c9d2df; margin-bottom:14px; }
.nt-page .nt-item{
	display:flex; gap:20px; align-items:flex-start;
	background:#fff; border:1px solid var(--nt-line);
	border-radius:var(--nt-radius); box-shadow:var(--nt-shadow-sm);
	padding:26px 28px; position:relative; overflow:hidden;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.nt-page .nt-item:hover{ transform:translateY(-3px); box-shadow:var(--nt-shadow-hover); border-color:rgba(0,102,255,0.20); }
.nt-page .nt-item::before{
	content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
	background:linear-gradient(180deg,var(--nt-primary),#3a8bff);
	opacity:0; transition:opacity .2s ease;
}
.nt-page .nt-item:hover::before{ opacity:1; }

/* 고정 공지 */
.nt-page .nt-item.is-pinned{ border-color:rgba(0,102,255,0.28); background:#fbfdff; }
.nt-page .nt-item.is-pinned::before{ opacity:1; }

/* 아이콘 배지 */
.nt-page .nt-badge{
	flex:0 0 52px; width:52px; height:52px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:#eef4ff; border:1px solid rgba(0,102,255,0.12);
	color:var(--nt-primary); font-size:var(--fs-lg);
	transition:background .2s ease, color .2s ease;
}
.nt-page .nt-item:hover .nt-badge{ background:var(--nt-primary); border-color:transparent; color:#fff; }
.nt-page .nt-item.is-pinned .nt-badge{ background:var(--nt-primary); border-color:transparent; color:#fff; }

.nt-page .nt-content{ flex:1 1 auto; min-width:0; }
.nt-page .nt-meta{
	display:flex; align-items:center; flex-wrap:wrap; gap:8px;
	color:var(--nt-muted); font-size:var(--fs-xs); margin-bottom:9px;
}
.nt-page .nt-meta .nt-tag{
	display:inline-flex; align-items:center; gap:5px;
	background:rgba(0,102,255,0.08); color:var(--nt-primary);
	font-weight:700; font-size:var(--fs-2xs); padding:3px 10px; border-radius:999px;
}
.nt-page .nt-meta .nt-pin{
	display:inline-flex; align-items:center; gap:5px;
	background:rgba(0,102,255,0.12); color:var(--nt-primary-dark);
	font-weight:800; font-size:var(--fs-2xs); padding:3px 10px; border-radius:999px;
}
.nt-page .nt-meta .nt-dot{ color:#c9ced8; }
.nt-page .nt-meta .nt-new{
	display:inline-flex; align-items:center;
	background:#ffefef; color:#e0524d;
	font-weight:800; font-size:var(--fs-2xs); letter-spacing:0.04em;
	padding:3px 9px; border-radius:999px;
}
.nt-page .nt-meta .nt-no{ margin-left:auto; font-weight:600; color:#aab0ba; }

/* [수정] 제목
   기존에는 PHP 에서 공백을 &nbsp; 로 바꿔 놓아 제목이 절대 줄바꿈되지
   않았습니다. 긴 제목이 카드를 밀고 나가던 원인입니다. */
.nt-page .nt-title{
	color:var(--nt-ink); font-weight:800; font-size:var(--fs-lg);
	line-height:1.45; margin:0 0 11px;
	word-break:keep-all; overflow-wrap:anywhere;
	transition:color .18s ease;
}
.nt-page .nt-item:hover .nt-title{ color:var(--nt-primary); }

/* 본문 */
.nt-page .nt-text{
	position:relative;
	color:var(--nt-body); font-size:var(--fs-base); line-height:1.85;
	margin:0; max-width:100%;
	white-space:normal;          /* 공백 기준 자동 줄바꿈 허용 */
	word-break:keep-all;         /* 한글은 단어 단위로 자연스럽게 끊음 */
	overflow-wrap:anywhere;      /* 긴 URL·연속 문자열은 강제로 줄바꿈 */
	word-wrap:break-word;        /* 구형 브라우저 호환 */
}
.nt-page .nt-text img{ max-width:100%; height:auto; }
.nt-page .nt-text table{ max-width:100%; }

/* [추가] 긴 본문 접기 ? 목록이 한없이 길어지지 않도록 */
.nt-page .nt-text.is-clamped{
	max-height:180px; overflow:hidden;
}
.nt-page .nt-text.is-clamped::after{
	content:''; position:absolute; left:0; right:0; bottom:0; height:56px;
	background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 88%);
	pointer-events:none;
}
.nt-page .nt-more{
	display:inline-flex; align-items:center; gap:6px;
	margin-top:10px; padding:7px 14px;
	border:1px solid var(--nt-line); border-radius:999px;
	background:#fff; color:var(--nt-body);
	font-family:inherit; font-size:var(--fs-xs); font-weight:700;
	cursor:pointer; transition:border-color .18s ease, color .18s ease;
}
.nt-page .nt-more:hover{ border-color:var(--nt-primary); color:var(--nt-primary); }
.nt-page .nt-more i{ font-size:var(--fs-2xs); transition:transform .18s ease; }
.nt-page .nt-more.is-open i{ transform:rotate(180deg); }

/* 페이지네이션 */
.nt-page .nt-pagination{ display:flex; justify-content:center; margin-top:44px; }
.nt-page .nt-pagination ul{
	display:inline-flex; flex-wrap:wrap; gap:8px;
	list-style:none; margin:0; padding:0;
}
.nt-page .nt-pagination a,
.nt-page .nt-pagination span{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:42px; height:42px; padding:0 12px;
	border-radius:12px; border:1px solid var(--nt-line);
	background:#fff; color:var(--nt-body); font-weight:700; font-size:var(--fs-base);
	text-decoration:none; transition:all .18s ease;
}
.nt-page .nt-pagination a:hover{
	border-color:var(--nt-primary); color:var(--nt-primary);
	box-shadow:var(--nt-shadow-sm);
}
.nt-page .nt-pagination li.active span{
	background:linear-gradient(135deg,var(--nt-primary),#3a8bff);
	border-color:transparent; color:#fff;
	box-shadow:0 8px 20px rgba(0,102,255,0.28);
}

@media (max-width:767px){
	.nt-page{ padding:52px 0 68px; }
	.nt-page .nt-head h2{ font-size:var(--fs-2xl); }
	.nt-page .nt-item{ padding:22px 20px; gap:14px; }
	.nt-page .nt-badge{ flex-basis:44px; width:44px; height:44px; font-size:var(--fs-md); }
	.nt-page .nt-title{ font-size:var(--fs-md); }
	.nt-page .nt-meta .nt-no{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){
	.nt-page *{ transition:none !important; }
}

/* ------------------------------------------------------------------
   제품구매 목록  ?  mall/shop.php
------------------------------------------------------------------ */
.sh-page{
	--sh-primary:#0066ff;
	--sh-ink:#1a1d24;
	--sh-body:#3f4654;
	--sh-muted:#8b93a1;
	--sh-line:#e4e8ef;
	--sh-bg:#f5f7fb;
	background:var(--sh-bg);
	padding:66px 0 90px;
	color:var(--sh-body);
}
.sh-page *{ box-sizing:border-box; }

/* 헤더 */
.sh-page .sh-head{ text-align:center; max-width:680px; margin:0 auto 14px; }
.sh-page .sh-head h2{
	margin:0 0 12px; color:var(--sh-ink);
	font-weight:800; font-size:var(--fs-3xl); line-height:1.35;
}
.sh-page .sh-head p{
	margin:0; color:var(--sh-muted);
	font-size:var(--fs-base); line-height:1.75; word-break:keep-all;
}
.sh-page .sh-count{
	max-width:1140px; margin:26px auto 14px;
	color:var(--sh-muted); font-size:var(--fs-base);
}
.sh-page .sh-count b{ color:var(--sh-primary); font-weight:800; }

/* 격자 */
.sh-page .sh-grid{
	max-width:1140px; margin:0 auto;
	display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}

/* 카드 */
.sh-page .sh-card{
	display:flex; flex-direction:column; height:100%;
	background:#fff; border:1px solid var(--sh-line); border-radius:18px;
	box-shadow:0 8px 24px rgba(16,24,40,0.06);
	overflow:hidden; text-decoration:none;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sh-page .sh-card:hover,
.sh-page .sh-card:focus{
	transform:translateY(-4px);
	box-shadow:0 18px 44px rgba(16,24,40,0.13);
	border-color:rgba(0,102,255,0.28);
	text-decoration:none;
}

/* 이미지 ? 비율 고정 */
/* 제품 사진이 흰 배경으로 제작되어 있어, 칸 배경이 #f7f9fc 이면
   사진의 흰 사각형이 그대로 드러납니다. 흰색으로 맞춥니다. */
.sh-page .sh-thumb{
	position:relative; width:100%; aspect-ratio:4 / 3;
	background:#fff; border-bottom:1px solid var(--sh-line);
	display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sh-page .sh-thumb img{
	width:100%; height:100%; object-fit:contain; padding:18px;
	transition:transform .25s ease;
}
.sh-page .sh-card:hover .sh-thumb img{ transform:scale(1.04); }
.sh-page .sh-thumb .sh-noimg{ color:#c9d2df; font-size:var(--fs-3xl); }

/* 본문 ? 사진 칸이 흰색이 되었으므로 본문은 옅은 회색으로 나눕니다 */
.sh-page .sh-body{
	display:flex; flex-direction:column; flex:1 1 auto; padding:20px 22px 22px;
	background:#f7f9fc;
}
.sh-page .sh-name{
	margin:0 0 10px; color:var(--sh-ink);
	font-weight:800; font-size:var(--fs-md); line-height:1.45;
	word-break:keep-all; transition:color .18s ease;
}
.sh-page .sh-card:hover .sh-name{ color:var(--sh-primary); }

.sh-page .sh-specs{
	display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px;
	padding:0; list-style:none;
}
/* 본문이 회색이 되었으므로 규격 칩은 흰색으로 띄웁니다 */
.sh-page .sh-specs li{
	padding:4px 10px; border-radius:999px;
	background:#fff; border:1px solid var(--sh-line);
	color:var(--sh-body); font-size:var(--fs-2xs); font-weight:600;
	word-break:keep-all;
}

/* 가격 */
.sh-page .sh-price{
	margin-top:auto; padding-top:14px; border-top:1px solid var(--sh-line);
	display:flex; align-items:baseline; gap:5px;
	color:var(--sh-ink); font-weight:800; font-size:var(--fs-xl);
}
.sh-page .sh-price span{ color:var(--sh-body); font-size:var(--fs-base); font-weight:600; }
.sh-page .sh-price.is-call{
	align-items:center; color:var(--sh-primary); font-size:var(--fs-base);
}
.sh-page .sh-price .sh-call-ico{
	display:inline-flex; align-items:center; justify-content:center;
	width:28px; height:28px; border-radius:50%;
	background:rgba(0,102,255,0.10); color:var(--sh-primary);
	font-size:var(--fs-xs); margin-right:4px;
}

/* 자세히 보기 단추 (카드 전체가 링크이므로 모양만 냅니다) */
.sh-page .sh-cta{
	margin-top:14px; padding:11px 14px; border-radius:12px;
	background:#fff; border:1px solid var(--sh-line);
	color:var(--sh-ink); font-size:var(--fs-xs); font-weight:700;
	display:flex; align-items:center; justify-content:center; gap:8px;
	transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.sh-page .sh-cta i{ font-size:var(--fs-2xs); transition:transform .2s ease; }
.sh-page .sh-card:hover .sh-cta,
.sh-page .sh-card:focus .sh-cta{
	background:var(--sh-primary); border-color:var(--sh-primary); color:#fff;
}
.sh-page .sh-card:hover .sh-cta i{ transform:translateX(3px); }

/* 빈 목록 */
.sh-page .sh-empty{
	max-width:1140px; margin:0 auto; padding:70px 20px; text-align:center;
	background:#fff; border:1px solid var(--sh-line); border-radius:18px;
	box-shadow:0 8px 24px rgba(16,24,40,0.06);
	color:var(--sh-muted);
}
.sh-page .sh-empty i{ display:block; font-size:var(--fs-3xl); color:#c9d2df; margin-bottom:14px; }

@media (max-width:991px){
	.sh-page .sh-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
}
@media (max-width:575px){
	.sh-page{ padding:46px 0 70px; }
	.sh-page .sh-head h2{ font-size:var(--fs-2xl); }
	.sh-page .sh-grid{ grid-template-columns:1fr; gap:16px; }
	.sh-page .sh-body{ padding:18px; }
}
@media (prefers-reduced-motion:reduce){
	.sh-page *{ transition:none !important; }
}

/* ------------------------------------------------------------------
   제품 상세  ?  mall/item.php
------------------------------------------------------------------ */
.it-page{
	--it-primary:#0066ff;
	--it-ink:#1a1d24;
	--it-body:#3f4654;
	--it-muted:#8b93a1;
	--it-line:#e4e8ef;
	--it-bg:#f5f7fb;
	background:var(--it-bg);
	padding:56px 0 70px;
	color:var(--it-body);
}
.it-page *{ box-sizing:border-box; }
.it-page .it-wrap{ max-width:1140px; margin:0 auto; }

/* 2단 배치 */
.it-page .it-layout{
	display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
	gap:34px; align-items:start;
}

/* ── 이미지 ── */
.it-gallery{ position:sticky; top:24px; }
.it-main{
	position:relative; width:100%; aspect-ratio:1 / 1;
	background:#fff; border:1px solid var(--it-line); border-radius:18px;
	box-shadow:0 10px 30px rgba(16,24,40,0.06);
	display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.it-main img{ width:100%; height:100%; object-fit:contain; padding:26px; }
.it-main .it-noimg{ color:#c9d2df; font-size:var(--fs-4xl); }

.it-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.it-thumb{
	width:78px; height:78px; padding:6px; cursor:pointer;
	background:#fff; border:1.5px solid var(--it-line); border-radius:12px;
	display:flex; align-items:center; justify-content:center; overflow:hidden;
	transition:border-color .16s ease, box-shadow .16s ease;
}
.it-thumb img{ width:100%; height:100%; object-fit:contain; }
.it-thumb:hover{ border-color:#c8d2e2; }
.it-thumb.is-active{
	border-color:var(--it-primary);
	box-shadow:0 0 0 3px rgba(0,102,255,0.12);
}

/* ── 정보 ── */
.it-info{
	background:#fff; border:1px solid var(--it-line); border-radius:18px;
	box-shadow:0 10px 30px rgba(16,24,40,0.06);
	padding:30px 32px;
}
.it-name{
	margin:0 0 8px; color:var(--it-ink);
	font-weight:800; font-size:var(--fs-2xl); line-height:1.4; word-break:keep-all;
}
.it-lead{
	margin:0 0 20px; color:var(--it-body);
	font-size:var(--fs-base); line-height:1.7; word-break:keep-all;
}
.it-headline{
	display:block; margin:0 0 18px; padding:12px 16px; border-radius:12px;
	background:rgba(0,102,255,0.06); border:1px solid rgba(0,102,255,0.14);
	color:var(--it-ink); font-size:var(--fs-base); font-weight:700; line-height:1.6;
	word-break:keep-all;
}

/* 사양 목록 */
.it-specs{ list-style:none; margin:0 0 22px; padding:0; border-top:1px solid var(--it-line); }
.it-specs li{
	display:flex; gap:14px; padding:12px 2px;
	border-bottom:1px solid #eef1f6;
	font-size:var(--fs-base); line-height:1.6; word-break:keep-all;
}
.it-specs li b{
	flex:0 0 118px; color:var(--it-muted); font-weight:600;
}
.it-specs li span{ flex:1 1 auto; min-width:0; color:var(--it-ink); font-weight:600; }

/* 수량 */
.it-qty{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.it-qty label{ margin:0; color:var(--it-ink); font-weight:700; font-size:var(--fs-base); }
.it-qty select{
	-webkit-appearance:none; -moz-appearance:none; appearance:none;
	height:46px; min-width:130px; padding:0 36px 0 14px;
	border:1.5px solid var(--it-line); border-radius:11px;
	background-color:#fff; color:var(--it-ink);
	font-family:inherit; font-size:var(--fs-base); font-weight:600; cursor:pointer;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b93a1' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 13px center;
	transition:border-color .16s ease, box-shadow .16s ease;
}
.it-qty select:focus{
	outline:none; border-color:var(--it-primary);
	box-shadow:0 0 0 4px rgba(0,102,255,0.12);
}

/* 가격 */
.it-price{
	display:flex; align-items:baseline; flex-wrap:wrap; gap:6px;
	padding:18px 20px; border-radius:14px; background:#f7f9fc;
	border:1px solid var(--it-line); margin-bottom:20px;
}
.it-price .it-price-num{ color:var(--it-ink); font-weight:800; font-size:var(--fs-3xl); line-height:1.2; }
.it-price .it-price-won{ color:var(--it-ink); font-weight:700; font-size:var(--fs-base); }
.it-price .it-price-note{ width:100%; color:var(--it-muted); font-size:var(--fs-xs); }
.it-price.is-call{ align-items:center; gap:10px; }
.it-price.is-call .it-call-ico{
	display:inline-flex; align-items:center; justify-content:center;
	width:38px; height:38px; border-radius:50%;
	background:rgba(0,102,255,0.10); color:var(--it-primary); font-size:var(--fs-base);
}
.it-price.is-call .it-call-label{ color:var(--it-body); font-size:var(--fs-base); font-weight:600; }
.it-price.is-call a{
	color:var(--it-primary); font-weight:800; font-size:var(--fs-lg); text-decoration:none;
}
.it-price.is-call a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* 버튼 */
.it-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.it-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	height:56px; padding:0 18px; margin:0; border-radius:12px;
	border:1.5px solid var(--it-line); background:#fff; color:var(--it-body);
	font-family:inherit; font-size:var(--fs-base); font-weight:800; line-height:1;
	white-space:nowrap; cursor:pointer; text-decoration:none;
	transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.it-btn:hover{ border-color:#c8d2e2; background:#f7f9fc; }
.it-btn.is-primary{
	border-color:transparent; color:#fff;
	background:linear-gradient(135deg,var(--it-primary),#3a8bff);
	box-shadow:0 10px 24px rgba(0,102,255,0.26);
}
.it-btn.is-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,102,255,0.34); color:#fff; }

.it-guide{
	margin:18px 0 0; padding:14px 16px; border-radius:12px;
	background:#f7f9fc; border:1px solid #eef1f6;
	color:var(--it-muted); font-size:var(--fs-xs); line-height:1.7;
}
.it-guide i{ color:#b3bccb; margin-right:6px; }

@media (max-width:991px){
	.it-page .it-layout{ grid-template-columns:1fr; gap:24px; }
	.it-gallery{ position:static; }
	.it-main{ aspect-ratio:4 / 3; }
}
@media (max-width:575px){
	.it-page{ padding:40px 0 60px; }
	.it-info{ padding:22px 18px; }
	.it-name{ font-size:var(--fs-lg); }
	.it-specs li{ flex-direction:column; gap:3px; }
	.it-specs li b{ flex:none; }
	.it-actions{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
	.it-page *{ transition:none !important; }
}

/* ------------------------------------------------------------------
   주문 · 결제  ?  mall/buy/shop_my_pay.php
   ※ 기존 id · name · onclick 은 그대로 두고 겉모양만 바꿉니다.
------------------------------------------------------------------ */
.po-page{
	--po-primary:#0066ff;
	--po-ink:#1a1d24;
	--po-body:#3f4654;
	--po-muted:#8b93a1;
	--po-line:#e4e8ef;
	--po-bg:#f5f7fb;
	background:var(--po-bg);
	padding:56px 0 80px;
	color:var(--po-body);
}
.po-page *{ box-sizing:border-box; }
.po-page .po-wrap{ max-width:1160px; margin:0 auto; }

.po-page .po-head{ text-align:center; margin-bottom:28px; }
.po-page .po-head h2{
	margin:0 0 10px; color:var(--po-ink);
	font-weight:800; font-size:var(--fs-3xl); line-height:1.35;
}
.po-page .po-head p{ margin:0; color:var(--po-muted); font-size:var(--fs-base); }

/* 2단 : 입력 / 요약 */
.po-page .po-layout{
	display:grid; grid-template-columns:minmax(0,1fr) 340px;
	gap:24px; align-items:start;
}

/* 카드 */
.po-card{
	background:#fff; border:1px solid var(--po-line); border-radius:18px;
	box-shadow:0 10px 30px rgba(16,24,40,0.06);
	padding:26px 28px; margin-bottom:18px;
}
.po-card:last-child{ margin-bottom:0; }
.po-card-title{
	display:flex; align-items:center; gap:9px; margin:0 0 20px;
	padding-bottom:14px; border-bottom:1px solid var(--po-line);
	color:var(--po-ink); font-weight:800; font-size:var(--fs-md);
}
.po-card-title i{ color:var(--po-primary); font-size:var(--fs-base); }
.po-card-title small{ margin-left:auto; color:var(--po-muted); font-size:var(--fs-xs); font-weight:500; }

/* 주문 상품 */
.po-item{
	display:flex; align-items:center; gap:16px;
	padding:16px 0; border-bottom:1px solid #eef1f6;
}
.po-item:last-child{ border-bottom:0; }
.po-item-thumb{
	flex:0 0 84px; width:84px; height:84px; padding:8px;
	background:#f7f9fc; border:1px solid var(--po-line); border-radius:12px;
	display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.po-item-thumb img{ width:100%; height:100%; object-fit:contain; }
.po-item-thumb i{ color:#c9d2df; font-size:var(--fs-xl); }
.po-item-body{ flex:1 1 auto; min-width:0; }
.po-item-name{
	margin:0 0 5px; color:var(--po-ink);
	font-weight:700; font-size:var(--fs-base); line-height:1.45; word-break:keep-all;
}
.po-item-spec{ margin:0; color:var(--po-muted); font-size:var(--fs-xs); line-height:1.6; word-break:keep-all; }
.po-item-qty{
	flex:0 0 auto; color:var(--po-body); font-size:var(--fs-base); font-weight:600;
	white-space:nowrap;
}
.po-item-price{
	flex:0 0 auto; min-width:120px; text-align:right;
	color:var(--po-ink); font-weight:800; font-size:var(--fs-base); white-space:nowrap;
}
.po-item-price span{ font-size:var(--fs-xs); font-weight:600; color:var(--po-body); }

/* 입력 */
.po-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.po-field{ min-width:0; }
.po-field.full{ grid-column:1 / -1; }
.po-field > label{
	display:block; margin:0 0 7px;
	color:var(--po-ink); font-size:var(--fs-xs); font-weight:700;
}
.po-page .po-field .form-control,
.po-page .po-field input[type="text"],
.po-page .po-field select{
	width:100%; height:48px; padding:0 14px; margin:0;
	border:1.5px solid var(--po-line); border-radius:11px;
	background-color:#fff; color:var(--po-ink);
	font-family:inherit; font-size:var(--fs-base); box-shadow:none;
	transition:border-color .16s ease, box-shadow .16s ease;
}
.po-page .po-field input:focus,
.po-page .po-field select:focus{
	outline:none; border-color:var(--po-primary);
	box-shadow:0 0 0 4px rgba(0,102,255,0.12);
}
.po-page .po-field input[readonly]{ background:#f2f4f8; border-style:dashed; color:var(--po-body); }
.po-page .po-field input::placeholder{ color:#aab2c0; }
.po-hint{ display:block; margin-top:6px; color:var(--po-muted); font-size:var(--fs-xs); line-height:1.6; }

/* 우편번호 줄 */
.po-zip{ display:flex; gap:8px; align-items:flex-end; }
.po-zip .po-field{ flex:1 1 auto; }
.po-btn-sub{
	flex:0 0 auto; height:48px; padding:0 16px; margin:0;
	border:1.5px solid var(--po-primary); border-radius:11px;
	background:#fff; color:var(--po-primary);
	font-family:inherit; font-size:var(--fs-xs); font-weight:700; white-space:nowrap;
	cursor:pointer; transition:background .16s ease, color .16s ease;
}
.po-btn-sub:hover{ background:var(--po-primary); color:#fff; }

/* 체크박스 줄 */
.po-check{
	display:flex; align-items:center; gap:9px; margin-bottom:16px;
	padding:12px 16px; border:1px solid var(--po-line); border-radius:11px; background:#fbfcfe;
}
.po-check input[type="checkbox"]{ width:18px; height:18px; margin:0; accent-color:var(--po-primary); cursor:pointer; }
.po-check label{ margin:0; color:var(--po-ink); font-size:var(--fs-base); font-weight:600; cursor:pointer; }

/* 선택지 (결제방식 · 지출증빙) */
.po-choice{ display:flex; flex-wrap:wrap; gap:10px; }
.po-choice .po-opt{
	position:relative; flex:1 1 150px; min-width:130px;
	display:flex; align-items:center; gap:9px;
	padding:14px 16px; border:1.5px solid var(--po-line); border-radius:12px;
	background:#fff; cursor:pointer;
	transition:border-color .16s ease, background .16s ease;
}
.po-choice .po-opt:hover{ border-color:#c8d2e2; }
.po-choice .po-opt input{ width:18px; height:18px; margin:0; accent-color:var(--po-primary); cursor:pointer; }
.po-choice .po-opt label{ margin:0; color:var(--po-ink); font-size:var(--fs-base); font-weight:600; cursor:pointer; }
.po-sub-title{
	margin:22px 0 12px; color:var(--po-ink); font-weight:700; font-size:var(--fs-base);
}

/* 입금 예정일 */
.po-date{ display:flex; align-items:center; gap:8px; }
.po-page .po-date input{ width:88px; text-align:center; }
.po-date span{ color:var(--po-body); font-size:var(--fs-base); font-weight:600; }

/* 약관 */
.po-terms iframe{
	width:100%; height:220px; border:1px solid var(--po-line);
	border-radius:12px; background:#fff;
}
.po-agree{
	display:flex; align-items:center; gap:10px; margin-top:14px;
	padding:15px 18px; border:1.5px solid var(--po-line); border-radius:12px; background:#fff;
	cursor:pointer; transition:border-color .16s ease, background .16s ease;
}
.po-agree.is-checked{ border-color:var(--po-primary); background:rgba(0,102,255,0.04); }
.po-agree input{ width:19px; height:19px; margin:0; accent-color:var(--po-primary); cursor:pointer; }
.po-agree label{ margin:0; color:var(--po-ink); font-size:var(--fs-base); font-weight:600; cursor:pointer; }

/* 결제 요약 */
.po-summary{ position:sticky; top:24px; }
.po-summary .po-card{ margin-bottom:0; }
.po-sum-row{
	display:flex; align-items:center; justify-content:space-between;
	padding:9px 0; color:var(--po-body); font-size:var(--fs-base);
}
.po-sum-row b{ color:var(--po-ink); font-weight:700; }
.po-sum-total{
	display:flex; align-items:baseline; justify-content:space-between;
	margin-top:12px; padding-top:16px; border-top:1px solid var(--po-line);
}
.po-sum-total .po-sum-label{ color:var(--po-ink); font-size:var(--fs-base); font-weight:800; }
.po-sum-total .po-sum-num{ color:var(--po-primary); font-size:var(--fs-2xl); font-weight:800; line-height:1.2; }
.po-sum-total .po-sum-won{ color:var(--po-primary); font-size:var(--fs-base); font-weight:800; margin-left:3px; }

.po-actions{ display:grid; gap:9px; margin-top:20px; }
.po-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	height:54px; padding:0 18px; margin:0; border-radius:12px;
	border:1.5px solid var(--po-line); background:#fff; color:var(--po-body);
	font-family:inherit; font-size:var(--fs-base); font-weight:800; line-height:1;
	cursor:pointer; text-decoration:none;
	transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.po-btn:hover{ border-color:#c8d2e2; background:#f7f9fc; color:var(--po-body); text-decoration:none; }
.po-btn.is-primary{
	border-color:transparent; color:#fff;
	background:linear-gradient(135deg,var(--po-primary),#3a8bff);
	box-shadow:0 10px 24px rgba(0,102,255,0.26);
}
.po-btn.is-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,102,255,0.34); color:#fff; }
.po-btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }

.po-sum-note{
	margin:14px 0 0; padding-top:14px; border-top:1px solid #eef1f6;
	color:var(--po-muted); font-size:var(--fs-xs); line-height:1.7;
}
.po-sum-note i{ color:#b3bccb; margin-right:5px; }

@media (max-width:1099px){
	.po-page .po-layout{ grid-template-columns:1fr; }
	.po-summary{ position:static; }
}
@media (max-width:767px){
	.po-page{ padding:40px 0 60px; }
	.po-page .po-head h2{ font-size:var(--fs-2xl); }
	.po-card{ padding:20px 18px; }
	.po-grid{ grid-template-columns:1fr; }
	.po-item{ flex-wrap:wrap; }
	.po-item-thumb{ flex-basis:64px; width:64px; height:64px; }
	.po-item-body{ flex:1 1 calc(100% - 80px); }
	.po-item-qty,
	.po-item-price{ flex:1 1 auto; text-align:left; min-width:0; }
	.po-item-price{ text-align:right; }
	.po-zip{ flex-direction:column; align-items:stretch; }
	.po-btn-sub{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
	.po-page *{ transition:none !important; }
}

/* ------------------------------------------------------------------
   주문 완료(oc-) — payment/result_pay_card_view.php
                     payment/result_pay_cash_view.php
                     mall/shop_my_list_view.php

   [★ css/payrequest.css 에 같은 규칙이 복사돼 있습니다 — 함께 고쳐 주세요]
   payment/PayRequest.php 는 head.php 를 거치지 않고 자체 <head> 를 가져,
   main.css 대신 payrequest.css 만 연결합니다.
------------------------------------------------------------------ */
.oc-page{
	--oc-primary:#0066ff;
	--oc-success:#0f9d6e;
	--oc-warn:#b7791f;
	--oc-ink:#1a1d24;
	--oc-body:#3f4654;
	--oc-muted:#8b93a1;
	--oc-line:#e4e8ef;
	--oc-bg:#f5f7fb;
	background:var(--oc-bg);
	padding:60px 0 80px;
	color:var(--oc-body);
}
.oc-page *{ box-sizing:border-box; }
.oc-page .oc-wrap{ max-width:760px; margin:0 auto; }

/* 완료 머리말 */
.oc-head{ text-align:center; margin-bottom:26px; }
.oc-mark{
	width:66px; height:66px; margin:0 auto 18px; border-radius:50%;
	background:rgba(15,157,110,0.10); color:var(--oc-success);
	display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl);
	animation:ocPop .45s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes ocPop{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
.oc-head h2{
	margin:0 0 10px; color:var(--oc-ink);
	font-weight:800; font-size:var(--fs-2xl); line-height:1.4; word-break:keep-all;
}
.oc-head p{ margin:0; color:var(--oc-body); font-size:var(--fs-base); line-height:1.7; word-break:keep-all; }
.oc-orderno{
	display:inline-flex; align-items:center; gap:8px;
	margin-top:14px; padding:8px 16px; border-radius:999px;
	background:#fff; border:1px solid var(--oc-line);
	color:var(--oc-ink); font-size:var(--fs-base); font-weight:700;
}
.oc-orderno em{ font-style:normal; color:var(--oc-muted); font-weight:600; }

/* 입금 안내 (무통장) */
.oc-deposit{
	margin-bottom:18px; padding:24px 26px; border-radius:18px;
	background:linear-gradient(150deg,#0047b3 0%,#0066ff 60%,#3a8bff 100%);
	color:#fff; box-shadow:0 14px 34px rgba(0,102,255,0.26);
}
.oc-deposit h3{
	display:flex; align-items:center; gap:8px; margin:0 0 16px;
	color:#fff; font-weight:800; font-size:var(--fs-md);
}
.oc-deposit h3 i{ color:#cfe1ff; font-size:var(--fs-base); }
.oc-deposit .oc-amount{
	display:flex; align-items:baseline; gap:5px; margin-bottom:16px;
	font-weight:800; font-size:var(--fs-3xl); line-height:1.2;
}
.oc-deposit .oc-amount span{ font-size:var(--fs-base); font-weight:700; }
.oc-deposit .oc-dep-row{
	display:flex; align-items:center; gap:10px; flex-wrap:wrap;
	padding:11px 0; border-top:1px solid rgba(255,255,255,0.18);
	font-size:var(--fs-base);
}
.oc-deposit .oc-dep-row b{ flex:0 0 84px; color:rgba(255,255,255,0.75); font-weight:600; }
.oc-deposit .oc-dep-row span{ flex:1 1 auto; min-width:0; color:#fff; font-weight:700; word-break:break-all; }
.oc-copy{
	flex:0 0 auto; padding:6px 12px; border-radius:999px;
	border:1px solid rgba(255,255,255,0.4); background:rgba(255,255,255,0.12);
	color:#fff; font-family:inherit; font-size:var(--fs-xs); font-weight:700;
	cursor:pointer; transition:background .16s ease;
}
.oc-copy:hover{ background:rgba(255,255,255,0.25); }
.oc-deposit .oc-dep-note{
	margin:14px 0 0; padding-top:14px; border-top:1px solid rgba(255,255,255,0.18);
	color:rgba(255,255,255,0.85); font-size:var(--fs-xs); line-height:1.7; word-break:keep-all;
}

/* 정보 카드 */
.oc-card{
	background:#fff; border:1px solid var(--oc-line); border-radius:18px;
	box-shadow:0 10px 30px rgba(16,24,40,0.06);
	padding:24px 26px; margin-bottom:18px;
}
.oc-card-title{
	display:flex; align-items:center; gap:9px; margin:0 0 16px;
	padding-bottom:13px; border-bottom:1px solid var(--oc-line);
	color:var(--oc-ink); font-weight:800; font-size:var(--fs-md);
}
.oc-card-title i{ color:var(--oc-primary); font-size:var(--fs-base); }

.oc-list{ margin:0; }
.oc-list .oc-row{
	display:flex; gap:14px; padding:11px 0; border-bottom:1px solid #eef1f6;
	font-size:var(--fs-base); line-height:1.6;
}
.oc-list .oc-row:last-child{ border-bottom:0; }
.oc-list .oc-row b{ flex:0 0 110px; color:var(--oc-muted); font-weight:600; }
.oc-list .oc-row span{ flex:1 1 auto; min-width:0; color:var(--oc-ink); font-weight:600; word-break:break-all; }
.oc-list .oc-row.is-total span{ color:var(--oc-primary); font-size:var(--fs-md); font-weight:800; }

/* 버튼 */
.oc-actions{ display:flex; gap:10px; margin-top:22px; }
.oc-btn{
	flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:8px;
	height:54px; padding:0 18px; border-radius:12px;
	border:1.5px solid var(--oc-line); background:#fff; color:var(--oc-body);
	font-family:inherit; font-size:var(--fs-base); font-weight:800; line-height:1;
	text-decoration:none; cursor:pointer;
	transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.oc-btn:hover{ border-color:#c8d2e2; background:#f7f9fc; color:var(--oc-body); text-decoration:none; }
.oc-btn.is-primary{
	flex:1.4 1 0; border-color:transparent; color:#fff;
	background:linear-gradient(135deg,var(--oc-primary),#3a8bff);
	box-shadow:0 10px 24px rgba(0,102,255,0.26);
}
.oc-btn.is-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,102,255,0.34); color:#fff; }

.oc-foot{
	margin:18px 0 0; text-align:center;
	color:var(--oc-muted); font-size:var(--fs-xs); line-height:1.7;
}
.oc-foot a{ color:var(--oc-body); font-weight:700; text-decoration:none; }
.oc-foot a:hover{ color:var(--oc-primary); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:575px){
	.oc-page{ padding:40px 0 60px; }
	.oc-head h2{ font-size:var(--fs-xl); }
	.oc-card,
	.oc-deposit{ padding:20px 18px; }
	.oc-deposit .oc-amount{ font-size:var(--fs-2xl); }
	.oc-list .oc-row{ flex-direction:column; gap:3px; }
	.oc-list .oc-row b{ flex:none; }
	.oc-actions{ flex-direction:column; }
}
@media print{
	.oc-page{ background:#fff; padding:0; }
	.oc-actions,
	.oc-copy,
	.oc-foot{ display:none !important; }
	.oc-card,
	.oc-deposit{ box-shadow:none; }
	.oc-deposit{ background:#f0f5ff; color:#1a1d24; }
	.oc-deposit h3,
	.oc-deposit .oc-dep-row span{ color:#1a1d24; }
	.oc-deposit .oc-dep-row b,
	.oc-deposit .oc-dep-note{ color:#3f4654; }
}
@media (prefers-reduced-motion:reduce){
	.oc-page *{ transition:none !important; animation:none !important; }
}

/* ------------------------------------------------------------------
   구매 내역 목록  ?  mall/shop_my_list.php
------------------------------------------------------------------ */
.ol-page{
	--ol-primary:#0066ff;
	--ol-success:#0f9d6e;
	--ol-warn:#b7791f;
	--ol-danger:#dc3545;
	--ol-ink:#1a1d24;
	--ol-body:#3f4654;
	--ol-muted:#8b93a1;
	--ol-line:#e4e8ef;
	--ol-bg:#f5f7fb;
	background:var(--ol-bg);
	padding:60px 0 84px;
	color:var(--ol-body);
}
.ol-page *{ box-sizing:border-box; }
.ol-page .ol-wrap{ max-width:1140px; margin:0 auto; }

.ol-page .ol-head{ text-align:center; margin-bottom:22px; }
.ol-page .ol-head h2{
	margin:0 0 10px; color:var(--ol-ink);
	font-weight:800; font-size:var(--fs-3xl); line-height:1.35;
}
.ol-page .ol-head p{ margin:0; color:var(--ol-muted); font-size:var(--fs-base); }

.ol-page .ol-count{ margin:0 0 14px; color:var(--ol-muted); font-size:var(--fs-base); }
.ol-page .ol-count b{ color:var(--ol-primary); font-weight:800; }

/* 격자 */
.ol-page .ol-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* 카드 */
.ol-card{
	display:flex; flex-direction:column;
	background:#fff; border:1px solid var(--ol-line); border-radius:18px;
	box-shadow:0 8px 24px rgba(16,24,40,0.06);
	overflow:hidden;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ol-card:hover{
	transform:translateY(-3px);
	box-shadow:0 16px 40px rgba(16,24,40,0.12);
	border-color:rgba(0,102,255,0.22);
}
.ol-card-top{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	padding:16px 20px; background:#f7f9fc; border-bottom:1px solid var(--ol-line);
}
.ol-orderno{ min-width:0; }
.ol-orderno em{
	display:block; font-style:normal;
	color:var(--ol-muted); font-size:var(--fs-2xs); font-weight:600; margin-bottom:2px;
}
.ol-orderno b{
	display:block; color:var(--ol-ink);
	font-size:var(--fs-base); font-weight:800; word-break:break-all;
}

/* 결제 상태 */
.ol-state{
	flex:0 0 auto; padding:5px 12px; border-radius:999px;
	font-size:var(--fs-2xs); font-weight:800; white-space:nowrap;
	background:#eef1f6; color:var(--ol-body);
}
.ol-state.is-ok{ background:rgba(15,157,110,0.10); color:var(--ol-success); }
.ol-state.is-wait{ background:rgba(183,121,31,0.12); color:var(--ol-warn); }
.ol-state.is-bad{ background:rgba(220,53,69,0.10); color:var(--ol-danger); }

.ol-card-body{ flex:1 1 auto; padding:18px 20px; }
.ol-item-name{
	margin:0 0 14px; color:var(--ol-ink);
	font-weight:700; font-size:var(--fs-md); line-height:1.45; word-break:keep-all;
}
.ol-rows{ margin:0; }
.ol-rows .ol-row{
	display:flex; gap:12px; padding:8px 0; border-bottom:1px solid #f1f4f8;
	font-size:var(--fs-xs); line-height:1.55;
}
.ol-rows .ol-row:last-child{ border-bottom:0; }
.ol-rows .ol-row b{ flex:0 0 74px; color:var(--ol-muted); font-weight:600; }
.ol-rows .ol-row span{ flex:1 1 auto; min-width:0; color:var(--ol-ink); font-weight:600; text-align:right; }
.ol-rows .ol-row.is-price span{ color:var(--ol-primary); font-weight:800; font-size:var(--fs-base); }

.ol-card-foot{ padding:0 20px 18px; }
.ol-view{
	display:flex; align-items:center; justify-content:center; gap:7px;
	width:100%; height:46px; border-radius:11px;
	border:1.5px solid var(--ol-line); background:#fff; color:var(--ol-body);
	font-size:var(--fs-base); font-weight:700; text-decoration:none;
	transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.ol-view:hover{ border-color:var(--ol-primary); color:var(--ol-primary); background:#f7faff; text-decoration:none; }

/* 빈 목록 */
.ol-empty{
	padding:70px 20px; text-align:center;
	background:#fff; border:1px solid var(--ol-line); border-radius:18px;
	box-shadow:0 8px 24px rgba(16,24,40,0.06); color:var(--ol-muted);
}
.ol-empty i{ display:block; font-size:var(--fs-3xl); color:#c9d2df; margin-bottom:14px; }
.ol-empty strong{ display:block; color:var(--ol-ink); font-weight:800; font-size:var(--fs-md); margin-bottom:6px; }
.ol-empty .ol-empty-btn{
	display:inline-flex; align-items:center; gap:7px; margin-top:18px;
	height:48px; padding:0 22px; border-radius:12px;
	background:linear-gradient(135deg,var(--ol-primary),#3a8bff); color:#fff;
	font-size:var(--fs-base); font-weight:800; text-decoration:none;
	box-shadow:0 10px 24px rgba(0,102,255,0.24);
}
.ol-empty .ol-empty-btn:hover{ color:#fff; text-decoration:none; }

/* 페이지 번호 */
.ol-paging{
	display:flex; align-items:center; justify-content:center;
	gap:6px; flex-wrap:wrap; list-style:none; margin:36px 0 0; padding:0;
}
.ol-paging a,
.ol-paging span{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:42px; height:42px; padding:0 12px;
	border:1px solid var(--ol-line); border-radius:11px; background:#fff;
	color:var(--ol-body); font-size:var(--fs-base); font-weight:700; text-decoration:none;
	transition:border-color .16s ease, color .16s ease;
}
.ol-paging a:hover{ border-color:var(--ol-primary); color:var(--ol-primary); }
.ol-paging .is-current span{
	background:linear-gradient(135deg,var(--ol-primary),#3a8bff);
	border-color:transparent; color:#fff;
}
.ol-paging .is-disabled span{ color:#c3cbd8; background:#f7f9fc; }

@media (max-width:991px){
	.ol-page .ol-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
}
@media (max-width:575px){
	.ol-page{ padding:42px 0 64px; }
	.ol-page .ol-head h2{ font-size:var(--fs-2xl); }
	.ol-page .ol-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
	.ol-page *{ transition:none !important; }
}

/* 주문 상세 ? 구매 제품 목록 (mall/shop_my_list_view.php)
   ※ 나머지 카드·표 스타일은 위의 '주문 완료(.oc-)' 구역을 함께 씁니다. */
.oc-items{ margin:0; }
.oc-items .oc-item{
	display:flex; align-items:center; gap:14px;
	padding:14px 0; border-bottom:1px solid #eef1f6;
}
.oc-items .oc-item:last-child{ border-bottom:0; }
.oc-items .oc-item-no{
	flex:0 0 30px; width:30px; height:30px; border-radius:9px;
	background:#f2f5fa; color:var(--oc-muted);
	display:flex; align-items:center; justify-content:center;
	font-size:var(--fs-xs); font-weight:800;
}
.oc-items .oc-item-name{
	flex:1 1 auto; min-width:0; margin:0;
	color:var(--oc-ink); font-size:var(--fs-base); font-weight:700;
	line-height:1.5; word-break:keep-all;
}
.oc-items .oc-item-qty{
	flex:0 0 auto; color:var(--oc-body); font-size:var(--fs-base); font-weight:600; white-space:nowrap;
}
.oc-items .oc-item-price{
	flex:0 0 auto; min-width:110px; text-align:right;
	color:var(--oc-ink); font-size:var(--fs-base); font-weight:800; white-space:nowrap;
}
.oc-items .oc-item-price span{ color:var(--oc-body); font-size:var(--fs-xs); font-weight:600; }
.oc-sum{
	display:flex; align-items:baseline; justify-content:space-between;
	margin-top:14px; padding-top:16px; border-top:2px solid var(--oc-line);
}
.oc-sum b{ color:var(--oc-ink); font-size:var(--fs-base); font-weight:800; }
.oc-sum .oc-sum-num{ color:var(--oc-primary); font-size:var(--fs-xl); font-weight:800; }
.oc-sum .oc-sum-won{ color:var(--oc-primary); font-size:var(--fs-base); font-weight:800; margin-left:3px; }

@media (max-width:575px){
	.oc-items .oc-item{ flex-wrap:wrap; }
	.oc-items .oc-item-name{ flex:1 1 calc(100% - 44px); }
	.oc-items .oc-item-qty{ flex:1 1 auto; }
	.oc-items .oc-item-price{ flex:1 1 auto; }
}

/* ------------------------------------------------------------------
   장바구니  ?  mall/cart/view_cart.php
------------------------------------------------------------------ */
.ct-page{
	--ct-primary:#0066ff;
	--ct-ink:#1a1d24;
	--ct-body:#3f4654;
	--ct-muted:#8b93a1;
	--ct-line:#e4e8ef;
	--ct-bg:#f5f7fb;
	background:var(--ct-bg);
	padding:56px 0 80px;
	color:var(--ct-body);
}
.ct-page *{ box-sizing:border-box; }
.ct-page .ct-wrap{ max-width:1100px; margin:0 auto; }

.ct-page .ct-head{ text-align:center; margin-bottom:24px; }
.ct-page .ct-head h2{
	margin:0 0 10px; color:var(--ct-ink);
	font-weight:800; font-size:var(--fs-3xl); line-height:1.35;
}
.ct-page .ct-head p{ margin:0; color:var(--ct-muted); font-size:var(--fs-base); }
.ct-page .ct-head p b{ color:var(--ct-primary); font-weight:800; }

/* 2단 : 목록 / 요약 */
.ct-page .ct-layout{
	display:grid; grid-template-columns:minmax(0,1fr) 320px;
	gap:22px; align-items:start;
}

.ct-card{
	background:#fff; border:1px solid var(--ct-line); border-radius:18px;
	box-shadow:0 10px 30px rgba(16,24,40,0.06);
	padding:8px 26px;
}

/* 상품 줄 */
.ct-item{
	display:flex; align-items:center; gap:18px;
	padding:20px 0; border-bottom:1px solid #eef1f6;
}
.ct-item:last-child{ border-bottom:0; }
.ct-item-thumb{
	flex:0 0 92px; width:92px; height:92px; padding:8px;
	background:#f7f9fc; border:1px solid var(--ct-line); border-radius:12px;
	display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ct-item-thumb img{ width:100%; height:100%; object-fit:contain; }
.ct-item-thumb i{ color:#c9d2df; font-size:var(--fs-xl); }
.ct-item-body{ flex:1 1 auto; min-width:0; }
.ct-item-name{
	margin:0 0 6px; color:var(--ct-ink);
	font-weight:700; font-size:var(--fs-md); line-height:1.45; word-break:keep-all;
}
.ct-item-spec{ margin:0; color:var(--ct-muted); font-size:var(--fs-xs); line-height:1.6; word-break:keep-all; }
.ct-item-qty{
	flex:0 0 auto; color:var(--ct-body); font-size:var(--fs-base); font-weight:600; white-space:nowrap;
}
.ct-item-price{
	flex:0 0 auto; min-width:130px; text-align:right;
	color:var(--ct-ink); font-weight:800; font-size:var(--fs-md); white-space:nowrap;
}
.ct-item-price span{ color:var(--ct-body); font-size:var(--fs-xs); font-weight:600; }
.ct-remove{
	flex:0 0 auto; width:34px; height:34px; padding:0; margin:0;
	border:1px solid var(--ct-line); border-radius:9px; background:#fff;
	color:var(--ct-muted); font-size:var(--fs-xs); cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.ct-remove:hover{ border-color:#f3b7bd; background:#fff5f6; color:#dc3545; }

/* 빈 장바구니 */
.ct-empty{
	padding:80px 20px; text-align:center;
	background:#fff; border:1px solid var(--ct-line); border-radius:18px;
	box-shadow:0 10px 30px rgba(16,24,40,0.06); color:var(--ct-muted);
}
.ct-empty i{ display:block; font-size:var(--fs-4xl); color:#c9d2df; margin-bottom:16px; }
.ct-empty strong{ display:block; color:var(--ct-ink); font-weight:800; font-size:var(--fs-md); margin-bottom:6px; }

/* 요약 */
.ct-summary{ position:sticky; top:24px; }
.ct-sum-card{
	background:#fff; border:1px solid var(--ct-line); border-radius:18px;
	box-shadow:0 10px 30px rgba(16,24,40,0.06); padding:24px 26px;
}
.ct-sum-title{
	margin:0 0 16px; padding-bottom:13px; border-bottom:1px solid var(--ct-line);
	color:var(--ct-ink); font-weight:800; font-size:var(--fs-md);
	display:flex; align-items:center; gap:9px;
}
.ct-sum-title i{ color:var(--ct-primary); font-size:var(--fs-base); }
.ct-sum-row{
	display:flex; align-items:center; justify-content:space-between;
	padding:8px 0; color:var(--ct-body); font-size:var(--fs-base);
}
.ct-sum-row b{ color:var(--ct-ink); font-weight:700; }
.ct-sum-total{
	display:flex; align-items:baseline; justify-content:space-between;
	margin-top:12px; padding-top:16px; border-top:1px solid var(--ct-line);
}
.ct-sum-total .ct-sum-label{ color:var(--ct-ink); font-size:var(--fs-base); font-weight:800; }
.ct-sum-total .ct-sum-num{ color:var(--ct-primary); font-size:var(--fs-2xl); font-weight:800; line-height:1.2; }
.ct-sum-total .ct-sum-won{ color:var(--ct-primary); font-size:var(--fs-base); font-weight:800; margin-left:3px; }

.ct-actions{ display:grid; gap:9px; margin-top:20px; }
.ct-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	height:54px; padding:0 18px; margin:0; border-radius:12px;
	border:1.5px solid var(--ct-line); background:#fff; color:var(--ct-body);
	font-family:inherit; font-size:var(--fs-base); font-weight:800; line-height:1;
	cursor:pointer; text-decoration:none;
	transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ct-btn:hover{ border-color:#c8d2e2; background:#f7f9fc; color:var(--ct-body); text-decoration:none; }
.ct-btn.is-primary{
	border-color:transparent; color:#fff;
	background:linear-gradient(135deg,var(--ct-primary),#3a8bff);
	box-shadow:0 10px 24px rgba(0,102,255,0.26);
}
.ct-btn.is-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,102,255,0.34); color:#fff; }
.ct-sum-note{
	margin:14px 0 0; padding-top:14px; border-top:1px solid #eef1f6;
	color:var(--ct-muted); font-size:var(--fs-xs); line-height:1.7;
}
.ct-sum-note i{ color:#b3bccb; margin-right:5px; }

@media (max-width:991px){
	.ct-page .ct-layout{ grid-template-columns:1fr; }
	.ct-summary{ position:static; }
}
@media (max-width:575px){
	.ct-page{ padding:40px 0 60px; }
	.ct-page .ct-head h2{ font-size:var(--fs-2xl); }
	.ct-card{ padding:6px 18px; }
	.ct-item{ flex-wrap:wrap; gap:12px; }
	.ct-item-thumb{ flex-basis:64px; width:64px; height:64px; }
	.ct-item-body{ flex:1 1 calc(100% - 110px); }
	.ct-item-qty,
	.ct-item-price{ flex:1 1 auto; min-width:0; text-align:left; }
	.ct-item-price{ text-align:right; }
}
@media (prefers-reduced-motion:reduce){
	.ct-page *{ transition:none !important; }
}

/* 주문 취소 안내 (mall/shop_my_list_view.php) */
.oc-cancel-note{ background:#fbfcfe; }
.oc-cancel-note p{
	margin:0; color:var(--oc-body); font-size:var(--fs-base); line-height:1.75; word-break:keep-all;
}
.oc-cancel-note strong{ color:var(--oc-ink); font-weight:800; }
.oc-cancel-ways{
	display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;
}
.oc-cancel-ways a{
	display:inline-flex; align-items:center; gap:7px;
	padding:10px 16px; border-radius:11px;
	border:1.5px solid var(--oc-line); background:#fff;
	color:var(--oc-ink); font-size:var(--fs-base); font-weight:700; text-decoration:none;
	transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.oc-cancel-ways a i{ color:var(--oc-muted); font-size:var(--fs-xs); transition:color .16s ease; }
.oc-cancel-ways a:hover{
	border-color:var(--oc-primary); color:var(--oc-primary); background:#f7faff; text-decoration:none;
}
.oc-cancel-ways a:hover i{ color:var(--oc-primary); }
.oc-cancel-tip{
	margin:14px 0 0 !important; padding:12px 15px; border-radius:11px;
	background:rgba(0,102,255,0.05); border:1px solid rgba(0,102,255,0.14);
	font-size:var(--fs-xs) !important;
}
.oc-cancel-tip i{ color:var(--oc-primary); margin-right:6px; }

@media (max-width:575px){
	.oc-cancel-ways{ flex-direction:column; }
	.oc-cancel-ways a{ justify-content:center; }
}
@media print{
	.oc-cancel-note{ display:none !important; }
}

/* ==================================================================
   [페이지 전용] 홈           스코프 .home-page        접두사 hp-
   대상 : index.php
   ------------------------------------------------------------------
   2026-08-04 index.php 안에 있던 <style> 172줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
/* ============================================================
   Seetrol 홈 : 통일 디자인 시스템 (scoped: .home-page)
   연혁·리뷰·시스템·가격·활용사례·Seetrol MY 페이지와 동일 토큰
============================================================ */
.home-page{
	/* 값은 :root 의 --pg- 에서 옵니다. 여기서 다시 정의하지 않습니다. */
	--hp-primary:var(--pg-primary);
	--hp-primary-dark:var(--pg-primary-dark);
	--hp-ink:var(--pg-ink);
	--hp-body:var(--pg-body);
	--hp-muted:var(--pg-muted);
	--hp-line:var(--pg-line);
	--hp-radius:var(--pg-radius);
	--hp-shadow:var(--pg-shadow);
	--hp-shadow-sm:var(--pg-shadow-sm);
}
.home-page .hp-section{ padding:80px 0; }
.home-page .hp-section--tint{ background:#f5f7fb; }
.home-page .hp-section--dark{ background:linear-gradient(135deg,#0b1b3a,#0047b3); }

/* 헤더 */
.home-page .hp-head{ text-align:center; max-width:800px; margin:0 auto 46px; }
.home-page .hp-eyebrow{
	display:inline-block; color:var(--hp-primary);
	font-weight:700; letter-spacing:0.04em;
	font-size:var(--fs-lg); margin-bottom:14px;
}
.home-page .hp-head h2{ color:var(--hp-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 16px; line-height:1.35; }
.home-page .hp-head p{ color:var(--hp-body); font-size:var(--fs-base); line-height:1.8; margin:0; }
/* 굵게만 두면 본문과 색이 같아 강조가 살지 않습니다. 글자색도 진하게. */
.home-page .hp-head p strong{ color:var(--hp-ink); font-weight:700; }
.home-page .hp-section--dark .hp-head h2{ color:#fff; }
.home-page .hp-section--dark .hp-head p{ color:rgba(255,255,255,0.85); }
.home-page .hp-section--dark .hp-eyebrow{ color:#7fb0ff; }

/* 핵심 강점 4카드 */
.home-page .hp-feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.home-page .hp-feat{
	background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius);
	box-shadow:var(--hp-shadow-sm); padding:32px 26px; text-align:center;
	transition:transform .2s ease, box-shadow .2s ease;
}
.home-page .hp-feat:hover{ transform:translateY(-5px); box-shadow:var(--hp-shadow); }
.home-page .hp-feat-ico{
	width:74px; height:74px; margin:0 auto 18px; border-radius:50%;
	display:flex; align-items:center; justify-content:center; background:rgba(0,102,255,0.10);
}
.home-page .hp-feat-ico object,
.home-page .hp-feat-ico img{ width:40px; height:40px; pointer-events:none; }
/* 아이콘 자리에 SVG 파일 대신 아이콘 글꼴을 쓸 때.
   위 SVG 는 40px 인데 글꼴 아이콘은 그보다 작게 잡습니다. 아이콘 글꼴은
   가로가 세로보다 넓은 글자(fa-network-wired 등)가 섞여 있어서, 같은
   40px 을 주면 그 카드만 아이콘이 유난히 커 보입니다. 34px 이 74px 원
   안에서 위 구역 카드들과 가장 비슷하게 보이는 크기입니다. */
.home-page .hp-feat-ico i{ font-size:34px; line-height:1; color:var(--hp-primary); }

/* 카드가 셋뿐인 줄.
   컨테이너(1270px)를 셋으로 나누면 카드 한 장이 400px 가까이 되어,
   위쪽 네 칸짜리 줄(약 290px)보다 헐렁해 보입니다. 폭을 1000px 로
   묶고 가운데에 세워서 두 줄의 카드 크기를 비슷하게 맞췄습니다. */
.home-page .hp-feats--3{ grid-template-columns:repeat(3,1fr); max-width:1000px; margin:0 auto; }

/* 설치 환경·사용 장소 그림 ------------------------------------------
   960 폭으로 그린 그림이라 좁은 화면에서는 글자가 읽히지 않습니다.
   그래서 767px 아래에서만 가로 스크롤 상자가 되고, 안내 문구도 그때만
   나옵니다. 넓은 화면에서는 평소처럼 폭에 맞춰 늘어납니다. */
.home-page .hp-figure{
	background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius);
	box-shadow:var(--hp-shadow-sm); padding:30px; margin-bottom:34px;
}
.home-page .hp-figure-scroll svg{ width:100%; height:auto; display:block; }
.home-page .hp-figure-cap{
	text-align:center; color:var(--hp-muted); font-size:var(--fs-base);
	margin-top:18px; line-height:1.7; word-break:keep-all;
}
.home-page .hp-figure-cap em{ color:var(--hp-primary); font-style:normal; font-weight:700; }

/* 오해 / 사실 대비 상자 -----------------------------------------------
   상담에서 가장 자주 나오는 오해라, 문답 한 줄로 흘리지 않고 왼쪽에
   오해·오른쪽에 사실을 나란히 놓아 눈으로 대조되게 했습니다.
   두 칸을 한 상자 안에서 가운데 선으로만 나눕니다. 상자를 둘로 떼어
   놓으면 카드가 두 장 더 있는 것처럼 보여 위 카드 줄과 헷갈립니다. */
.home-page .hp-myth{
	margin-top:34px; display:grid; grid-template-columns:1fr 1fr;
	background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius);
	box-shadow:var(--hp-shadow-sm); overflow:hidden;
}
.home-page .hp-myth-col{ padding:28px 30px; }
.home-page .hp-myth-col.is-myth{ background:#f7f8fa; border-right:1px solid var(--hp-line); }
.home-page .hp-myth-label{
	display:flex; align-items:center; gap:8px;
	font-weight:800; font-size:var(--fs-base); margin-bottom:12px;
}
.home-page .hp-myth-col.is-myth .hp-myth-label{ color:var(--hp-muted); }
.home-page .hp-myth-col.is-fact .hp-myth-label{ color:#16a34a; }
.home-page .hp-myth-text{
	color:var(--hp-body); font-size:var(--fs-base); line-height:1.85;
	margin:0; word-break:keep-all;
}
/* 오해 쪽은 손님이 하신 말을 옮긴 것이라 인용처럼 보이게 기울입니다.
   사실 쪽과 글자 모양이 달라야 어느 쪽이 답인지 바로 갈립니다. */
.home-page .hp-myth-col.is-myth .hp-myth-text{ color:var(--hp-muted); font-style:italic; }
.home-page .hp-myth-text strong{ color:var(--hp-ink); font-weight:800; }
.home-page .hp-feat .hp-feat-tag{ color:var(--hp-primary); font-weight:600; font-size:var(--fs-xs); margin-bottom:8px; display:block; }
.home-page .hp-feat h4{ color:var(--hp-ink); font-weight:700; font-size:var(--fs-md); margin:0 0 10px; line-height:1.4; }
.home-page .hp-feat p{ color:var(--hp-body); font-size:var(--fs-base); line-height:1.65; margin:0; word-break:keep-all; }

/* 영상 배너 */
.home-page .hp-video{ position:relative; border-radius:var(--hp-radius); overflow:hidden; box-shadow:var(--hp-shadow); }
.home-page .hp-video > img{ width:100%; display:block; filter:brightness(0.62); }
.home-page .hp-video-overlay{
	position:absolute; inset:0; display:flex; flex-direction:column;
	align-items:center; justify-content:center; text-align:center; padding:30px; color:#fff;
}
.home-page .hp-play{
	width:82px; height:82px; border-radius:50%; margin-bottom:20px;
	background:rgba(0,102,255,0.92); color:#fff;
	display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl);
	box-shadow:0 8px 24px rgba(0,102,255,0.5); text-decoration:none; position:relative;
	transition:transform .2s ease, background .2s ease;
}
.home-page .hp-play::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(255,255,255,0.5); animation:hppulse 2s infinite; }
.home-page .hp-play:hover{ transform:scale(1.08); background:var(--hp-primary); color:#fff; }
@keyframes hppulse{ 0%{ transform:scale(1); opacity:0.8; } 100%{ transform:scale(1.35); opacity:0; } }
.home-page .hp-video-overlay h3{ color:#fff; font-weight:800; font-size:var(--fs-2xl); margin:0 0 12px; }
.home-page .hp-video-overlay p{ color:rgba(255,255,255,0.9); font-size:var(--fs-base); line-height:1.7; max-width:640px; margin:0; word-break:keep-all; }

/* 스탯 밴드 */
.home-page .hp-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.home-page .hp-stat{ text-align:center; color:#fff; padding:10px; }
.home-page .hp-stat-ico{ font-size:var(--fs-3xl); color:#7fb0ff; margin-bottom:10px; }
/* [2026-08-05] vpp82 와 같은 문제라 함께 고칩니다 (위 .vp-stat-num 주석 참고) */
.home-page .hp-stat-num{ font-weight:800; font-size:var(--fs-5xl); line-height:1; color:#fff;
	display:flex; align-items:center; justify-content:center; gap:8px;
	/* 네 칸의 이 줄 높이를 강제로 통일합니다. 숫자 칸은 odometer가 만드는
	   중첩 구조라 자연 높이가 계산대로 안 나와서, 칸마다 높이가 달라지면
	   아래 라벨 줄이 어긋납니다. 66px = 숫자 60px × line-height 1.1em. */
	min-height:66px; }
.home-page .hp-stat-num .odometer{ line-height:1; position:relative; top:3px; }
.home-page .hp-stat-num span{ font-size:var(--fs-xl); font-weight:700; }
/* "인트라망"은 span으로 감싸 위 .hp-stat-num span 규칙을 그대로 받아
   단위 글자(Gbps·FPS·고객)와 같은 크기로 표시합니다. 높이 통일은 위
   .hp-stat-num 의 min-height 가 담당하므로 여기선 줄바꿈만 막습니다. */
.home-page .hp-stat-num--text{ white-space:nowrap; }
@media (max-width:479px){
	/* odometer 테마가 이 폭에서 숫자를 50px로 줄입니다. 50×1.1em */
	.home-page .hp-stat-num{ min-height:55px; }
}
.home-page .hp-stat-label{ color:rgba(255,255,255,0.8); font-size:var(--fs-base); margin-top:8px; }
/* 숫자가 60px 고정이라 네 칸을 유지하면 1200px 미만에서 칸 폭(약 200px)을
   "10,000 고객"과 "인트라망"이 함께 넘칩니다. 이 폭부터 2x2로 접습니다. */
@media (max-width:1199px){
	.home-page .hp-stats{ grid-template-columns:repeat(2,1fr); gap:32px 24px; }
}

/* 응대형/접속대기형 2카드 */
.home-page .hp-duo{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.home-page .hp-duo-card{
	background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius);
	box-shadow:var(--hp-shadow-sm); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
}
.home-page .hp-duo-card:hover{ transform:translateY(-4px); box-shadow:var(--hp-shadow); }
.home-page .hp-duo-img{ background:#0b1b3a; }
.home-page .hp-duo-img img{ width:100%; display:block; }
.home-page .hp-duo-body{ padding:26px; }
.home-page .hp-duo-tag{ display:inline-block; color:var(--hp-primary); background:rgba(0,102,255,0.10); font-weight:700; font-size:var(--fs-xs); padding:5px 14px; border-radius:999px; margin-bottom:12px; }
.home-page .hp-duo-body h5{ color:var(--hp-ink); font-weight:600; font-size:var(--fs-md); margin:0; line-height:1.5; }

/* OS 지원 카드 */
.home-page .hp-os{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
.home-page .hp-os-card{
	background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius);
	box-shadow:var(--hp-shadow-sm); overflow:hidden; text-align:center;
	transition:transform .2s ease, box-shadow .2s ease;
}
.home-page .hp-os-card:hover{ transform:translateY(-5px); box-shadow:var(--hp-shadow); }
.home-page .hp-os-img{ background:#f2f5fa; }
.home-page .hp-os-img img{ width:100%; display:block; }
.home-page .hp-os-body{ padding:20px 14px; }
.home-page .hp-os-name{ color:var(--hp-ink); font-weight:700; font-size:var(--fs-base); margin:0 0 6px; }
.home-page .hp-os-prog{ color:var(--hp-muted); font-size:var(--fs-xs); line-height:1.5; }

/* 후기 카드 */
.home-page .hp-reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.home-page .hp-review{
	background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius);
	box-shadow:var(--hp-shadow-sm); padding:28px; display:flex; flex-direction:column;
	transition:transform .2s ease, box-shadow .2s ease;
}
.home-page .hp-review:hover{ transform:translateY(-4px); box-shadow:var(--hp-shadow); }
.home-page .hp-review-stars{ color:#ffb400; letter-spacing:2px; font-size:var(--fs-base); margin-bottom:12px; }
.home-page .hp-review h4{ margin:0 0 12px; font-size:var(--fs-md); font-weight:800; line-height:1.4; }
.home-page .hp-review h4 a{ color:var(--hp-ink); text-decoration:none; }
.home-page .hp-review h4 a:hover{ color:var(--hp-primary); }
/* 양쪽정렬(justify)을 왼쪽정렬로 바꿨습니다.
   낱말 중간에서 줄을 끊지 않게 되면서(word-break:keep-all) 줄 끝에 남는
   공간이 전부 띄어쓰기로 몰려, 한 줄 안에서 낱말 사이가 크게 벌어졌습니다.
   고객리뷰 페이지(.rv-text)도 같은 이유로 왼쪽정렬입니다. */
.home-page .hp-review-text{ color:var(--hp-body); font-size:var(--fs-base); line-height:1.75; margin:0 0 18px; text-align:left; word-break:keep-all; flex:1; }
.home-page .hp-review-text a{ color:inherit; text-decoration:none; }
.home-page .hp-review-meta{ display:flex; align-items:center; gap:11px; padding-top:16px; border-top:1px solid var(--hp-line); }
.home-page .hp-review-avatar{ width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--hp-primary),#3a8bff); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; }
.home-page .hp-review-who{ color:var(--hp-ink); font-weight:700; font-size:var(--fs-base); }
.home-page .hp-review-date{ color:var(--hp-muted); font-size:var(--fs-xs); margin-top:2px; }

/* 후기 더 보기 — 홈에는 6건만 놓고 나머지는 고객리뷰 페이지에서 봅니다.
   테두리만 있는 버튼입니다. 이 구역에서 눈길은 후기가 받아야 하는데
   꽉 찬 버튼을 놓으면 후기보다 버튼이 먼저 보입니다. */
.home-page .hp-reviews-more{ text-align:center; margin-top:36px; }
.home-page .hp-reviews-more a{
	display:inline-flex; align-items:center; gap:9px;
	padding:14px 30px; border:1px solid var(--hp-line); border-radius:999px;
	background:#fff; color:var(--hp-ink); font-weight:700; font-size:var(--fs-base);
	text-decoration:none; transition:border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.home-page .hp-reviews-more a:hover{
	border-color:var(--hp-primary); color:var(--hp-primary); box-shadow:var(--hp-shadow-sm);
}
/* 화살표만 살짝 밀립니다. 글자까지 움직이면 눌러야 할 곳이 흔들립니다. */
.home-page .hp-reviews-more a i{ font-size:var(--fs-xs); transition:transform .2s ease; }
.home-page .hp-reviews-more a:hover i{ transform:translateX(4px); }

/* 다운로드 카드 */
.home-page .hp-downloads{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.home-page .hp-dl{
	background:#fff; border:1px solid var(--hp-line); border-radius:var(--hp-radius);
	box-shadow:var(--hp-shadow-sm); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
}
.home-page .hp-dl:hover{ transform:translateY(-4px); box-shadow:var(--hp-shadow); }
.home-page .hp-dl-img{ display:block; }
.home-page .hp-dl-img img{ width:100%; display:block; }
.home-page .hp-dl-body{ padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.home-page .hp-dl-body h5{ margin:0; font-size:var(--fs-md); font-weight:700; }
.home-page .hp-dl-body h5 a{ color:var(--hp-ink); text-decoration:none; }
.home-page .hp-dl-body h5 a:hover{ color:var(--hp-primary); }
.home-page .hp-dl-icon{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; background:rgba(0,102,255,0.10); color:var(--hp-primary); display:flex; align-items:center; justify-content:center; font-size:var(--fs-base); }

@media (max-width:991px){
	.home-page .hp-section{ padding:56px 0; }
	.home-page .hp-head h2{ font-size:var(--fs-2xl); }
	.home-page .hp-feats{ grid-template-columns:repeat(2,1fr); }
	.home-page .hp-os{ grid-template-columns:repeat(2,1fr); }
	.home-page .hp-reviews{ grid-template-columns:1fr; }
	.home-page .hp-downloads{ grid-template-columns:1fr; }
	/* 세 칸짜리 줄은 2단으로 접으면 마지막 한 장이 혼자 남습니다.
	   글이 짧은 카드라 이 폭까지는 세 칸을 유지하고 여백만 줄입니다. */
	.home-page .hp-feats--3{ grid-template-columns:repeat(3,1fr); gap:18px; }
	.home-page .hp-feats--3 .hp-feat{ padding:26px 18px; }
	.home-page .hp-figure{ padding:22px; }
}
@media (max-width:767px){
	.home-page .hp-feats--3{ grid-template-columns:1fr; }
	.home-page .hp-feats--3 .hp-feat{ padding:32px 26px; }
	/* 이 폭부터는 그림을 폭에 맞춰 줄이면 글자가 뭉개져 읽히지 않습니다.
	   그래서 그림만 가로로 밀어 보게 둡니다. 잘려 보이는 것이 곧 밀 수
	   있다는 표시라, 따로 안내 문구는 두지 않습니다. */
	.home-page .hp-figure-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
	.home-page .hp-figure-scroll svg{ min-width:720px; }
	.home-page .hp-myth{ grid-template-columns:1fr; }
	.home-page .hp-myth-col.is-myth{ border-right:0; border-bottom:1px solid var(--hp-line); }
}
@media (max-width:575px){
	.home-page .hp-feats{ grid-template-columns:1fr; }
	.home-page .hp-duo{ grid-template-columns:1fr; }
	.home-page .hp-os{ grid-template-columns:1fr; }
	.home-page .hp-stats{ grid-template-columns:1fr; }
	.home-page .hp-myth-col{ padding:24px 22px; }
}

/* 플로팅 CTA (스크롤 내내 노출, 챗봇 버튼과 겹치지 않게 우측 세로 중앙) */
.hp-float{
	position:fixed; right:26px; top:50%; bottom:auto;
	transform:translateY(-50%) translateX(120px); z-index:9990;
	display:inline-flex; align-items:center; gap:10px;
	background:linear-gradient(135deg,#0066ff,#3a8bff);
	color:#fff; font-weight:700; font-size:var(--fs-base);
	padding:15px 26px; border-radius:999px;
	box-shadow:0 12px 30px rgba(0,102,255,0.40);
	text-decoration:none; opacity:0; pointer-events:none;
	transition:transform .35s ease, opacity .35s ease, box-shadow .18s ease;
}
.hp-float.is-visible{ transform:translateY(-50%) translateX(0); opacity:1; pointer-events:auto; }
.hp-float:hover{ color:#fff; box-shadow:0 16px 38px rgba(0,102,255,0.5); }
.hp-float i{ font-size:var(--fs-base); }
@media (max-width:767px){ .hp-float{ right:16px; top:40%; padding:13px 22px; font-size:var(--fs-base); } }

/* ==================================================================
   [페이지 전용] 왜 Seetrol인가
   스코프 .my-page
   대상 : whyseetrol.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 173줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
/* ============================================================
   Seetrol MY : 통일 디자인 시스템 (scoped: .my-page)
   연혁·리뷰·시스템구성도·가격비교·활용사례와 동일 토큰
============================================================ */
.my-page{
	--my-primary:var(--pg-primary);
	--my-primary-dark:var(--pg-primary-dark);
	--my-ink:var(--pg-ink);
	--my-body:var(--pg-body);
	--my-muted:var(--pg-muted);
	--my-line:var(--pg-line);
	--my-radius:var(--pg-radius);
	--my-shadow:var(--pg-shadow);
	--my-shadow-sm:var(--pg-shadow-sm);
}

.my-page .my-section{ padding:80px 0; }
.my-page .my-section--tint{ background:#f5f7fb; }

/* 헤더 */
.my-page .my-head{ text-align:center; max-width:760px; margin:0 auto 46px; }
.my-page .my-eyebrow{
	display:inline-block; color:var(--my-primary);
	font-weight:700; letter-spacing:0.04em;
	font-size:var(--fs-lg); margin-bottom:14px;
}
.my-page .my-head h2{ color:var(--my-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 16px; line-height:1.35; }
.my-page .my-head p{ color:var(--my-body); font-size:var(--fs-base); line-height:1.8; margin:0; }

/* 지그재그 블록 */
.my-page .my-block{ display:flex; flex-wrap:wrap; align-items:center; gap:56px; }
.my-page .my-block--reverse{ flex-direction:row-reverse; }
.my-page .my-block-media{ flex:1 1 420px; min-width:300px; }
.my-page .my-block-body{ flex:1 1 420px; min-width:300px; }
.my-page .my-block-media > img{ width:100%; border-radius:var(--my-radius); box-shadow:var(--my-shadow); display:block; }

/* [2026-08-05] 첫 화면(my1)만 : 오른쪽 사진과 왼쪽 카드 4장의 높이를 맞춥니다.
   01_a.png 는 558x600 이라 칼럼 폭을 꽉 채우면 600px 넘게 높아지는데,
   카드를 아이콘 옆 제목 배치로 바꾸면서 왼쪽이 430px 안팎으로 낮아졌습니다.
   사진 높이를 카드 쪽에 맞추고 가로는 비율대로 줄여 가운데에 둡니다.
   ※ 다른 블록(my2 이하)의 사진은 그대로입니다. */
/* [2026-08-05] 첫 화면만 카드 쪽을 조금 넓힙니다. 사진 높이를 430px 로
   제한해 가로도 400px 안팎으로 줄었으니, 남는 폭을 왼쪽에 줍니다.
   기본은 양쪽 다 flex:1 1 420px 로 반씩 나눠 갖습니다. */
.my-page .my1 .my-block-body{ flex:1.1 1 430px; }
.my-page .my1 .my-block-media{ flex:0.9 1 400px; }
.my-page .my1 .my-block-media > img{
	width:auto; max-width:100%; max-height:430px; margin:0 auto;
}

.my-page .my-cat{
	display:inline-flex; align-items:center; gap:7px;
	color:var(--my-primary); background:rgba(0,102,255,0.10);
	font-weight:700; font-size:var(--fs-xs); letter-spacing:0.03em;
	padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.my-page .my-name{ color:var(--my-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 14px; line-height:1.3; }
.my-page .my-lead{ color:var(--my-body); font-size:var(--fs-base); line-height:1.85; margin:0; text-align:justify; word-break:keep-all; }

/* 히어로 강점 카드 (2x2) */
.my-page .my-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.my-page .my-hl{
	background:#fff; border:1px solid var(--my-line); border-radius:16px;
	box-shadow:var(--my-shadow-sm); padding:26px 22px;
	transition:transform .2s ease, box-shadow .2s ease;
}
.my-page .my-hl:hover{ transform:translateY(-4px); box-shadow:var(--my-shadow); }
.my-page .my-hl-ico{
	width:58px; height:58px; margin-bottom:16px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(0,102,255,0.10);
}
.my-page .my-hl-ico svg{ width:34px; height:34px; fill:var(--my-primary); }
/* [2026-08-05] 아이콘 오른쪽에 제목을 놓습니다(예: 폐쇄망에서도 이용).
   .my-feat 와 같은 방식 — 마크업은 그대로 두고 그리드로만 배치합니다.
   1행 : 아이콘 | 제목 , 2행 : 설명(두 칸에 걸침) */
.my-page .my-hl{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center; }
.my-page .my-hl .my-hl-ico{ grid-row:1; grid-column:1; margin-bottom:0; }
.my-page .my-hl h5{ grid-row:1; grid-column:2; color:var(--my-ink); font-weight:700; font-size:var(--fs-md); margin:0; word-break:keep-all; }
.my-page .my-hl p{ grid-row:2; grid-column:1 / -1; color:var(--my-body); font-size:var(--fs-base); line-height:1.7; margin:16px 0 0; word-break:keep-all; }

/* 도넛 링(비용 비율) */
.my-page .my-rings{ display:flex; flex-wrap:wrap; gap:34px; margin-top:26px; }
.my-page .my-ring-item{ text-align:center; }
.my-page .my-ring{
	width:150px; height:150px; border-radius:50%; margin:0 auto 12px;
	display:flex; align-items:center; justify-content:center; position:relative;
}
.my-page .my-ring::after{
	content:""; position:absolute; inset:14px; background:#fff; border-radius:50%;
	box-shadow:inset 0 0 0 1px var(--my-line);
}
.my-page .my-ring b{ position:relative; z-index:1; color:var(--my-primary); font-weight:800; font-size:var(--fs-3xl); }
.my-page .my-ring-cap{ color:var(--my-ink); font-weight:600; font-size:var(--fs-base); line-height:1.4; }
.my-page .my-ring-cap span{ display:block; color:var(--my-muted); font-size:var(--fs-xs); font-weight:500; }

/* 영상 박스 */
.my-page .my-video{ position:relative; border-radius:var(--my-radius); overflow:hidden; box-shadow:var(--my-shadow); }
.my-page .my-video img{ width:100%; display:block; }
.my-page .my-video .my-play{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:76px; height:76px; border-radius:50%;
	background:rgba(0,102,255,0.92); color:#fff;
	display:flex; align-items:center; justify-content:center; font-size:var(--fs-xl);
	box-shadow:0 8px 24px rgba(0,102,255,0.45); text-decoration:none;
	transition:transform .2s ease, background .2s ease;
}
.my-page .my-video .my-play::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(255,255,255,0.5); animation:mypulse 2s infinite; }
.my-page .my-video .my-play:hover{ transform:translate(-50%,-50%) scale(1.08); background:var(--my-primary); color:#fff; }
@keyframes mypulse{ 0%{ transform:scale(1); opacity:0.8; } 100%{ transform:scale(1.35); opacity:0; } }

.my-page .my-btn{
	display:inline-flex; align-items:center; gap:9px; margin-top:24px;
	background:linear-gradient(135deg,var(--my-primary),#3a8bff);
	color:#fff; font-weight:700; font-size:var(--fs-base);
	padding:14px 30px; border-radius:999px;
	box-shadow:0 10px 24px rgba(0,102,255,0.26);
	text-decoration:none; transition:transform .18s ease, box-shadow .18s ease;
}
.my-page .my-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,102,255,0.36); color:#fff; }

/* 주요 기능 그리드 */
.my-page .my-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.my-page .my-feat{
	background:#fff; border:1px solid var(--my-line); border-radius:16px;
	box-shadow:var(--my-shadow-sm); padding:26px 24px;
	transition:transform .2s ease, box-shadow .2s ease;
}
.my-page .my-feat:hover{ transform:translateY(-4px); box-shadow:var(--my-shadow); }
.my-page .my-feat-ico{
	/* [2026-08-05] 아이콘이 작다고 하셔서 키웠습니다.
	   52x62 -> 64x64, 글자 1.75rem -> 2.15rem.
	   가로세로가 달라 살짝 세로로 긴 상자였는데 정사각형으로 맞췄습니다. */
	width:64px; height:64px; margin-bottom:18px; border-radius:16px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(0,102,255,0.10); color:var(--my-primary); font-size:var(--fs-4xl);
}
/* [2026-08-05] 아이콘 오른쪽에 제목을 놓습니다(예: Linux 디바이스 제어).
   마크업은 그대로 두고 그리드 배치만 바꿨습니다 —
   1행 : 아이콘 | 제목 , 2행 : 설명(두 칸에 걸침) */
.my-page .my-feat{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center; }
.my-page .my-feat .my-feat-ico{ grid-row:1; grid-column:1; margin-bottom:0; }
.my-page .my-feat h5{ grid-row:1; grid-column:2; color:var(--my-ink); font-weight:700; font-size:var(--fs-md); margin:0; word-break:keep-all; }
.my-page .my-feat p{ grid-row:2; grid-column:1 / -1; color:var(--my-body); font-size:var(--fs-base); line-height:1.7; margin:16px 0 0; text-align:justify; word-break:keep-all; }

/* 빠른 접속 3단계 */
.my-page .my-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.my-page .my-step{
	background:#fff; border:1px solid var(--my-line); border-radius:var(--my-radius);
	box-shadow:var(--my-shadow-sm); padding:30px; position:relative; overflow:hidden;
}
.my-page .my-step-num{
	font-weight:800; font-size:var(--fs-4xl); color:rgba(0,102,255,0.18); line-height:1; margin-bottom:8px;
}
.my-page .my-step h5{ color:var(--my-ink); font-weight:700; font-size:var(--fs-lg); margin:0 0 10px; }
.my-page .my-step p{ color:var(--my-body); font-size:var(--fs-base); line-height:1.7; margin:0 0 18px; }
.my-page .my-step img{ width:100%; border-radius:10px; display:block; }

/* IO 기기 카드 */
.my-page .my-io-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.my-page .my-io-card{
	background:#fff; border:1px solid var(--my-line); border-radius:16px;
	box-shadow:var(--my-shadow-sm); padding:24px; text-align:center;
	transition:transform .2s ease, box-shadow .2s ease;
}
.my-page .my-io-card:hover{ transform:translateY(-4px); box-shadow:var(--my-shadow); }
.my-page .my-io-img{ height:120px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.my-page .my-io-img img{ max-height:120px; max-width:100%; }
.my-page .my-io-card h4{ color:var(--my-ink); font-weight:700; font-size:var(--fs-md); margin:0 0 8px; }
.my-page .my-io-card p{ color:var(--my-body); font-size:var(--fs-base); line-height:1.65; margin:0; word-break:keep-all; }

@media (max-width:991px){
	.my-page .my-section{ padding:56px 0; }
	.my-page .my-block{ gap:34px; }
	.my-page .my-head h2{ font-size:var(--fs-2xl); }
	.my-page .my-name{ font-size:var(--fs-xl); }
	.my-page .my-feats{ grid-template-columns:repeat(2,1fr); }
	.my-page .my-io-grid{ grid-template-columns:repeat(2,1fr); }
	.my-page .my-steps{ grid-template-columns:1fr; }
}
@media (max-width:575px){
	.my-page .my-hero-grid{ grid-template-columns:1fr; }
	.my-page .my-feats{ grid-template-columns:1fr; }
	.my-page .my-io-grid{ grid-template-columns:1fr; }
}

		.my-float{
			position:fixed; right:26px; top:50%; bottom:auto;
			transform:translateY(-50%) translateX(120px); z-index:9990;
			display:inline-flex; align-items:center; gap:10px;
			background:linear-gradient(135deg,#0066ff,#3a8bff);
			color:#fff; font-weight:700; font-size:var(--fs-base);
			padding:15px 26px; border-radius:999px;
			box-shadow:0 12px 30px rgba(0,102,255,0.40);
			text-decoration:none; opacity:0; pointer-events:none;
			transition:transform .35s ease, opacity .35s ease, box-shadow .18s ease;
		}
		.my-float.is-visible{ transform:translateY(-50%) translateX(0); opacity:1; pointer-events:auto; }
		.my-float:hover{ color:#fff; box-shadow:0 16px 38px rgba(0,102,255,0.5); }
		.my-float i{ font-size:var(--fs-base); }
		@media (max-width:767px){ .my-float{ right:16px; top:40%; padding:13px 22px; font-size:var(--fs-base); } }

/* ==================================================================
   [페이지 전용] 시스템 구성도
   스코프 .sys-page
   대상 : system.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 157줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
/* ============================================================
   Seetrol 시스템구성도 : 통일 디자인 시스템 (scoped: .sys-page)

   [이번 수정]
   1) 구성도 2장을 가로 2단 → 세로로 쌓아 화면 폭 전체를 쓰도록
      바꿨습니다. 기존에는 한 장이 약 570px 로 줄어들어 도면 안의
      글자가 읽히지 않았습니다. 이제 약 1080px 로 표시됩니다.
      (확대 기능은 세부 확인용으로 그대로 두었습니다)
   2) howitworks CTA 배너 섹션을 제거했습니다.
      ※ 관련 CSS(.sys-cta*)도 함께 지웠습니다. 되살리시려면
        말씀해 주세요.
============================================================ */
.sys-page{
	--sys-primary:var(--pg-primary);
	--sys-primary-dark:var(--pg-primary-dark);
	--sys-appliance:#0066ff;   /* 하드웨어 */
	--sys-software:#7a5cff;    /* 소프트웨어 */
	--sys-ink:var(--pg-ink);
	--sys-body:var(--pg-body);
	--sys-muted:var(--pg-muted);
	--sys-line:var(--pg-line);
	--sys-radius:var(--pg-radius);
	--sys-shadow:var(--pg-shadow);
	--sys-shadow-sm:var(--pg-shadow-sm);
}

/* 섹션 여백 통일 + 배경 밴딩(짝수 섹션은 연회색) */
.sys-page .sys-section{ padding:80px 0; }
.sys-page .sys-section--tint{ background:#f5f7fb; }

/* 공통 헤더 */
.sys-page .sys-head{ text-align:center; max-width:720px; margin:0 auto 46px; }
.sys-page .sys-head .sys-eyebrow{
	display:inline-block; color:var(--sys-primary);
	font-weight:700; letter-spacing:0.04em;
	font-size:var(--fs-lg); margin-bottom:14px;
}
.sys-page .sys-head h2{ color:var(--sys-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 16px; line-height:1.35; }
.sys-page .sys-head p{ color:var(--sys-body); font-size:var(--fs-base); line-height:1.8; margin:0; }

/* ------------------------------------------------------------
   구성도(차트) 카드

   ★ 기존 : display:flex + flex:1 1 420px  → 한 줄에 2장이 들어가
            각 장이 약 570px 로 축소됐습니다.
     수정 : 세로로 쌓아 한 장이 화면 폭을 다 쓰도록 했습니다.
------------------------------------------------------------ */
.sys-page .sys-charts{
	display:grid;
	grid-template-columns:1fr;   /* 한 줄에 한 장 */
	gap:36px;
	max-width:1080px;            /* 너무 커지지 않게 상한 */
	margin:0 auto;
}
/* [2026-08-07] 바깥 틀 색을 --sys-line(#e4e8ef) 보다 진하게 잡았습니다.
   원래 값은 흰 배경에서 거의 안 보여 카드 경계가 흐릿했습니다. */
.sys-page .sys-chart{
	background:#fff; border:1px solid #adbaca;
	border-radius:var(--sys-radius); box-shadow:0 10px 28px rgba(16,24,40,0.10);
	overflow:hidden; transition:box-shadow .2s ease, transform .2s ease;
}
.sys-page .sys-chart:hover{ box-shadow:var(--sys-shadow); transform:translateY(-3px); }
.sys-page .sys-chart-head{
	display:flex; align-items:center; justify-content:space-between;
	gap:14px; flex-wrap:wrap;
	padding:20px 28px; border-bottom:1px solid #adbaca;
}
.sys-page .sys-chart-title{ color:var(--sys-ink); font-weight:800; font-size:var(--fs-lg); }
.sys-page .sys-chart-hint{ color:var(--sys-muted); font-size:var(--fs-xs); display:inline-flex; align-items:center; gap:6px; }
.sys-page .sys-chart-body{ padding:24px 28px 30px; }
.sys-page .sys-chart-body img.zoomable{
	width:100%; height:auto; border-radius:10px; cursor:zoom-in;
	transition:transform .3s ease; display:block;
}

/* ------------------------------------------------------------
   [2026-08-07] 망 구성 개념도 (.netmap)

   그림(JPG) 대신 HTML + 폰트 아이콘으로 그립니다. 글자가 진짜
   글자라서 검색엔진·스크린리더가 읽고, 확대해도 안 깨지고,
   문구 수정에 포토샵이 필요 없습니다.

   [폭이 변해도 안 깨지게 만든 방법]
   원본 그림처럼 노드를 부채꼴로 흩어 놓으면 좌표가 필요하고,
   좌표는 폭이 바뀔 때마다 어긋납니다. 그래서
     · 카드 3장을 그리드 한 줄에 놓고
     · 사이의 화살표는 줄 높이에 맞춰 저절로 가운데 오게 하고
     · 크기는 전부 clamp() 로 폭에 따라 매끄럽게 줄어들게
   했습니다. 어긋날 좌표가 아예 없습니다.
   좁아지면(991px 이하) 3장이 위아래로 쌓이고 화살표만 아래를
   향하도록 돌아갑니다. 글자가 작아지지 않으므로 가로 스크롤도,
   확대 모달도 필요 없습니다.

   폐쇄망 구성도도 가운데 카드만 INTRANET 으로 바꾸면 되도록
   .netmap-- 모디파이어 자리를 비워 뒀습니다.
------------------------------------------------------------ */
.sys-page .netmap{
	/* -ink 는 글자용(어둡게), -line 은 테두리용, -bg 는 카드 바탕용입니다.
	   원색을 글자 배경으로 쓰면(특히 주황·하늘색) 흰 글자가 안 읽혀서,
	   원색은 아이콘 원에만 쓰고 글자는 어두운 계열로 분리했습니다. */
	--net-view:#f5a623;  --net-view-ink:#8a5000; --net-view-line:#eecb90; --net-view-bg:#fff6e6;
	--net-ask:#463d8c;   --net-ask-ink:#332c69;  --net-ask-line:#c8c0e6;  --net-ask-bg:#f1eefb;
	--net-io:#0a90d8;    --net-io-ink:#055b83;   --net-io-line:#a4d6f1;   --net-io-bg:#e8f5fd;
	--net-my:#dc0046;
	--net-txt:#5a6270;

	display:grid;
	grid-template-columns:1fr auto 1.3fr auto 1fr;
	align-items:stretch;
}

/* 카드 3장 — 바탕에 색을 옅게 깔고, 그 위의 칩은 흰색으로 띄웁니다.
   흰 카드 위에 옅은 칩을 얹었더니 서로 묻혀서 뒤집었습니다. */
.sys-page .netmap-card{
	display:flex; flex-direction:column;
	border:1px solid; border-radius:16px;
	padding:clamp(16px,1.7vw,26px);
	box-shadow:0 8px 24px rgba(16,24,40,0.07);
}
.sys-page .netmap-card--view{ background:var(--net-view-bg); border-color:var(--net-view-line); }
.sys-page .netmap-card--ask { background:var(--net-ask-bg);  border-color:var(--net-ask-line); }

.sys-page .netmap-card-head{ margin-bottom:16px; }
.sys-page .netmap-card-head h3{
	margin:9px 0 0; font-size:var(--fs-lg); font-weight:800;
	color:var(--sys-ink); word-break:keep-all; line-height:1.35;
}
.sys-page .netmap-eyebrow{
	display:inline-block; padding:4px 11px; border-radius:999px;
	font-size:var(--fs-2xs); font-weight:800; letter-spacing:.01em; white-space:nowrap;
}
.sys-page .netmap-eyebrow--view{ background:#ffdfab; color:#7a4600; }
.sys-page .netmap-eyebrow--ask { background:#d9d2f5; color:#2c2560; }
.sys-page .netmap-eyebrow--net { background:#c7e2fb; color:#07507b; }
.sys-page .netmap-eyebrow--my  { background:#ffcbdb; color:#99002f; }

/* flex:1 + center — 왼쪽 카드는 칩이 2개뿐이라 남는 공간이 생깁니다.
   위로 몰리지 않고 가운데 놓이도록 했습니다. */
.sys-page .netmap-chips{
	list-style:none; margin:0; padding:0;
	display:flex; flex-direction:column; gap:10px;
	flex:1 1 auto; justify-content:center;
}
.sys-page .netmap-chip{
	display:flex; align-items:center; gap:13px;
	padding:10px 16px 10px 10px; border-radius:999px;
	background:#fff; border:1px solid;
	box-shadow:0 2px 8px rgba(16,24,40,0.07);
}
.sys-page .netmap-chip-ico{
	flex:0 0 auto; width:42px; height:42px; border-radius:50%;
	display:inline-flex; align-items:center; justify-content:center;
	color:#fff; font-size:var(--fs-md);
}
.sys-page .netmap-chip-txt{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.sys-page .netmap-chip-txt b{ font-size:var(--fs-base); font-weight:800; }
.sys-page .netmap-chip-txt em{
	font-style:normal; font-size:var(--fs-xs);
	color:var(--net-txt); word-break:keep-all;
}

.sys-page .netmap-chip--view{ border-color:var(--net-view-line); }
.sys-page .netmap-chip--view .netmap-chip-txt b{ color:var(--net-view-ink); }
/* 주황 원 위에는 흰 아이콘이 안 보여 진한 갈색을 씁니다 */
.sys-page .netmap-chip--view .netmap-chip-ico{ background:var(--net-view); color:#5c3a00; }
.sys-page .netmap-chip--ask{ border-color:var(--net-ask-line); }
.sys-page .netmap-chip--ask .netmap-chip-txt b{ color:var(--net-ask-ink); }
.sys-page .netmap-chip--ask .netmap-chip-ico{ background:var(--net-ask); }
.sys-page .netmap-chip--io{ border-color:var(--net-io-line); }
.sys-page .netmap-chip--io .netmap-chip-txt b{ color:var(--net-io-ink); }
.sys-page .netmap-chip--io .netmap-chip-ico{ background:var(--net-io); }

.sys-page .netmap-card-foot{
	margin:18px 0 0; padding-top:14px; margin-top:auto;
	border-top:1px solid rgba(16,24,40,0.12);
	font-size:var(--fs-xs); color:var(--net-txt); word-break:keep-all; line-height:1.6;
}

/* 가운데 카드 — 배경의 세계지도는 원본 그림에서 뽑아낸 것입니다.
   multiply 로 겹쳐야 옅은 바탕색 위에서도 지도가 보입니다. */
.sys-page .netmap-card--core{
	position:relative; overflow:hidden;
	align-items:center; text-align:center;
	background:#e9f2fc; border-color:#b9d3ee;
}
.sys-page .netmap-card--core::before{
	content:''; position:absolute; inset:0; pointer-events:none;
	background:url(/images/resource/chart_01_map.png) center 34% / 118% auto no-repeat;
	mix-blend-mode:multiply;
}
.sys-page .netmap-card--core > *{ position:relative; }

.sys-page .netmap-hub{
	position:relative; margin:6px auto 0;
	width:clamp(124px,11.5vw,164px); aspect-ratio:1; border-radius:50%;
	background:#fff; border:7px solid;
	border-top-color:#3aa8bf; border-right-color:var(--net-ask);
	border-bottom-color:var(--net-io); border-left-color:var(--net-my);
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
	box-shadow:0 10px 26px rgba(16,24,40,0.14);
}
.sys-page .netmap-hub i{ font-size:clamp(22px,2.3vw,31px); color:#4b5563; }
.sys-page .netmap-hub b{ font-size:var(--fs-base); font-weight:800; letter-spacing:.06em; color:#1f2937; }
/* 허브 아래쪽, 선이 나가는 지점 */
.sys-page .netmap-hub::after{
	content:''; position:absolute; top:100%; left:50%; transform:translate(-50%,-50%);
	width:13px; height:13px; border-radius:50%;
	background:var(--net-my); box-shadow:0 0 0 3px #fff;
}

/* 허브 ↔ MY 연결선. 남는 공간을 전부 차지하므로(flex:1) 카드 높이가
   얼마가 되든 두 요소를 정확히 이어 줍니다. 길이를 숫자로 안 적었습니다. */
.sys-page .netmap-wire{
	position:relative; width:100%; flex:1 1 auto; min-height:46px;
	display:flex; align-items:center; justify-content:center;
}
.sys-page .netmap-wire::before{
	content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
	width:4px; background:var(--net-my); border-radius:2px;
}
.sys-page .netmap-wire i{
	position:relative; width:36px; height:36px; border-radius:50%;
	display:inline-flex; align-items:center; justify-content:center;
	background:var(--net-my); color:#fff; font-size:var(--fs-xs);
	box-shadow:0 0 0 4px #fff, 0 4px 10px rgba(220,0,70,0.35);
}

.sys-page .netmap-my{
	width:100%;
	display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
	gap:14px; text-align:center;
	background:#fff; border:2px solid var(--net-my); border-radius:14px;
	padding:14px 16px;
	box-shadow:0 8px 20px rgba(220,0,70,0.16);
}
.sys-page .netmap-my img{ flex:0 0 auto; width:clamp(72px,7vw,104px); height:auto; }
.sys-page .netmap-my-txt{ flex:1 1 185px; min-width:0; }
.sys-page .netmap-my-txt b{
	display:block; margin:7px 0 5px;
	font-size:var(--fs-md); font-weight:800; color:var(--net-my);
}
.sys-page .netmap-my-txt em{
	font-style:normal; display:block;
	font-size:var(--fs-xs); color:var(--net-txt); line-height:1.6; word-break:keep-all;
}

/* ── 폐쇄망 전용 ────────────────────────────────────────────
   가운데 카드만 다릅니다. 바깥 인터넷을 흐리게 그린 뒤,
   그 아래로 내려가는 선을 끊어 놓았습니다.
   (원본 그림의 빨간 빗금과 같은 뜻입니다)
   배경 세계지도는 뺐습니다 — 폐쇄망에 세계지도는 앞뒤가 안 맞습니다. */
.sys-page .netmap--closed .netmap-card--core{ background:#eef1f6; border-color:#a9b5c6; }
/* 인터넷망 카드에 깔았던 세계지도를 지웁니다. 대신 아무것도 깔지
   않습니다 — 워터마크를 넣어 봤더니 허브 뒤에서 얼룩처럼 보였습니다. */
.sys-page .netmap--closed .netmap-card--core::before{ content:none; }

.sys-page .netmap-outside{
	display:inline-flex; align-items:center; gap:11px;
	padding:9px 20px 9px 14px; border-radius:999px;
	background:#fff; border:2px dashed #97a3b5; text-align:left;
}
.sys-page .netmap-outside i{ font-size:var(--fs-xl); color:#7e8998; }
.sys-page .netmap-outside b{
	display:block; font-size:var(--fs-base); font-weight:800;
	letter-spacing:.05em; color:#414b58;
}
.sys-page .netmap-outside em{ font-style:normal; display:block; font-size:var(--fs-2xs); color:#6b7480; }

/* 끊긴 구간 — 점선에 빨간 X 를 얹었습니다 */
.sys-page .netmap-cut{
	position:relative; width:100%; padding:16px 0 14px;
	display:flex; flex-direction:column; align-items:center; gap:9px;
}
.sys-page .netmap-cut::before{
	content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
	width:4px; border-radius:2px;
	background:repeating-linear-gradient(#aab4c2 0 7px, transparent 7px 14px);
}
.sys-page .netmap-cut-badge{
	position:relative; width:38px; height:38px; border-radius:50%;
	display:inline-flex; align-items:center; justify-content:center;
	background:#c8102e; color:#fff; font-size:var(--fs-md);
	box-shadow:0 0 0 4px #eef1f6, 0 4px 10px rgba(200,16,46,0.35);
}
.sys-page .netmap-cut em{
	position:relative; font-style:normal;
	padding:4px 12px; border-radius:999px;
	background:#fff; border:1px solid #edb4bd;
	font-size:var(--fs-2xs); font-weight:800; color:#a4162a; white-space:nowrap;
}

/* 카드 사이 화살표 — 줄 높이에 맞춰 저절로 가운데 옵니다 */
.sys-page .netmap-flow{
	display:flex; align-items:center; justify-content:center;
	padding:0 clamp(10px,1.4vw,20px);
	color:#48525f; font-size:clamp(18px,2vw,25px);
}

.sys-page .netmap-cap{
	margin:20px auto 0; max-width:840px; text-align:center;
	font-size:var(--fs-base); color:var(--sys-body); line-height:1.75; word-break:keep-all;
}
.sys-page .netmap-cap b{ color:var(--sys-ink); font-weight:800; }
.sys-page .netmap-cap a{ color:var(--sys-primary); font-weight:700; }

@media (max-width:991px){
	.sys-page .netmap{ grid-template-columns:1fr; }
	.sys-page .netmap-flow{ padding:14px 0; transform:rotate(90deg); }
	/* 카드가 가로로 넓어지면서 배경 지도가 너무 커져 시끄러워집니다 */
	.sys-page .netmap-card--core::before{ background-size:auto 62%; background-position:center 44%; }
}

/* 제품 블록(지그재그) */
.sys-page .sys-block{ display:flex; flex-wrap:wrap; align-items:center; gap:56px; }
.sys-page .sys-block--reverse{ flex-direction:row-reverse; }
.sys-page .sys-block-media{ flex:1 1 440px; min-width:300px; }
.sys-page .sys-block-body{ flex:1 1 420px; min-width:300px; }
.sys-page .sys-block-media img{
	width:100%; border-radius:var(--sys-radius);
	box-shadow:var(--sys-shadow); display:block;
}
.sys-page .sys-block-media .testimonial-carousel img{ margin-bottom:0; }

/* [2026-08-11] 세 제품을 한 카드에 삼각형(위 중앙 1 · 아래 좌우 2)으로
   모아 보여 줍니다. 타일로 나누지 않고 한 장면처럼 놓습니다.
   제품 사진이 흰 배경이라, 카드 바탕을 옅은 파랑 그라디언트로 두어
   흰 사각형이 튀지 않게 하고, 은은한 광으로 밋밋함을 덜었습니다. */
.sys-page .sys-servercard{
	position:relative; overflow:hidden;
	border-radius:var(--sys-radius);
	padding:30px 26px 24px;
	background:
		radial-gradient(90% 70% at 50% 0%, rgba(0,102,255,0.10), rgba(0,102,255,0) 70%),
		linear-gradient(160deg, #ffffff 0%, #eef3fb 55%, #e2ecfa 100%);
	border:1px solid var(--sys-line, rgba(16,24,40,0.08));
	box-shadow:0 14px 36px rgba(16,24,40,0.10);
}
/* 왼쪽 위 은은한 빛 무리 — 바탕이 완전히 비지 않도록 */
.sys-page .sys-servercard::before{
	content:''; position:absolute; top:-40px; left:-40px; width:220px; height:220px;
	pointer-events:none; border-radius:50%;
	background:radial-gradient(circle, rgba(0,102,255,0.12), rgba(0,102,255,0) 70%);
}
/* 삼각형 배치 : Penta(첫째)는 위 중앙, Twins·Plus 는 아래 좌우 */
.sys-page .sys-servercard__shots{
	position:relative; z-index:1;
	display:grid; grid-template-columns:1fr 1fr;
	gap:16px 18px; align-items:center; justify-items:center;
}
.sys-page .sys-servercard__shots img{ width:100%; display:block; }
.sys-page .sys-servercard__shots img:first-child{
	grid-column:1 / -1; max-width:210px;   /* 위 꼭지점 — 정사각 Penta */
}
/* [2026-08-11] Seetrol IO — 여러 제품을 2열 격자로. 칸(흰 타일)은 모두
   같은 크기이고, 제품 사진은 그 안을 최대한 채웁니다(object-fit:contain
   + 여백 최소). 마지막 제품(가장 긴 Socket 6ch)은 아래 한 줄로 넓게
   놓습니다. */
.sys-page .sys-servercard__shots--quad{ gap:12px; }
.sys-page .sys-servercard__shots--quad img{
	grid-column:auto; max-width:none;
	/* [2026-08-11] 그림은 폭 기준으로 크기가 정해지므로, 타일 높이와
	   상하 여백을 줄이면 그림 크기는 그대로 두고 위아래 흰 여백만
	   줄어들어 카드 전체 높이가 낮아집니다. (220→170, 상하 padding 축소) */
	width:100%; height:170px; object-fit:contain;
	background:#fff; border-radius:10px; padding:4px 10px;
	box-shadow:0 4px 12px rgba(0,0,0,0.12);
}
/* 위 삼각형(MY)용 first-child 규칙이 :first-child 때문에 우선순위가 높아
   quad 의 첫 이미지(2ch)까지 한 줄을 통째로 차지하게 만들었습니다.
   같은 우선순위로 되돌려, 2ch·4ch 가 나란히 오게 합니다. */
.sys-page .sys-servercard__shots--quad img:first-child{
	grid-column:auto; max-width:none;
}
/* 배치
     1행 Switch 2ch · 4ch (나란히)
     2행 Push (혼자 가운데)
     3행 Socket 3ch · 6ch (나란히)
   3번째(Push)만 한 줄을 다 쓰되 세로 기판이라 폭을 줄여 가운데 놓고,
   나머지 넷(2ch·4ch·3ch·6ch)은 2열로 나란히 옵니다. */
.sys-page .sys-servercard__shots--quad img:nth-child(3){
	grid-column:1 / -1; justify-self:center; max-width:46%;
}
.sys-page .sys-servercard__name{
	position:relative; z-index:1;
	display:block; margin-top:20px; text-align:center;
	color:var(--sys-ink, #1a1d24); font-weight:800; font-size:var(--fs-lg);
	letter-spacing:0.01em;
}

/* ------------------------------------------------------------
   [2026-08-07] Seetrol MY 사진 넘김 버튼

   테마의 owl 내비게이션 스타일이 이 캐러셀까지 오지 않아,
   좌우 꺾쇠(‹ ›)가 사진 아래에 맨몸으로 세로로 쌓여 있었습니다.
   글자 두 개가 그냥 굴러다니는 것처럼 보였습니다.
   사진 안쪽에 동그란 버튼으로 얹습니다.

   [왜 좌우 가운데가 아니라 왼쪽 아래인가]
   오른쪽 화면 중앙에는 "무료체험 신청하기" 플로팅 CTA 가 늘 떠 있습니다
   (position:fixed · top:50% · z-index 9990). 이 블록은 사진이 오른쪽에
   오는 배치라, 버튼을 사진 좌우 가운데에 두면 오른쪽 버튼이 CTA 에
   가려집니다. 실제로 겹치는 것을 확인하고 왼쪽 아래로 내렸습니다.

   버튼 글리프는 js/script.js 의 navText 에서 옵니다
   (fa-angle-left · fa-angle-right). 여기서는 자리와 모양만 잡습니다.
------------------------------------------------------------ */
.sys-page .sys-block-media .testimonial-carousel{ position:relative; }
.sys-page .sys-block-media .testimonial-carousel .owl-nav{
	position:absolute; left:16px; bottom:16px; z-index:2;
	display:flex; gap:9px; margin:0;
}
.sys-page .sys-block-media .testimonial-carousel .owl-nav .owl-prev,
.sys-page .sys-block-media .testimonial-carousel .owl-nav .owl-next{
	position:static; transform:none;
	width:46px; height:46px; margin:0; padding:0; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:rgba(255,255,255,0.94); color:var(--sys-ink);
	border:1px solid rgba(16,24,40,0.12);
	box-shadow:0 6px 18px rgba(16,24,40,0.22);
	font-size:var(--fs-lg); line-height:1; cursor:pointer;
	transition:background .18s ease, box-shadow .18s ease;
}
.sys-page .sys-block-media .testimonial-carousel .owl-nav .owl-prev:hover,
.sys-page .sys-block-media .testimonial-carousel .owl-nav .owl-next:hover{
	background:#fff; box-shadow:0 10px 24px rgba(16,24,40,0.30);
}
.sys-page .sys-block-media .testimonial-carousel .owl-nav .disabled{ opacity:0.4; cursor:default; }
/* 사진이 3장뿐이라 점 표시는 쓰지 않습니다 */
.sys-page .sys-block-media .testimonial-carousel .owl-dots{ display:none; }
@media (max-width:575px){
	.sys-page .sys-block-media .testimonial-carousel .owl-nav{ left:10px; bottom:10px; gap:7px; }
	.sys-page .sys-block-media .testimonial-carousel .owl-nav .owl-prev,
	.sys-page .sys-block-media .testimonial-carousel .owl-nav .owl-next{ width:38px; height:38px; font-size:var(--fs-md); }
}

/* 카테고리 배지 */
.sys-page .sys-cat{
	display:inline-flex; align-items:center; gap:7px;
	font-weight:700; font-size:var(--fs-xs); letter-spacing:0.04em; text-transform:uppercase;
	padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.sys-page .sys-cat::before{ content:""; width:7px; height:7px; border-radius:50%; }
.sys-page .sys-cat--appliance{ color:var(--sys-appliance); background:rgba(0,102,255,0.10); }
.sys-page .sys-cat--appliance::before{ background:var(--sys-appliance); }
.sys-page .sys-cat--software{ color:var(--sys-software); background:rgba(122,92,255,0.12); }
.sys-page .sys-cat--software::before{ background:var(--sys-software); }
/* [2026-08-11] Option(선택 도입) 배지 — Seetrol IO 용. 초록 계열로
   Appliance(파랑)·Software(보라)와 구분합니다. */
.sys-page .sys-cat--option{ color:#0f9d6e; background:rgba(15,157,110,0.12); }
.sys-page .sys-cat--option::before{ background:#0f9d6e; }

.sys-page .sys-name{ color:var(--sys-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 10px; }
.sys-page .sys-tagline{ color:var(--sys-primary); font-weight:600; font-size:var(--fs-md); line-height:1.6; margin:0 0 18px; }
.sys-page .sys-desc{ color:var(--sys-body); font-size:var(--fs-base); line-height:1.85; margin:0 0 20px; text-align:justify; word-break:keep-all; }

/* 기능 리스트(체크) */
.sys-page .sys-features{ list-style:none; padding:0; margin:0 0 6px;
	display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }
.sys-page .sys-features li{
	position:relative; padding-left:26px;
	color:var(--sys-ink); font-size:var(--fs-base); line-height:1.5; font-weight:500;
}
.sys-page .sys-features li::before{
	content:"\f00c"; font-family:"Font Awesome 5 Free","FontAwesome"; font-weight:900;
	position:absolute; left:0; top:1px; color:var(--sys-primary); font-size:var(--fs-xs);
}

/* 버튼 */
.sys-page .sys-btn{
	display:inline-flex; align-items:center; gap:9px; margin-top:26px;
	background:linear-gradient(135deg,var(--sys-primary),#3a8bff);
	color:#fff; font-weight:700; font-size:var(--fs-base);
	padding:14px 30px; border-radius:999px;
	box-shadow:0 10px 24px rgba(0,102,255,0.26);
	text-decoration:none; transition:transform .18s ease, box-shadow .18s ease;
}
.sys-page .sys-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,102,255,0.36); color:#fff; }

/* 모달(줌) */
.sys-page-modal{
	position:fixed; inset:0; width:100%; height:100%;
	background-color:rgba(10,14,22,0.9);
	display:none; align-items:center; justify-content:center;
	z-index:1000; overflow:hidden;
}
.sys-page-modal img{
	transition:transform .3s ease; transform-origin:center center;
	max-width:92%; max-height:88%; height:auto; border-radius:8px;
}
.sys-page-modal .close-btn{
	position:absolute; top:22px; right:22px;
	width:46px; height:46px; border-radius:50%;
	background:#fff; border:none; cursor:pointer;
	font-size:22px; line-height:1; color:#1a1d24;
	display:flex; align-items:center; justify-content:center;
	box-shadow:0 6px 18px rgba(0,0,0,0.25); z-index:1001;
}
.sys-page-modal .close-btn:hover{ background:#f0f2f5; }

@media (max-width:991px){
	.sys-page .sys-section{ padding:56px 0; }
	.sys-page .sys-block{ gap:34px; }
	.sys-page .sys-head h2{ font-size:var(--fs-2xl); }
	.sys-page .sys-name{ font-size:var(--fs-2xl); }
	.sys-page .sys-charts{ gap:26px; }
	.sys-page .sys-chart-head{ padding:16px 20px; }
	.sys-page .sys-chart-title{ font-size:var(--fs-md); }
	.sys-page .sys-chart-body{ padding:18px 20px 22px; }
}
@media (max-width:575px){
	.sys-page .sys-features{ grid-template-columns:1fr; }
}

/* ==================================================================
   [페이지 전용] 활용사례
   스코프 .uc-page
   대상 : casestudy.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 144줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
/* ============================================================
   Seetrol 활용사례 : 통일 디자인 시스템 (scoped: .uc-page)
   연혁·리뷰·시스템구성도·가격비교 페이지와 동일 토큰
============================================================ */
.uc-page{
	--uc-primary:var(--pg-primary);
	--uc-primary-dark:var(--pg-primary-dark);
	--uc-ink:var(--pg-ink);
	--uc-body:var(--pg-body);
	--uc-muted:var(--pg-muted);
	--uc-line:var(--pg-line);
	--uc-radius:var(--pg-radius);
	--uc-shadow:var(--pg-shadow);
	--uc-shadow-sm:var(--pg-shadow-sm);
}

.uc-page .uc-section{ padding:80px 0; }
.uc-page .uc-section--tint{ background:#f5f7fb; }

/* 헤더 */
.uc-page .uc-head{ text-align:center; max-width:740px; margin:0 auto 46px; }
.uc-page .uc-eyebrow{
	display:inline-block; color:var(--uc-primary);
	font-weight:700; letter-spacing:0.04em;
	font-size:var(--fs-lg); margin-bottom:14px;
}
.uc-page .uc-head h2{ color:var(--uc-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 16px; line-height:1.35; }
.uc-page .uc-head p{ color:var(--uc-body); font-size:var(--fs-base); line-height:1.8; margin:0; }

/* 지그재그 블록 */
.uc-page .uc-block{ display:flex; flex-wrap:wrap; align-items:center; gap:56px; }
.uc-page .uc-block--reverse{ flex-direction:row-reverse; }
.uc-page .uc-block-media{ flex:1 1 440px; min-width:300px; }
.uc-page .uc-block-body{ flex:1 1 420px; min-width:300px; }
.uc-page .uc-block-media > img{ width:100%; border-radius:var(--uc-radius); box-shadow:var(--uc-shadow); display:block; }

.uc-page .uc-cat{
	display:inline-flex; align-items:center; gap:7px;
	color:var(--uc-primary); background:rgba(0,102,255,0.10);
	font-weight:700; font-size:var(--fs-xs); letter-spacing:0.03em;
	padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.uc-page .uc-name{ color:var(--uc-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 14px; line-height:1.3; }
.uc-page .uc-lead{ color:var(--uc-body); font-size:var(--fs-base); line-height:1.85; margin:0; text-align:justify; word-break:keep-all; }

/* 포인트 카드 */
.uc-page .uc-points{ margin-top:24px; display:grid; gap:16px; }
.uc-page .uc-point{
	background:#fff; border:1px solid var(--uc-line); border-radius:14px;
	box-shadow:var(--uc-shadow-sm); padding:20px 22px;
}
.uc-page .uc-point h5{
	display:flex; align-items:flex-start; gap:10px;
	color:var(--uc-ink); font-weight:700; font-size:var(--fs-md); margin:0 0 8px; line-height:1.4;
}
.uc-page .uc-point h5 i{ color:var(--uc-primary); font-size:var(--fs-base); margin-top:4px; flex:0 0 auto; }
/* [2026-08-07] Font Awesome 에는 VPN 아이콘이 없습니다.
   그 자리에는 Material Symbols(Apache 2.0) SVG 를 직접 넣어 씁니다.
   글꼴을 따로 불러오지 않도록 SVG 를 본문에 그대로 적어두었습니다.
   위 h5 i 와 색·크기·정렬을 맞춥니다. */
.uc-page .uc-point h5 .uc-svgi{
	flex:0 0 auto; margin-top:4px;
	width:1.05em; height:1.05em; font-size:var(--fs-base);
	fill:var(--uc-primary);
}
.uc-page .uc-point p{ color:var(--uc-body); font-size:var(--fs-base); line-height:1.75; margin:0; text-align:justify; word-break:keep-all; }
/* [2026-08-10] "Seetrol IO 를 연동한 기기 켜기" 카드 안의 소개 링크 버튼 */
.uc-page .uc-point .uc-io-btn{
	display:inline-flex; align-items:center; gap:8px; margin-top:14px;
	color:var(--uc-primary); font-weight:700; font-size:var(--fs-xs); text-decoration:none;
	padding:9px 16px; border:1px solid rgba(0,102,255,0.28); border-radius:999px;
	transition:background .16s ease;
}
.uc-page .uc-point .uc-io-btn:hover{ background:rgba(0,102,255,0.06); color:var(--uc-primary); }
.uc-page .uc-point .uc-io-btn i{ font-size:var(--fs-2xs); }

/* 업종 아이콘 카드 */
.uc-page .uc-industries{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.uc-page .uc-ind{
	background:#fff; border:1px solid var(--uc-line); border-radius:var(--uc-radius);
	box-shadow:var(--uc-shadow-sm); padding:34px 20px; text-align:center;
	transition:transform .2s ease, box-shadow .2s ease;
}
.uc-page .uc-ind:hover{ transform:translateY(-5px); box-shadow:var(--uc-shadow); }
.uc-page .uc-ind-icon{
	width:66px; height:66px; margin:0 auto 16px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:rgba(0,102,255,0.10); color:var(--uc-primary); font-size:var(--fs-2xl);
}
.uc-page .uc-ind-name{ color:var(--uc-ink); font-weight:700; font-size:var(--fs-md); margin:0; }

/* 멀티뷰 그리드 시각화 */
.uc-page .uc-mv{ display:flex; flex-wrap:wrap; gap:26px; margin-top:6px; }
.uc-page .uc-mv-card{
	flex:1 1 200px; background:#fff; border:1px solid var(--uc-line);
	border-radius:var(--uc-radius); box-shadow:var(--uc-shadow-sm); padding:24px; text-align:center;
}
.uc-page .uc-mv-card.is-premium{ border:2px solid var(--uc-primary); box-shadow:0 14px 34px rgba(0,102,255,0.16); }
.uc-page .uc-mv-grid{ display:grid; gap:3px; margin:0 auto 16px; width:132px; }
.uc-page .uc-mv-grid.g3{ grid-template-columns:repeat(3,1fr); }
.uc-page .uc-mv-grid.g8{ grid-template-columns:repeat(8,1fr); }
.uc-page .uc-mv-grid span{ aspect-ratio:4/3; border-radius:2px; background:rgba(0,102,255,0.16); }
.uc-page .uc-mv-grid.g8 span{ border-radius:1px; }
.uc-page .uc-mv-num{ color:var(--uc-ink); font-weight:800; font-size:var(--fs-xl); line-height:1; }
.uc-page .uc-mv-num span{ font-size:var(--fs-base); font-weight:700; color:var(--uc-muted); }
.uc-page .uc-mv-label{ margin-top:6px; font-weight:600; font-size:var(--fs-base); }
.uc-page .uc-mv-card.is-premium .uc-mv-label{ color:var(--uc-primary); }
.uc-page .uc-mv-card:not(.is-premium) .uc-mv-label{ color:var(--uc-muted); }

/* 영상(라이트박스) */
.uc-page .uc-video{ position:relative; border-radius:var(--uc-radius); overflow:hidden; box-shadow:var(--uc-shadow); }
.uc-page .uc-video img{ width:100%; display:block; }
.uc-page .uc-play{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:76px; height:76px; border-radius:50%;
	background:rgba(0,102,255,0.92); color:#fff;
	display:flex; align-items:center; justify-content:center; font-size:var(--fs-xl);
	box-shadow:0 8px 24px rgba(0,102,255,0.45); text-decoration:none;
	transition:transform .2s ease, background .2s ease;
}
.uc-page .uc-play::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(255,255,255,0.5); animation:ucpulse 2s infinite; }
.uc-page .uc-play:hover{ transform:translate(-50%,-50%) scale(1.08); background:var(--uc-primary); color:#fff; }
@keyframes ucpulse{ 0%{ transform:scale(1); opacity:0.8; } 100%{ transform:scale(1.35); opacity:0; } }

/* 강조 배지(64 Multi View) */
.uc-page .uc-badge-float{
	position:absolute; top:18px; left:18px; z-index:2;
	background:var(--uc-primary); color:#fff; border-radius:12px;
	padding:10px 16px; font-weight:700; font-size:var(--fs-base); line-height:1.3;
	box-shadow:0 8px 20px rgba(0,102,255,0.35);
}
.uc-page .uc-badge-float strong{ display:block; font-size:var(--fs-lg); }

/* 플로팅 CTA (스크롤 내내 노출, 챗봇 버튼과 겹치지 않게 우측 세로 중앙) */
.uc-float{
	position:fixed; right:26px; top:50%; bottom:auto;
	transform:translateY(-50%) translateX(120px); z-index:9990;
	display:inline-flex; align-items:center; gap:10px;
	background:linear-gradient(135deg,#0066ff,#3a8bff);
	color:#fff; font-weight:700; font-size:var(--fs-base);
	padding:15px 26px; border-radius:999px;
	box-shadow:0 12px 30px rgba(0,102,255,0.40);
	text-decoration:none; opacity:0; pointer-events:none;
	transition:transform .35s ease, opacity .35s ease, box-shadow .18s ease;
}
.uc-float.is-visible{ transform:translateY(-50%) translateX(0); opacity:1; pointer-events:auto; }
.uc-float:hover{ color:#fff; box-shadow:0 16px 38px rgba(0,102,255,0.5); }
.uc-float i{ font-size:var(--fs-base); }

@media (max-width:991px){
	.uc-page .uc-section{ padding:56px 0; }
	.uc-page .uc-block{ gap:34px; }
	.uc-page .uc-head h2{ font-size:var(--fs-2xl); }
	.uc-page .uc-name{ font-size:var(--fs-xl); }
	.uc-page .uc-industries{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
	.uc-float{ right:16px; top:40%; padding:13px 22px; font-size:var(--fs-base); }
}
@media (max-width:479px){
	.uc-page .uc-industries{ grid-template-columns:1fr; }
}

/* ==================================================================
   [페이지 전용] 동작원리
   스코프 .hiw-page
   대상 : howitworks.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 114줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
/* ============================================================
   Seetrol 동작 원리 : 통일 디자인 (scoped: .hiw-page)
============================================================ */
.hiw-page{
	--hiw-primary:var(--pg-primary);
	--hiw-primary-dark:var(--pg-primary-dark);
	--hiw-green:#16a34a;
	--hiw-ink:var(--pg-ink);
	--hiw-body:var(--pg-body);
	--hiw-muted:var(--pg-muted);
	--hiw-line:var(--pg-line);
	--hiw-radius:var(--pg-radius);
	--hiw-shadow:var(--pg-shadow);
	--hiw-shadow-sm:var(--pg-shadow-sm);
}

.hiw-page .hiw-section{ padding:80px 0; }
.hiw-page .hiw-section--tint{ background:#f5f7fb; }

/* 헤더 */
.hiw-page .hiw-head{ text-align:center; max-width:820px; margin:0 auto 44px; }
.hiw-page .hiw-eyebrow{ display:inline-block; color:var(--hiw-primary); font-weight:700; letter-spacing:0.04em; font-size:var(--fs-lg); margin-bottom:14px; }
.hiw-page .hiw-head h2{ color:var(--hiw-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 16px; line-height:1.4; }
.hiw-page .hiw-head p{ color:var(--hiw-body); font-size:var(--fs-base); line-height:1.85; margin:0; word-break:keep-all; }

/* 강조 콜아웃 */
.hiw-page .hiw-note{
	max-width:900px; margin:0 auto; padding:22px 26px;
	background:rgba(0,102,255,0.06); border-left:4px solid var(--hiw-primary);
	border-radius:10px; color:var(--hiw-body); font-size:var(--fs-base); line-height:1.85; word-break:keep-all;
}
.hiw-page .hiw-note strong{ color:var(--hiw-primary-dark); }

/* 2단 카드(문제/해결 등) */
.hiw-page .hiw-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.hiw-page .hiw-card{
	background:#fff; border:1px solid var(--hiw-line); border-radius:var(--hiw-radius);
	box-shadow:var(--hiw-shadow-sm); overflow:hidden;
	transition:transform .2s ease, box-shadow .2s ease;
}
.hiw-page .hiw-card:hover{ transform:translateY(-4px); box-shadow:var(--hiw-shadow); }
.hiw-page .hiw-card-head{ padding:26px 28px 20px; border-bottom:1px solid var(--hiw-line); }
.hiw-page .hiw-card-head.is-warn{ background:linear-gradient(135deg,#fff5f4,#fff); }
.hiw-page .hiw-card-head.is-good{ background:linear-gradient(135deg,#eff6ff,#fff); }
.hiw-page .hiw-card-head h3{ color:var(--hiw-ink); font-weight:800; font-size:var(--fs-xl); margin:0 0 4px; }
.hiw-page .hiw-card-head span{ color:var(--hiw-muted); font-size:var(--fs-base); font-weight:600; }

.hiw-page .hiw-list{ list-style:none; margin:0; padding:22px 28px 28px; }
.hiw-page .hiw-list li{ position:relative; padding-left:26px; margin-bottom:14px; color:var(--hiw-body); font-size:var(--fs-base); line-height:1.75; text-align:justify; word-break:keep-all; }
.hiw-page .hiw-list li:last-child{ margin-bottom:0; }
.hiw-page .hiw-list li::before{
	content:"\f00c"; font-family:"Font Awesome 5 Free","FontAwesome"; font-weight:900;
	position:absolute; left:0; top:3px; color:var(--hiw-primary); font-size:var(--fs-xs);
}
.hiw-page .hiw-list.is-warn li::before{ content:"\f071"; color:#e0524d; }
.hiw-page .hiw-list li strong{ color:var(--hiw-ink); }

/* 다이어그램 */
.hiw-page .hiw-diagram{
	max-width:980px; margin:0 auto; background:#fff; border:1px solid var(--hiw-line);
	border-radius:var(--hiw-radius); box-shadow:var(--hiw-shadow-sm); padding:26px;
}
.hiw-page .hiw-diagram svg{ width:100%; height:auto; display:block; }
.hiw-page .hiw-diagram-cap{ text-align:center; color:var(--hiw-muted); font-size:var(--fs-base); margin-top:14px; line-height:1.6; word-break:keep-all; }

/* 단계 카드 */
.hiw-page .hiw-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.hiw-page .hiw-step{
	background:#fff; border:1px solid var(--hiw-line); border-radius:var(--hiw-radius);
	box-shadow:var(--hiw-shadow-sm); padding:30px 26px;
	transition:transform .2s ease, box-shadow .2s ease;
}
.hiw-page .hiw-step:hover{ transform:translateY(-4px); box-shadow:var(--hiw-shadow); }
.hiw-page .hiw-step-num{
	display:inline-flex; align-items:center; justify-content:center;
	width:48px; height:48px; border-radius:12px; margin-bottom:16px;
	background:linear-gradient(135deg,var(--hiw-primary),#3a8bff); color:#fff; font-weight:800; font-size:var(--fs-lg);
	box-shadow:0 8px 20px rgba(0,102,255,0.28);
}
.hiw-page .hiw-step h4{ color:var(--hiw-ink); font-weight:800; font-size:var(--fs-lg); margin:0 0 12px; }
.hiw-page .hiw-step p{ color:var(--hiw-body); font-size:var(--fs-base); line-height:1.75; margin:0 0 12px; text-align:justify; word-break:keep-all; }
.hiw-page .hiw-step p:last-child{ margin-bottom:0; }
.hiw-page .hiw-step strong{ color:var(--hiw-ink); }
.hiw-page .hiw-tag{ display:inline-block; font-size:var(--fs-2xs); font-weight:700; padding:3px 10px; border-radius:999px; background:rgba(0,102,255,0.10); color:var(--hiw-primary); }

/* 흐름 표 */
.hiw-page .hiw-flow{
	width:100%; max-width:980px; margin:36px auto 0; border-collapse:collapse;
	background:#fff; border:1px solid var(--hiw-line); border-radius:var(--hiw-radius); overflow:hidden;
	box-shadow:var(--hiw-shadow-sm); font-size:var(--fs-base);
}
.hiw-page .hiw-flow th, .hiw-page .hiw-flow td{ border-bottom:1px solid var(--hiw-line); padding:15px 18px; vertical-align:top; text-align:left; word-break:keep-all; }
.hiw-page .hiw-flow thead th{ background:#0b1b3a; color:#fff; font-weight:700; }
.hiw-page .hiw-flow td:first-child{ white-space:nowrap; font-weight:700; color:var(--hiw-primary); width:1%; }
.hiw-page .hiw-flow tbody tr:nth-child(even) td{ background:#f9fafc; }
.hiw-page .hiw-flow tr:last-child td{ border-bottom:none; }

/* 장점 리스트(넓은 카드) */
.hiw-page .hiw-adv{
	background:#fff; border:1px solid var(--hiw-line); border-radius:var(--hiw-radius);
	box-shadow:var(--hiw-shadow-sm); padding:34px 40px;
	display:grid; grid-template-columns:1fr 1fr; gap:16px 40px;
}
.hiw-page .hiw-adv li{ list-style:none; position:relative; padding-left:28px; color:var(--hiw-body); font-size:var(--fs-base); line-height:1.75; word-break:keep-all; }
.hiw-page .hiw-adv li::before{ content:"\f058"; font-family:"Font Awesome 5 Free","FontAwesome"; font-weight:900; position:absolute; left:0; top:2px; color:var(--hiw-primary); }
.hiw-page .hiw-adv li strong{ color:var(--hiw-ink); }

@media (max-width:991px){
	.hiw-page .hiw-section{ padding:56px 0; }
	.hiw-page .hiw-head h2{ font-size:var(--fs-2xl); }
	.hiw-page .hiw-grid2{ grid-template-columns:1fr; }
	.hiw-page .hiw-steps{ grid-template-columns:1fr; }
	.hiw-page .hiw-adv{ grid-template-columns:1fr; padding:26px; }
}

/* ==================================================================
   [페이지 전용] 비교불가 가성비
   스코프 .pc-page
   대상 : costcomparison.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 559줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
/* ============================================================
   Seetrol 가격비교 : 통일 디자인 시스템 (scoped: .pc-page)
   연혁·리뷰·시스템구성도 페이지와 동일 토큰 사용
   ------------------------------------------------------------
   목차
     01. 디자인 토큰
     02. 섹션 / 공통 헤더
     03. 지그재그 블록 + 포인트 카드
     04. 장기 사용 고객 섹션
     05. 대형 비용 격차 (막대)
     06. 10년 이용료 비교 카드
     07. 연차별 누적 바
     08. 플로팅 CTA
     09. 반응형
   ============================================================ */

/* ------------------------------------------------------------
   01. 디자인 토큰
   ------------------------------------------------------------ */
.pc-page {
	--pc-primary:var(--pg-primary);
	--pc-primary-dark:var(--pg-primary-dark);
	--pc-warn:         #e0524d;              /* 경쟁사(고비용) 강조 */
	--pc-ink:var(--pg-ink);
	--pc-body:var(--pg-body);
	--pc-muted:var(--pg-muted);
	--pc-line:var(--pg-line);
	--pc-radius:var(--pg-radius);
	--pc-shadow:var(--pg-shadow);
	--pc-shadow-sm:var(--pg-shadow-sm);
}

/* ------------------------------------------------------------
   02. 섹션 / 공통 헤더
   ------------------------------------------------------------ */
.pc-page .pc-section        { padding: 80px 0; }
.pc-page .pc-section--tint  { background: #f5f7fb; }

.pc-page .pc-head {
	text-align: center;
	max-width: 740px;
	margin: 0 auto 46px;
}
.pc-page .pc-eyebrow {
	display: inline-block;
	color: var(--pc-primary);
	font-weight: 700;
	letter-spacing: 0.04em;
	font-size:var(--fs-lg);
	margin-bottom: 14px;
}
.pc-page .pc-head h2 {
	color: var(--pc-ink);
	font-weight: 800;
	font-size:var(--fs-3xl);
	margin: 0 0 16px;
	line-height: 1.35;
}
.pc-page .pc-head p {
	color: var(--pc-body);
	font-size:var(--fs-base);
	line-height: 1.8;
	margin: 0;
}

/* ------------------------------------------------------------
   03. 지그재그 블록 + 포인트 카드
   ------------------------------------------------------------ */
.pc-page .pc-block {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 56px;
}
.pc-page .pc-block--reverse { flex-direction: row-reverse; }

.pc-page .pc-block-media,
.pc-page .pc-block-body {
	flex: 1 1 420px;
	min-width: 300px;
}
.pc-page .pc-block-media img {
	width: 100%;
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow);
	display: block;
}

/* 가장자리가 흐린 이미지(buyvssubc)를 흰 카드 프레임에 넣어 또렷하게 보이도록 */
.pc-page .pc-block-media.pc-media-framed {
	background: #fff;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow);
	padding: 26px;
}
.pc-page .pc-block-media.pc-media-framed img {
	border-radius: 8px;
	box-shadow: none;
	image-rendering: -webkit-optimize-contrast;   /* 축소 시 선명도 보정 */
}

.pc-page .pc-eyebrow-inline {
	color: var(--pc-primary);
	font-weight: 700;
	font-size:var(--fs-base);
	margin-bottom: 10px;
}
.pc-page .pc-title {
	color: var(--pc-ink);
	font-weight: 800;
	font-size:var(--fs-3xl);
	margin: 0 0 14px;
	line-height: 1.3;
}
.pc-page .pc-lead {
	color: var(--pc-body);
	font-size:var(--fs-base);
	line-height: 1.8;
	margin: 0 0 8px;
	text-align: justify;
	word-break: keep-all;
}

.pc-page .pc-points {
	margin-top: 24px;
	display: grid;
	gap: 16px;
}
.pc-page .pc-point {
	background: #fff;
	border: 1px solid var(--pc-line);
	border-radius: 14px;
	box-shadow: var(--pc-shadow-sm);
	padding: 20px 22px;
}
.pc-page .pc-point h5 {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--pc-ink);
	font-weight: 700;
	font-size:var(--fs-md);
	margin: 0 0 8px;
}
.pc-page .pc-point h5 i {
	color: var(--pc-primary);
	font-size:var(--fs-base);
}
.pc-page .pc-point p {
	color: var(--pc-body);
	font-size:var(--fs-base);
	line-height: 1.75;
	margin: 0;
	text-align: justify;
	word-break: keep-all;
}

/* ------------------------------------------------------------
   04. 장기 사용 고객 섹션 (중립 톤)
   ------------------------------------------------------------ */
.pc-page .pc-section--check {
	background: #f5f7fb;
	border-top: 1px solid var(--pc-line);
	border-bottom: 1px solid var(--pc-line);
}
.pc-page .pc-check-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 30px;
}
.pc-page .pc-check-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--pc-line);
	border-radius: 14px;
	box-shadow: var(--pc-shadow-sm);
	padding: 24px 24px 22px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.pc-page .pc-check-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--pc-shadow);
}
.pc-page .pc-check-num {
	display: inline-block;
	background: rgba(0, 102, 255, 0.09);
	color: var(--pc-primary);
	font-weight: 800;
	font-size:var(--fs-2xs);
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 12px;
}
.pc-page .pc-check-card h5 {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--pc-ink);
	font-weight: 700;
	font-size:var(--fs-md);
	margin: 0 0 10px;
	line-height: 1.5;
}
.pc-page .pc-check-card h5 i {
	color: var(--pc-primary);
	font-size:var(--fs-base);
	margin-top: 5px;
	flex: 0 0 auto;
}
.pc-page .pc-check-card p {
	color: var(--pc-body);
	font-size:var(--fs-base);
	line-height: 1.75;
	margin: 0;
	word-break: keep-all;
	text-align: justify;
}
.pc-page .pc-check-card em {
	font-style: normal;
	font-weight: 700;
	color: var(--pc-ink);
}

/* 연도 배지 (2010 → 현재) */
.pc-page .pc-since {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid rgba(0, 102, 255, 0.22);
	border-radius: 999px;
	box-shadow: var(--pc-shadow-sm);
	padding: 12px 26px;
	margin-bottom: 22px;
}
.pc-page .pc-since-year {
	color: var(--pc-primary);
	font-weight: 800;
	font-size:var(--fs-xl);
	line-height: 1;
}
.pc-page .pc-since-arrow {
	color: var(--pc-muted);
	font-size:var(--fs-base);
}
.pc-page .pc-since-now {
	color: var(--pc-ink);
	font-weight: 800;
	font-size:var(--fs-xl);
	line-height: 1;
}
.pc-page .pc-since-cap {
	color: var(--pc-muted);
	font-size:var(--fs-xs);
	font-weight: 600;
	margin-left: 4px;
}

/* 입소문 비율 통계 */
.pc-page .pc-stat {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 860px;
	margin: 34px auto 0;
	background: #fff;
	border: 1px solid rgba(0, 102, 255, 0.22);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
	padding: 26px 32px;
}
.pc-page .pc-stat-num {
	color: var(--pc-primary);
	font-weight: 800;
	font-size:var(--fs-5xl);
	line-height: 1;
	flex: 0 0 auto;
}
.pc-page .pc-stat-body strong {
	display: block;
	color: var(--pc-ink);
	font-weight: 700;
	font-size:var(--fs-base);
	margin-bottom: 4px;
}
.pc-page .pc-stat-body span {
	color: var(--pc-body);
	font-size:var(--fs-base);
	line-height: 1.65;
	word-break: keep-all;
}
.pc-page .pc-stat-body em {
	font-style: normal;
	font-weight: 700;
	color: var(--pc-primary);
}
.pc-page .pc-stat-note {
	max-width: 860px;
	margin: 14px auto 0;
	color: var(--pc-muted);
	font-size:var(--fs-xs);
	line-height: 1.7;
	text-align: center;
	word-break: keep-all;
}

/* ------------------------------------------------------------
   05. 대형 비용 격차 (막대)
   ------------------------------------------------------------ */
.pc-page .pc-gap {
	background: #fff;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow);
	padding: 40px;
	max-width: 960px;
	margin: 0 auto;
}
/* [2026-08-10] 카드 묶음 바로 뒤에 올 때는 사이를 띄웁니다.
   예전에는 이 흰 판이 섹션 맨 위(머리글 다음)에만 놓여서 위 여백이
   필요 없었는데, 비교 카드와 한 섹션으로 합치면서 카드 밑에 딱
   붙어 버렸습니다. */
.pc-page .pc-compare + .pc-gap { margin-top: 40px; }
.pc-page .pc-gap-sub {
	text-align: center;
	color: var(--pc-muted);
	font-size:var(--fs-base);
	margin: 0 0 30px;
}
.pc-page .pc-gap-sub strong { color: var(--pc-ink); }

.pc-page .pc-bar-row { margin-bottom: 26px; }
.pc-page .pc-bar-label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px;
}
.pc-page .pc-bar-name {
	color: var(--pc-ink);
	font-weight: 700;
	font-size:var(--fs-md);
}
.pc-page .pc-bar-name span {
	color: var(--pc-muted);
	font-weight: 500;
	font-size:var(--fs-xs);
	margin-left: 6px;
}
.pc-page .pc-bar-val         { font-weight: 800; font-size:var(--fs-lg); }
.pc-page .pc-bar-val.is-good { color: var(--pc-primary); }
.pc-page .pc-bar-val.is-bad  { color: var(--pc-warn); }

.pc-page .pc-bar-track {
	height: 16px;
	border-radius: 10px;
	background: #eef1f6;
	overflow: hidden;
}
.pc-page .pc-bar-fill         { height: 100%; border-radius: 10px; }
.pc-page .pc-bar-fill.is-good { background: linear-gradient(90deg, var(--pc-primary), #3a8bff); }
.pc-page .pc-bar-fill.is-bad  { background: linear-gradient(90deg, #f0766f, var(--pc-warn)); }

.pc-page .pc-gap-callout {
	text-align: center;
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px dashed var(--pc-line);
	color: var(--pc-body);
	font-size:var(--fs-md);
}
.pc-page .pc-gap-callout strong {
	color: var(--pc-warn);
	font-size:var(--fs-2xl);
	font-weight: 800;
}

/* ------------------------------------------------------------
   06. 10년 이용료 비교 카드
   ------------------------------------------------------------ */
/* [2026-08-10] 아래 막대 판(.pc-gap)과 같은 폭으로 맞췄습니다.
   카드 줄은 auto-container 전체폭(약 1,240px)이고 막대 판은 960px 이라,
   한 섹션으로 합치고 나니 위아래 폭이 계단처럼 어긋나 보였습니다.
   막대 쪽을 늘리는 대신 카드를 좁혔습니다 — 막대는 가로로 길어지면
   길이 차이를 가늠하기 어려워져 960px 로 묶어 둔 것입니다. */
.pc-page .pc-compare {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	max-width: 960px;
	margin: 0 auto;
}
.pc-page .pc-vs-card {
	background: #fff;
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
	padding: 30px 22px;
	text-align: center;
	transition: transform .2s ease, box-shadow .2s ease;
}
.pc-page .pc-vs-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--pc-shadow);
}
.pc-page .pc-vs-card.is-featured {
	border: 2px solid var(--pc-primary);
	box-shadow: 0 16px 40px rgba(0, 102, 255, 0.18);
}
.pc-page .pc-vs-media {
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.pc-page .pc-vs-media img,
.pc-page .pc-vs-media object {
	max-height: 72px;
	max-width: 100%;
}
.pc-page .pc-vs-name {
	color: var(--pc-ink);
	font-weight: 800;
	font-size:var(--fs-lg);
	margin: 0 0 4px;
}
.pc-page .pc-vs-type {
	font-size:var(--fs-xs);
	font-weight: 600;
	margin-bottom: 14px;
}
.pc-page .pc-vs-card.is-featured .pc-vs-type      { color: var(--pc-primary); }
.pc-page .pc-vs-card:not(.is-featured) .pc-vs-type { color: var(--pc-muted); }

.pc-page .pc-vs-price {
	font-weight: 800;
	font-size:var(--fs-xl);
	line-height: 1.3;
}
.pc-page .pc-vs-card.is-featured .pc-vs-price       { color: var(--pc-primary); }
.pc-page .pc-vs-card:not(.is-featured) .pc-vs-price { color: var(--pc-warn); }

.pc-page .pc-vs-price small {
	display: block;
	color: var(--pc-muted);
	font-weight: 600;
	font-size:var(--fs-2xs);
	margin-top: 4px;
}
.pc-page .pc-note {
	text-align: center;
	color: var(--pc-muted);
	font-size:var(--fs-xs);
	margin-top: 22px;
}

/* ------------------------------------------------------------
   07. 연차별 누적 바
   ------------------------------------------------------------ */
.pc-page .pc-years { display: grid; gap: 18px; }

.pc-page .pc-year-row .pc-year-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
}
.pc-page .pc-year-label {
	color: var(--pc-ink);
	font-weight: 700;
	font-size:var(--fs-base);
}
.pc-page .pc-year-val {
	color: var(--pc-warn);
	font-weight: 800;
	font-size:var(--fs-base);
}
.pc-page .pc-year-track {
	height: 12px;
	border-radius: 8px;
	background: #eef1f6;
	overflow: hidden;
}
.pc-page .pc-year-fill {
	height: 100%;
	border-radius: 8px;
	background: linear-gradient(90deg, #f0766f, var(--pc-warn));
}
.pc-page .pc-flatline {
	margin-top: 22px;
	padding: 16px 20px;
	border-radius: 14px;
	background: rgba(0, 102, 255, 0.07);
	border: 1px solid rgba(0, 102, 255, 0.18);
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--pc-ink);
	font-weight: 600;
	font-size:var(--fs-base);
}
.pc-page .pc-flatline i      { color: var(--pc-primary); font-size:var(--fs-lg); }
.pc-page .pc-flatline strong { color: var(--pc-primary); }
/* 연차 막대 아래(흰 판 안)로 들어와 가운데에 놓입니다 */
.pc-page .pc-gap .pc-flatline { justify-content: center; margin-top: 28px; }

/* ------------------------------------------------------------
   07-b. 경쟁사 카드의 아이콘            [2026-08-10]
   원 안에 A·B·C 글자를 그린 그림(letter-*.svg)을 쓰고 있었는데,
   바로 밑의 "A사" 와 같은 말이라 구름으로 바꿨습니다. 구독형은
   남의 서버를 빌려 쓰는 방식이어서, 왼쪽 Seetrol 칸의 장비 사진과
   나란히 놓이면 "내 장비 대 남의 서버" 가 그림으로 읽힙니다.
   ------------------------------------------------------------ */
/* 색은 예전 letter-*.svg 가 쓰던 청회색 계열을 이어받되 한 단 밝게
   했습니다. 붉은색에 투명도를 걸었더니 분홍빛으로 탁해 보였고,
   바로 아래 금액이 이미 붉은색이라 카드 한 장에 붉은 기가 겹쳤습니다.
   아이콘을 차분하게 두면 시선이 금액으로 갑니다. */
.pc-page .pc-vs-media i {
	font-size: 46px;
	color: #8ea3c0;
}

/* ------------------------------------------------------------
   07-c. 마무리 : 다음 걸음            [2026-08-10]
   예전에는 연차별 그래프에서 페이지가 그대로 끝났습니다.
   ------------------------------------------------------------ */
.pc-page .pc-cta {
	max-width: 820px;
	margin: 34px auto 0;
	text-align: center;
	background: #fff;
	border: 1px dashed rgba(0, 102, 255, 0.35);
	border-radius: var(--pc-radius);
	padding: 32px 28px;
}
.pc-page .pc-cta b {
	display: block;
	color: var(--pc-ink);
	font-weight: 800;
	font-size:var(--fs-lg);
	margin-bottom: 10px;
}
.pc-page .pc-cta p {
	margin: 0 0 22px;
	color: var(--pc-body);
	font-size:var(--fs-base);
	line-height: 1.75;
	word-break: keep-all;
}
.pc-page .pc-cta-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.pc-page .pc-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--pc-primary);
	color: #fff;
	font-weight: 700;
	font-size:var(--fs-base);
	padding: 13px 26px;
	border-radius: 999px;
	text-decoration: none;
}
.pc-page .pc-cta-btn:hover { color: #fff; }
.pc-page .pc-cta-alt {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--pc-body);
	font-weight: 600;
	font-size:var(--fs-xs);
	text-decoration: none;
	padding: 13px 18px;
	border: 1px solid var(--pc-line);
	border-radius: 999px;
	background: #fff;
}
.pc-page .pc-cta-alt:hover { color: var(--pc-primary); border-color: var(--pc-primary); }

/* ------------------------------------------------------------
   08. 플로팅 CTA
   (스크롤 내내 노출, 챗봇 버튼과 겹치지 않게 우측 세로 중앙)
   ------------------------------------------------------------ */
.pc-float {
	position: fixed;
	right: 26px;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%) translateX(120px);
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(135deg, #0066ff, #3a8bff);
	color: #fff;
	font-weight: 700;
	font-size:var(--fs-base);
	padding: 15px 26px;
	border-radius: 999px;
	box-shadow: 0 12px 30px rgba(0, 102, 255, 0.40);
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: transform .35s ease, opacity .35s ease, box-shadow .18s ease;
}
.pc-float.is-visible {
	transform: translateY(-50%) translateX(0);
	opacity: 1;
	pointer-events: auto;
}
.pc-float:hover {
	color: #fff;
	box-shadow: 0 16px 38px rgba(0, 102, 255, 0.5);
}
.pc-float i { font-size:var(--fs-base); }

/* ------------------------------------------------------------
   09. 반응형
   ------------------------------------------------------------ */
@media (max-width: 991px) {
	.pc-page .pc-section    { padding: 56px 0; }
	.pc-page .pc-block      { gap: 34px; }
	.pc-page .pc-head h2    { font-size:var(--fs-2xl); }
	.pc-page .pc-title      { font-size:var(--fs-xl); }
	.pc-page .pc-compare    { grid-template-columns: repeat(2, 1fr); }
	.pc-page .pc-check-grid { grid-template-columns: 1fr; }
	.pc-page .pc-stat       { padding: 24px 22px; }
	.pc-page .pc-gap        { padding: 28px; }
	.pc-page .pc-cta        { padding: 26px 22px; }
	.pc-page .pc-cta-btns   { flex-direction: column; align-items: stretch; }
	.pc-page .pc-cta-btn,
	.pc-page .pc-cta-alt    { justify-content: center; }
}

@media (max-width: 767px) {
	.pc-float { right: 16px; top: 40%; padding: 13px 22px; font-size:var(--fs-base); }
}

@media (max-width: 575px) {
	.pc-page .pc-stat     { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; }
	.pc-page .pc-stat-num { font-size:var(--fs-4xl); }
}

@media (max-width: 479px) {
	.pc-page .pc-compare { grid-template-columns: 1fr; }
}

/* ==================================================================
   [페이지 전용] 주요 납품처
   스코프 .ref-page
   대상 : myreference.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 86줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
/* ============================================================
   Seetrol 주요납품처 : 통일 디자인 (scoped: .ref-page)
   ※ 카드 마크업/클래스는 무한스크롤(myreference-more.php)과
      일치해야 하므로 그대로 두고 CSS로만 스타일을 통일함
============================================================ */
.ref-page{
	--ref-primary:var(--pg-primary);
	--ref-ink:var(--pg-ink);
	--ref-body:var(--pg-body);
	--ref-muted:var(--pg-muted);
	--ref-line:var(--pg-line);
	--ref-radius:16px;
	--ref-shadow:0 12px 30px rgba(16,24,40,0.10);
	--ref-shadow-sm:0 5px 16px rgba(16,24,40,0.06);
	padding:72px 0 90px;
}

/* 클라이언트 항목 세로 간격 10px 추가 */
.ref-page .feature-block_three{
	margin-bottom: 10px;
}

/* 헤더 */
.ref-page .ref-head{ text-align:center; max-width:720px; margin:0 auto 48px; }
.ref-page .ref-eyebrow{
	display:inline-block; color:var(--ref-primary);
	font-weight:700; letter-spacing:0.04em; font-size:var(--fs-lg); margin-bottom:14px;
}
.ref-page .ref-head h2{ color:var(--ref-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 16px; line-height:1.35; }
.ref-page .ref-head p{ color:var(--ref-body); font-size:var(--fs-base); line-height:1.8; margin:0; }

/* 카드 (기존 클래스 재활용) */
.ref-page .feature-block_three-inner{
	background:#fff; border:1px solid var(--ref-line);
	border-radius:var(--ref-radius); box-shadow:var(--ref-shadow-sm);
	padding:28px 22px; text-align:center; height:100%;
	display:flex; flex-direction:column;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ref-page .feature-block_three-inner:hover{
	transform:translateY(-5px); box-shadow:var(--ref-shadow);
	border-color:rgba(0,102,255,0.35);
}
.ref-page .feature-block_three-content{ display:flex; flex-direction:column; height:100%; }

/* 로고: 회색 → hover 시 원색 */
.ref-page .feature-block_three-icon{
	height:88px; display:flex; align-items:center; justify-content:center;
	margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--ref-line);
}
.ref-page .feature-block_three-icon object{
	max-height:72px; max-width:82%; pointer-events:none;
	filter:grayscale(1); opacity:0.72;
	transition:filter .25s ease, opacity .25s ease;
}
.ref-page .feature-block_three-inner:hover .feature-block_three-icon object{
	filter:none; opacity:1;
}

/* 회사명 */
.ref-page .feature-block_three-content h5{
	color:var(--ref-ink); font-weight:700; font-size:var(--fs-md);
	margin:0 0 10px; line-height:1.4; word-break:keep-all;
}
/* 업종 / 날짜 */
.ref-page .feature-block_three-text{
	margin-top:auto; color:var(--ref-muted); font-size:var(--fs-xs); line-height:1.5;
}

/* 상태 표시 */
.ref-page .ref-status{ text-align:center; margin-top:20px; }
.ref-page #loading{
	display:none; color:var(--ref-muted); font-weight:600; font-size:var(--fs-base);
}
.ref-page #loading::before{
	content:""; display:inline-block; width:16px; height:16px; margin-right:8px;
	vertical-align:-3px; border:2px solid rgba(0,102,255,0.25);
	border-top-color:var(--ref-primary); border-radius:50%;
	animation:refspin .7s linear infinite;
}
@keyframes refspin{ to{ transform:rotate(360deg); } }
.ref-page #end-message{
	display:none; color:var(--ref-muted); font-size:var(--fs-base);
}

@media (max-width:991px){ .ref-page{ padding:52px 0 70px; } .ref-page .ref-head h2{ font-size:var(--fs-2xl); } }

/* ==================================================================
   [페이지 전용] 설치방법
   스코프 .ins-page
   대상 : howinstall.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 87줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
/* ============================================================
   Seetrol 설치방법 : 통일 디자인 (scoped: .ins-page)
   영상 lightbox·링크는 그대로 두고 스타일만 통일
============================================================ */
.ins-page{
	--ins-primary:var(--pg-primary);
	--ins-ink:var(--pg-ink);
	--ins-body:var(--pg-body);
	--ins-muted:var(--pg-muted);
	--ins-line:var(--pg-line);
	--ins-radius:16px;
	--ins-shadow:0 12px 32px rgba(16,24,40,0.10);
	--ins-shadow-sm:var(--pg-shadow-sm);
}
.ins-page .ins-section{ padding:80px 0; }
.ins-page .ins-section--tint{ background:#f5f7fb; }

/* 헤더 */
.ins-page .ins-head{ text-align:center; max-width:760px; margin:0 auto 46px; }
.ins-page .ins-eyebrow{ display:inline-block; color:var(--ins-primary); font-weight:700; letter-spacing:0.04em; font-size:var(--fs-lg); margin-bottom:14px; }
.ins-page .ins-head h2{ color:var(--ins-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 16px; line-height:1.4; }
.ins-page .ins-head p{ color:var(--ins-body); font-size:var(--fs-base); line-height:1.8; margin:0; }

/* 역할 소개 2카드 */
.ins-page .ins-roles{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.ins-page .ins-role{
	background:#fff; border:1px solid var(--ins-line); border-radius:var(--ins-radius);
	box-shadow:var(--ins-shadow-sm); padding:32px; display:flex; gap:20px; align-items:flex-start;
}
.ins-page .ins-role-ico{
	flex:0 0 auto; width:60px; height:60px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(0,102,255,0.10); color:var(--ins-primary); font-size:var(--fs-xl);
}
.ins-page .ins-role h4{ color:var(--ins-ink); font-weight:800; font-size:var(--fs-lg); margin:0 0 4px; }
.ins-page .ins-role .ins-role-tag{ color:var(--ins-primary); font-weight:600; font-size:var(--fs-xs); display:block; margin-bottom:10px; }
.ins-page .ins-role p{ color:var(--ins-body); font-size:var(--fs-base); line-height:1.75; margin:0; word-break:keep-all; }

/* OS 영상 카드 그리드 */
.ins-page .ins-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ins-page .ins-card{
	background:#fff; border:1px solid var(--ins-line); border-radius:var(--ins-radius);
	box-shadow:var(--ins-shadow-sm); overflow:hidden;
	transition:transform .2s ease, box-shadow .2s ease;
}
.ins-page .ins-card:hover{ transform:translateY(-5px); box-shadow:var(--ins-shadow); }
.ins-page .ins-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#0b1b3a; }
.ins-page .ins-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.ins-page .ins-card:hover .ins-thumb img{ transform:scale(1.05); }
.ins-page .ins-play{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	width:60px; height:60px; border-radius:50%;
	background:rgba(0,102,255,0.92); color:#fff;
	display:flex; align-items:center; justify-content:center; font-size:var(--fs-lg);
	box-shadow:0 8px 22px rgba(0,102,255,0.45); text-decoration:none; z-index:2;
	transition:transform .2s ease, background .2s ease;
}
.ins-page .ins-play::before{ content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(255,255,255,0.5); animation:inspulse 2s infinite; }
.ins-page .ins-card:hover .ins-play{ transform:translate(-50%,-50%) scale(1.1); background:var(--ins-primary); }
@keyframes inspulse{ 0%{ transform:scale(1); opacity:0.8; } 100%{ transform:scale(1.3); opacity:0; } }

/* 준비중 */
.ins-page .ins-card.is-soon .ins-thumb img{ filter:grayscale(1) brightness(0.7); }
.ins-page .ins-soon{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	background:rgba(255,255,255,0.92); color:var(--ins-muted);
	font-weight:700; font-size:var(--fs-base); padding:8px 18px; border-radius:999px;
}

/* OS 라벨 */
.ins-page .ins-os{
	display:flex; align-items:center; justify-content:center; gap:9px;
	padding:16px 10px; color:var(--ins-ink); font-weight:700; font-size:var(--fs-md);
}
.ins-page .ins-os i{ color:var(--ins-primary); font-size:var(--fs-lg); }
.ins-page .ins-card.is-soon .ins-os{ color:var(--ins-muted); }
.ins-page .ins-card.is-soon .ins-os i{ color:var(--ins-muted); }

@media (max-width:991px){
	.ins-page .ins-section{ padding:56px 0; }
	.ins-page .ins-head h2{ font-size:var(--fs-xl); }
	.ins-page .ins-roles{ grid-template-columns:1fr; }
	.ins-page .ins-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:479px){
	.ins-page .ins-grid{ grid-template-columns:1fr; }
}

/* ==================================================================
   [페이지 전용] 설치용 웹
   스코프 .ez-page
   대상 : ezinstall.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 84줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
/* ============================================================
   Seetrol 설치용 웹서비스 : 통일 디자인 (scoped: .ez-page)
============================================================ */
.ez-page{
	--ez-primary:var(--pg-primary);
	--ez-ink:var(--pg-ink);
	--ez-body:var(--pg-body);
	--ez-muted:var(--pg-muted);
	--ez-line:var(--pg-line);
	--ez-radius:var(--pg-radius);
	--ez-shadow:var(--pg-shadow);
	--ez-shadow-sm:var(--pg-shadow-sm);
}
.ez-page .ez-section{ padding:80px 0; }
.ez-page .ez-section--tint{ background:#f5f7fb; }

/* 헤더 */
.ez-page .ez-head{ text-align:center; max-width:820px; margin:0 auto 46px; }
.ez-page .ez-eyebrow{ display:inline-block; color:var(--ez-primary); font-weight:700; letter-spacing:0.04em; font-size:var(--fs-lg); margin-bottom:14px; }
.ez-page .ez-head h2{ color:var(--ez-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 16px; line-height:1.4; }
.ez-page .ez-head p{ color:var(--ez-body); font-size:var(--fs-base); line-height:1.8; margin:0; word-break:keep-all; }

/* 방법 블록 (지그재그) */
.ez-page .ez-method{ display:flex; flex-wrap:wrap; align-items:center; gap:50px; }
.ez-page .ez-method + .ez-method{ margin-top:36px; }
.ez-page .ez-method--reverse{ flex-direction:row-reverse; }
.ez-page .ez-method-media{ flex:1 1 320px; min-width:260px; }
.ez-page .ez-method-media img{ width:100%; border-radius:var(--ez-radius); box-shadow:var(--ez-shadow); display:block; }
.ez-page .ez-method-body{ flex:1 1 460px; min-width:300px; }

.ez-page .ez-step{
	display:inline-flex; align-items:center; justify-content:center;
	width:48px; height:48px; border-radius:12px; margin-bottom:14px;
	background:linear-gradient(135deg,var(--ez-primary),#3a8bff);
	color:#fff; font-weight:800; font-size:var(--fs-lg);
	box-shadow:0 8px 20px rgba(0,102,255,0.28);
}
.ez-page .ez-method-body h3{ color:var(--ez-ink); font-weight:800; font-size:var(--fs-xl); margin:0 0 16px; line-height:1.35; }
.ez-page .ez-method-body h3 a{ color:var(--ez-primary); text-decoration:none; }
.ez-page .ez-method-body h3 a:hover{ text-decoration:underline; }

/* 리스트 (체크) */
.ez-page .ez-list{ list-style:none; padding:0; margin:0; }
.ez-page .ez-list li{
	position:relative; padding-left:28px; margin-bottom:12px;
	color:var(--ez-body); font-size:var(--fs-base); line-height:1.75; text-align:justify; word-break:keep-all;
}
.ez-page .ez-list li:last-child{ margin-bottom:0; }
.ez-page .ez-list li::before{
	content:"\f00c"; font-family:"Font Awesome 5 Free","FontAwesome"; font-weight:900;
	position:absolute; left:0; top:3px; color:var(--ez-primary); font-size:var(--fs-xs);
}

/* 순서 리스트 (번호) */
.ez-page .ez-steps{ list-style:none; counter-reset:ez; padding:0; margin:0 0 16px; }
.ez-page .ez-steps li{
	position:relative; padding-left:38px; margin-bottom:12px; counter-increment:ez;
	color:var(--ez-body); font-size:var(--fs-base); line-height:1.75; text-align:justify; word-break:keep-all;
}
.ez-page .ez-steps li::before{
	content:counter(ez); position:absolute; left:0; top:1px;
	width:24px; height:24px; border-radius:50%;
	background:rgba(0,102,255,0.12); color:var(--ez-primary);
	font-weight:800; font-size:var(--fs-xs); display:flex; align-items:center; justify-content:center;
}
.ez-page code{
	background:rgba(0,102,255,0.08); color:var(--ez-primary);
	padding:2px 7px; border-radius:6px; font-size:0.92em; word-break:break-all;
}

/* 참고 노트 */
.ez-page .ez-note{
	margin-top:18px; padding:16px 20px; border-radius:12px;
	background:rgba(0,102,255,0.06); border:1px solid rgba(0,102,255,0.16);
	display:flex; align-items:flex-start; gap:11px;
	color:var(--ez-ink); font-size:var(--fs-base); line-height:1.7; word-break:keep-all;
}
.ez-page .ez-note i{ color:var(--ez-primary); font-size:var(--fs-md); margin-top:3px; flex:0 0 auto; }

@media (max-width:991px){
	.ez-page .ez-section{ padding:56px 0; }
	.ez-page .ez-method{ gap:30px; }
	.ez-page .ez-head h2{ font-size:var(--fs-xl); }
}

/* ==================================================================
   [페이지 전용] 무료체험 안내
   스코프 .tn-page
   대상 : demo/trial_notice.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 289줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
/* ========================================================
   무료체험 안내 (scoped: .tn-page)
   ※ 테마 폰트 크기를 물려받도록 em 만 씁니다.
======================================================== */
.tn-page {
	--tn-primary:var(--pg-primary);
	--tn-ink:var(--pg-ink);
	--tn-body:var(--pg-body);
	--tn-muted: #8b93a1;
	--tn-line: #e4e8ef;
}

/* ── 접속 정보 카드 ── */
.tn-cred {
	max-width: 940px;
	margin: 34px auto 0;
	background: #fff;
	border: 1px solid var(--tn-line);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(16, 24, 40, 0.07);
	padding: 26px 28px 24px;
	text-align: left;
}

.tn-cred-head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 6px;
	color: var(--tn-ink);
	font-weight: 800;
	font-size: 1.05em;
}

.tn-cred-head i {
	color: var(--tn-primary);
	font-size: 0.95em;
}

.tn-cred-desc {
	margin: 0 0 18px;
	color: var(--tn-muted);
	font-size: 0.92em;
	line-height: 1.7;
	word-break: keep-all;
}

.tn-cred-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.tn-cred-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--tn-line);
	border-radius: 12px;
	background: #f7f9fd;
	min-width: 0;
}

.tn-cred-label {
	flex: 0 0 92px;
	color: var(--tn-muted);
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.tn-cred-value {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--tn-ink);
	font-weight: 700;
	font-size: 0.95em;
	line-height: 1.5;
	word-break: break-all;
}

.tn-cred-value a {
	color: var(--tn-primary);
	text-decoration: none;
}

.tn-cred-value a:hover {
	text-decoration: underline;
}

.tn-copy {
	flex: 0 0 auto;
	border: 1px solid var(--tn-line);
	background: #fff;
	color: var(--tn-muted);
	border-radius: 9px;
	width: 34px;
	height: 34px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.tn-copy:hover {
	border-color: var(--tn-primary);
	color: var(--tn-primary);
	background: #f2f7ff;
}

.tn-copy.is-done {
	border-color: #0f9d6e;
	color: #0f9d6e;
	background: #eefaf5;
}

.tn-cred-note {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px dashed var(--tn-line);
	color: var(--tn-body);
	font-size: 0.88em;
	line-height: 1.75;
	word-break: keep-all;
}

.tn-cred-note i {
	color: var(--tn-primary);
	margin-right: 6px;
}

/* 정보가 없을 때 */
.tn-cred.is-empty {
	text-align: center;
	border-color: #f0d9d9;
	background: #fff8f8;
}

.tn-cred.is-empty .tn-cred-head {
	justify-content: center;
}

.tn-cred.is-empty .tn-cred-head i {
	color: #d9433f;
}

/* ── 단계 배지 ── */
.tn-page .tn-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	padding: 6px 14px 6px 6px;
	border-radius: 999px;
	background: rgba(0, 102, 255, 0.09);
	color: var(--tn-primary);
	font-size: 0.82em;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.tn-page .tn-badge b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--tn-primary);
	color: #fff;
	font-size: 0.86em;
	font-weight: 800;
}

/* ── 파란 강조 (기존 <font color="blue"> 대체) ── */
.tn-page .tn-hl {
	color: var(--tn-primary);
	font-weight: 700;
}

.tn-page .tn-code {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 6px;
	background: rgba(0, 102, 255, 0.08);
	color: var(--tn-primary);
	font-weight: 700;
	word-break: break-all;
}

/* ── 안내 그림 ── */
.tn-page .finance-two_image img,
.tn-page .finance-three_image img {
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(16, 24, 40, 0.12);
	max-width: 100%;
	height: auto;
}

/* ── 맺음 안내 ── */
.tn-outro {
	max-width: 940px;
	margin: 0 auto;
	padding: 26px 28px;
	border-radius: 16px;
	background: #f5f7fb;
	border: 1px solid var(--tn-line);
	text-align: center;
}

.tn-outro strong {
	display: block;
	margin-bottom: 8px;
	color: var(--tn-ink);
	font-size: 1.02em;
	font-weight: 800;
}

.tn-outro p {
	margin: 0 0 16px;
	color: var(--tn-body);
	font-size: 0.93em;
	line-height: 1.8;
	word-break: keep-all;
}

.tn-outro-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

.tn-outro-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 10px;
	border: 1px solid var(--tn-line);
	background: #fff;
	color: var(--tn-ink);
	font-size: 0.92em;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .16s ease, color .16s ease;
}

.tn-outro-links a:hover {
	border-color: var(--tn-primary);
	color: var(--tn-primary);
	text-decoration: none;
}

.tn-outro-links a.is-primary {
	background: var(--tn-primary);
	border-color: var(--tn-primary);
	color: #fff;
}

.tn-outro-links a.is-primary:hover {
	background: #0047b3;
	border-color: #0047b3;
	color: #fff;
}

@media (max-width: 767px) {
	.tn-cred {
		padding: 22px 18px 20px;
	}

	.tn-cred-grid {
		grid-template-columns: 1fr;
	}

	.tn-cred-item {
		flex-wrap: wrap;
	}

	.tn-cred-label {
		flex: 0 0 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tn-page * {
		transition: none !important;
	}
}

/* ==================================================================
   [페이지 전용] 비밀번호 변경
   스코프 .pw-page
   대상 : member/join_passwd_upd.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 138줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
/* ============================================================
   비밀번호 변경 (scoped: .pw-page)
   ※ form action/method·필드 name·pattern은 기존 그대로 유지
      로그인·회원정보수정 페이지와 동일 디자인 토큰
============================================================ */
.pw-page{
	--pw-primary:var(--pg-primary);
	--pw-success:#12b76a;
	--pw-danger:#e0524d;
	--pw-ink:var(--pg-ink);
	--pw-body:var(--pg-body);
	--pw-muted:#8b93a1;
	--pw-line:#e4e8ef;
	--pw-bg:#f5f7fb;
	--pw-radius:20px;
	background:var(--pw-bg);
	padding:70px 0 95px;
}
.pw-page *{ box-sizing:border-box; }

/* ── 헤더 ── */
.pw-page .pw-head{ text-align:center; max-width:560px; margin:0 auto 32px; }
.pw-page .pw-eyebrow{
	display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
	background:rgba(0,102,255,0.10); color:var(--pw-primary);
	font-weight:700; font-size:var(--fs-base); padding:8px 18px; border-radius:999px;
}
.pw-page .pw-head h2{ color:var(--pw-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 12px; line-height:1.35; }
.pw-page .pw-head p{ color:var(--pw-body); font-size:var(--fs-base); line-height:1.75; margin:0; word-break:keep-all; }

/* ── 카드 ── */
.pw-page .pw-card{
	max-width:560px; margin:0 auto;
	background:#fff; border:1px solid var(--pw-line);
	border-radius:var(--pw-radius);
	box-shadow:0 20px 60px rgba(16,24,40,0.10);
	padding:40px 42px 36px;
}

/* 필드 */
.pw-page .pw-field{ margin-bottom:20px; }
.pw-page .pw-field:last-of-type{ margin-bottom:0; }
.pw-page .pw-label{
	display:block; color:var(--pw-ink);
	font-weight:700; font-size:var(--fs-base); margin:0 0 8px;
}
.pw-page .pw-box{ position:relative; }
.pw-page .pw-box input{
	width:100%; height:52px;
	border:1.5px solid var(--pw-line); border-radius:12px;
	padding:0 48px 0 15px; font-size:var(--fs-base); color:var(--pw-ink);
	background:#fbfcfe; outline:none; box-shadow:none;
	transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.pw-page .pw-box input::placeholder{ color:#b6bdc9; }
.pw-page .pw-box input:focus{
	border-color:var(--pw-primary); background:#fff;
	box-shadow:0 0 0 4px rgba(0,102,255,0.12);
}
.pw-page .pw-box input.is-ok{ border-color:var(--pw-success); }
.pw-page .pw-box input.is-ng{ border-color:var(--pw-danger); }
.pw-page .pw-eye{
	position:absolute; right:6px; top:50%; transform:translateY(-50%);
	width:38px; height:38px; border:0; background:transparent;
	color:var(--pw-muted); cursor:pointer; border-radius:9px;
	display:flex; align-items:center; justify-content:center;
	transition:color .18s ease, background .18s ease;
}
.pw-page .pw-eye:hover{ color:var(--pw-primary); background:rgba(0,102,255,0.07); }

/* 구분선 */
.pw-page .pw-divider{
	display:flex; align-items:center; gap:12px;
	margin:26px 0 22px; color:var(--pw-muted);
	font-size:var(--fs-xs); font-weight:700; letter-spacing:0.04em;
}
.pw-page .pw-divider::before,
.pw-page .pw-divider::after{ content:''; flex:1 1 auto; height:1px; background:var(--pw-line); }

/* 규칙 체크리스트 */
.pw-page .pw-rules{
	list-style:none; margin:12px 0 0; padding:14px 16px;
	background:#f7f9fc; border:1px solid var(--pw-line); border-radius:12px;
	display:grid; gap:8px;
}
.pw-page .pw-rules li{
	display:flex; align-items:center; gap:8px;
	color:var(--pw-muted); font-size:var(--fs-xs); line-height:1.5;
	transition:color .18s ease;
}
.pw-page .pw-rules li i{ font-size:var(--fs-2xs); width:14px; text-align:center; flex:0 0 auto; }
.pw-page .pw-rules li.is-ok{ color:var(--pw-success); font-weight:600; }
.pw-page .pw-rules li.is-ok i{ color:var(--pw-success); }

/* 일치 여부 안내 */
.pw-page .pw-msg{
	display:none; align-items:center; gap:7px;
	margin:9px 0 0; font-size:var(--fs-xs); font-weight:600;
}
.pw-page .pw-msg.show{ display:flex; }
.pw-page .pw-msg.is-ok{ color:var(--pw-success); }
.pw-page .pw-msg.is-ng{ color:var(--pw-danger); }

/* 버튼 */
.pw-page .pw-actions{
	display:flex; gap:12px; margin-top:30px; padding-top:26px;
	border-top:1px solid var(--pw-line);
}
.pw-page .pw-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	height:56px; border:none; cursor:pointer; text-decoration:none;
	font-weight:800; font-size:var(--fs-base); border-radius:12px;
	transition:transform .16s ease, box-shadow .16s ease, background .16s ease, filter .16s ease;
}
.pw-page .pw-btn-primary{
	flex:1 1 auto;
	background:linear-gradient(135deg,var(--pw-primary),#3a8bff); color:#fff;
	box-shadow:0 10px 24px rgba(0,102,255,0.28);
}
.pw-page .pw-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,102,255,0.36); color:#fff; }
.pw-page .pw-btn-primary:active{ transform:translateY(0); filter:brightness(0.96); }
.pw-page .pw-btn-ghost{ flex:0 0 130px; background:#eef1f6; color:var(--pw-body); }
.pw-page .pw-btn-ghost:hover{ background:#e3e7ee; color:var(--pw-body); }

/* 기존 JS 연동용 클래스 (원본 유지) */
.pw-page .fail-check-id{ outline:1px solid #d6a8e9; border-color:#d6a8e9; box-shadow:0 0 10px #d6a8e9; }
.pw-page .success-check-id{ outline:1px solid #198754; border-color:#198754; box-shadow:0 0 10px #198754; }
.pw-page .fail-id-comment{ display:inline-block; color:#dc3545; }
.pw-page .success-id-comment{ display:inline-block; color:#0dcaf0; }
.pw-page .hide-id-comment{ display:none; }

@media (max-width:575px){
	.pw-page{ padding:48px 0 72px; }
	.pw-page .pw-head h2{ font-size:var(--fs-2xl); }
	.pw-page .pw-card{ padding:28px 20px 26px; }
	.pw-page .pw-actions{ flex-direction:column-reverse; }
	.pw-page .pw-btn-ghost{ flex:0 0 50px; height:50px; }
}

/* ==================================================================
   [페이지 전용] 회원정보 수정 완료
   스코프 .rs-page
   대상 : member/result-join-upd.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 108줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
/* ============================================================
   회원정보 수정 완료 : 결과 페이지 (scoped: .rs-page)
   ※ 로그인·무료체험·회원정보수정 페이지와 동일 디자인 토큰
============================================================ */
.rs-page{
	--rs-primary:var(--pg-primary);
	--rs-success:#12b76a;
	--rs-ink:var(--pg-ink);
	--rs-body:var(--pg-body);
	--rs-muted:#8b93a1;
	--rs-line:#e4e8ef;
	--rs-bg:#f5f7fb;
	--rs-radius:20px;
	background:var(--rs-bg);
	padding:80px 0 100px;
}
.rs-page *{ box-sizing:border-box; }

/* 카드 */
.rs-page .rs-card{
	max-width:620px; margin:0 auto; text-align:center;
	background:#fff; border:1px solid var(--rs-line);
	border-radius:var(--rs-radius);
	box-shadow:0 20px 60px rgba(16,24,40,0.10);
	padding:56px 46px 46px;
}

/* 일러스트 + 체크 배지 */
.rs-page .rs-visual{
	position:relative; width:170px; height:170px; margin:0 auto 28px;
	border-radius:50%;
	background:radial-gradient(circle at 50% 45%, #eaf2ff 0%, #f3f7ff 60%, #f7faff 100%);
	display:flex; align-items:center; justify-content:center;
	animation:rsPop .5s cubic-bezier(.22,1.2,.4,1) both;
}
.rs-page .rs-visual img{ width:118px; height:auto; display:block; }
.rs-page .rs-check{
	position:absolute; right:6px; bottom:6px;
	width:52px; height:52px; border-radius:50%;
	background:linear-gradient(135deg,var(--rs-success),#39d68e);
	border:4px solid #fff;
	display:flex; align-items:center; justify-content:center;
	color:#fff; font-size:var(--fs-lg);
	box-shadow:0 8px 20px rgba(18,183,106,0.35);
	animation:rsPop .45s .28s cubic-bezier(.22,1.4,.4,1) both;
}
@keyframes rsPop{
	from{ opacity:0; transform:scale(.6); }
	to{ opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion:reduce){
	.rs-page .rs-visual, .rs-page .rs-check{ animation:none; }
}

/* 문구 */
.rs-page .rs-eyebrow{
	display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
	background:rgba(18,183,106,0.10); color:var(--rs-success);
	font-weight:700; font-size:var(--fs-xs); padding:7px 16px; border-radius:999px;
}
.rs-page .rs-card h2{
	color:var(--rs-ink); font-weight:800;
	font-size:var(--fs-2xl); line-height:1.4; margin:0 0 12px; word-break:keep-all;
}
.rs-page .rs-card p{
	color:var(--rs-body); font-size:var(--fs-base); line-height:1.8;
	margin:0 auto; max-width:420px; word-break:keep-all;
}

/* 안내 박스 */
.rs-page .rs-note{
	display:flex; align-items:flex-start; gap:10px; text-align:left;
	margin:28px 0 0; padding:15px 18px; border-radius:12px;
	background:rgba(0,102,255,0.05); border:1px solid rgba(0,102,255,0.14);
	color:var(--rs-body); font-size:var(--fs-xs); line-height:1.7; word-break:keep-all;
}
.rs-page .rs-note i{ color:var(--rs-primary); margin-top:4px; flex:0 0 auto; }

/* 버튼 */
.rs-page .rs-actions{
	display:flex; gap:12px; margin-top:30px; padding-top:28px;
	border-top:1px solid var(--rs-line);
}
.rs-page .rs-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	height:54px; border:none; cursor:pointer; text-decoration:none;
	font-weight:800; font-size:var(--fs-base); border-radius:12px;
	transition:transform .16s ease, box-shadow .16s ease, background .16s ease, filter .16s ease;
}
.rs-page .rs-btn-primary{
	flex:1 1 auto;
	background:linear-gradient(135deg,var(--rs-primary),#3a8bff); color:#fff;
	box-shadow:0 10px 24px rgba(0,102,255,0.28);
}
.rs-page .rs-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,102,255,0.36); color:#fff; }
.rs-page .rs-btn-primary:active{ transform:translateY(0); filter:brightness(0.96); }
.rs-page .rs-btn-ghost{ flex:0 0 168px; background:#eef1f6; color:var(--rs-body); }
.rs-page .rs-btn-ghost:hover{ background:#e3e7ee; color:var(--rs-body); }

@media (max-width:575px){
	.rs-page{ padding:50px 0 70px; }
	.rs-page .rs-card{ padding:38px 22px 32px; }
	.rs-page .rs-card h2{ font-size:var(--fs-xl); }
	.rs-page .rs-visual{ width:140px; height:140px; }
	.rs-page .rs-visual img{ width:96px; }
	.rs-page .rs-actions{ flex-direction:column-reverse; }
	.rs-page .rs-btn-ghost{ flex:0 0 50px; height:50px; }
}

/* ==================================================================
   [페이지 전용] 견적서 요청
   스코프 .quote-page
   대상 : mall/quotation/view_quote_ask.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 102줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
/* ============================================================
   Seetrol 견적서 요청 : 통일 디자인 (scoped: .quote-page)
   ※ DB 상품 루프·폼 필드명·수량 옵션·JS 는 그대로, UI만 통일
============================================================ */
.quote-page{
	--q-primary:#0066ff;
	--q-ink:#1a1d24;
	--q-body:#3f4654;
	--q-muted:#7a828f;
	--q-line:rgba(16,24,40,0.10);
	--q-radius:16px;
	--q-shadow:0 12px 32px rgba(16,24,40,0.09);
	--q-shadow-sm:0 5px 16px rgba(16,24,40,0.06);
	padding:70px 0 90px;
}
.quote-page .q-head{ text-align:center; max-width:680px; margin:0 auto 34px; }
.quote-page .q-eyebrow{ display:inline-block; color:var(--q-primary); font-weight:700; letter-spacing:0.04em; font-size:var(--fs-lg); margin-bottom:14px; }
.quote-page .q-head h2{ color:var(--q-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 12px; line-height:1.35; }
.quote-page .q-guide{
	display:flex; align-items:center; gap:10px; justify-content:center;
	max-width:820px; margin:0 auto 26px; padding:14px 20px;
	background:rgba(0,102,255,0.06); border:1px solid rgba(0,102,255,0.16);
	border-radius:12px; color:var(--q-body); font-size:var(--fs-base); line-height:1.6; word-break:keep-all;
}
.quote-page .q-guide i{ color:var(--q-primary); flex:0 0 auto; }

/* 제품 표 */
.quote-page .q-table{
	background:#fff; border:1px solid var(--q-line); border-radius:var(--q-radius);
	box-shadow:var(--q-shadow-sm); overflow:hidden; margin-bottom:30px;
}
/* [2026-08-07] 한 줄을 낮게 — 목록 전체가 한눈에 들어오도록
   · 제품명과 사양을 같은 줄에 나란히 놓습니다(예전에는 두 줄이었습니다)
   · 가격·단위·수량 칸 폭을 고정해 이름 칸을 넓게 씁니다
   · 행 높이를 18px → 10px 여백으로 줄였습니다 */
.quote-page .q-thead, .quote-page .q-row{
	display:grid; grid-template-columns:minmax(0,1fr) 130px 58px 96px; align-items:center; gap:10px;
}
.quote-page .q-thead{
	background:#0b1b3a; color:#fff; font-weight:700; font-size:var(--fs-xs);
	padding:11px 20px; letter-spacing:0.02em;
}
.quote-page .q-thead > div{ text-align:center; }
.quote-page .q-thead > div:first-child{ text-align:left; }
.quote-page .q-row{
	padding:10px 20px; border-top:1px solid var(--q-line);
	transition:background .15s ease;
}
.quote-page .q-row:hover{ background:#f7f9fc; }
/* 제품명 + 사양을 같은 줄에. 폭이 모자라면 사양만 줄임표로 잘립니다 */
.quote-page .q-name{
	display:flex; align-items:baseline; gap:9px; min-width:0;
	color:var(--q-ink); font-weight:700; font-size:var(--fs-base); line-height:1.4;
}
.quote-page .q-name .q-brand{
	flex:1 1 auto; min-width:0; color:var(--q-muted); font-weight:500; font-size:var(--fs-xs);
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.quote-page .q-price{ text-align:right; color:var(--q-ink); font-weight:700; font-size:var(--fs-base); white-space:nowrap; }
.quote-page .q-price span{ color:var(--q-muted); font-weight:500; font-size:var(--fs-xs); }
.quote-page .q-price .tel-circle{ color:var(--q-primary); margin-right:4px; }
.quote-page .q-price .tel-text{ color:var(--q-primary); font-weight:700; }
.quote-page .q-unit{ text-align:center; color:var(--q-muted); font-size:var(--fs-xs); }
.quote-page .q-qty{ text-align:center; }
.quote-page .q-qty select.form-control{
	width:100%; max-width:96px; margin:0 auto; border:1px solid var(--q-line);
	border-radius:8px; height:36px; line-height:normal; padding:0 6px;
	font-size:var(--fs-xs); color:var(--q-ink); text-align:center; text-align-last:center;
	background:#fff; cursor:pointer; appearance:auto; -webkit-appearance:menulist;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.quote-page .q-qty select.form-control:focus{ outline:none; border-color:var(--q-primary); box-shadow:0 0 0 3px rgba(0,102,255,0.14); }

/* 고객 정보 카드 */
.quote-page .q-customer{
	background:#fff; border:1px solid var(--q-line); border-radius:var(--q-radius);
	box-shadow:var(--q-shadow); padding:22px 24px;
}
.quote-page .q-customer h3{ color:var(--q-ink); font-weight:800; font-size:var(--fs-lg); margin:0 0 14px; display:flex; align-items:center; gap:9px; }
.quote-page .q-customer h3 i{ color:var(--q-primary); }

/* [2026-08-07] 고객 정보를 제품 선택보다 앞에 두면서 단계 번호를 붙였습니다.
   순서가 바뀐 것을 방문자가 바로 알 수 있게 하는 표시입니다. */
.quote-page .q-step{
	flex:0 0 auto; width:27px; height:27px; border-radius:50%;
	display:inline-flex; align-items:center; justify-content:center;
	background:var(--q-primary); color:#fff;
	font-size:var(--fs-xs); font-weight:800; line-height:1;
}
.quote-page .q-sec-title{
	display:flex; align-items:center; gap:9px; margin:34px 0 16px;
	color:var(--q-ink); font-weight:800; font-size:var(--fs-lg);
}
/* [2026-08-07] 회사명·담당자명·이메일을 한 줄에 놓습니다.
   두 칸이던 때는 이메일 옆이 통째로 비어 있었습니다.
   휴대폰·인증번호는 아래 .q-auth 로 따로 내렸습니다. */
.quote-page .q-customer-grid{ display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:10px; align-items:stretch; }
/* [2026-08-10] 로그인하신 분께만 뜨는 한 줄. 칸이 이미 채워져 있는
   까닭을 알려 주고, 고쳐도 된다는 것을 함께 일러 줍니다. */
.quote-page .q-prefill{
	display:flex; align-items:center; gap:8px;
	margin:0 0 12px; padding:10px 14px;
	background:rgba(0,102,255,0.06); border:1px solid rgba(0,102,255,0.16);
	border-radius:10px;
	color:var(--q-body); font-size:var(--fs-xs); line-height:1.6; word-break:keep-all;
}
.quote-page .q-prefill i{ color:var(--q-primary); }
.quote-page .q-customer .form-control{
	width:100%; height:auto; min-height:44px; line-height:normal;
	border:1px solid var(--q-line); border-radius:10px;
	padding:10px 14px; font-size:var(--fs-base); color:var(--q-ink); background:#fff;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.quote-page .q-customer .form-control::placeholder{ color:#adb3bd; }
.quote-page .q-customer .form-control:focus{ outline:none; border-color:var(--q-primary); box-shadow:0 0 0 3px rgba(0,102,255,0.14); }
.quote-page .q-submit{
	display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
	border:none; cursor:pointer; font-weight:700; font-size:var(--fs-base); padding:14px 30px; border-radius:12px;
	background:linear-gradient(135deg,var(--q-primary),#3a8bff); color:#fff;
	box-shadow:0 10px 24px rgba(0,102,255,0.28); transition:transform .18s ease, box-shadow .18s ease;
}
.quote-page .q-submit:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,102,255,0.38); }
/* 인증 전에는 눌리지 않습니다 (진짜 판정은 서버가 합니다) */
.quote-page .q-submit:disabled{
	background:#c9d0da; color:#fff; box-shadow:none; cursor:not-allowed; transform:none;
}
.quote-page .q-submit:disabled:hover{ transform:none; box-shadow:none; }

/* ------------------------------------------------------------
   [2026-08-07] 휴대폰 인증 영역

   견적 요청에 문자 인증을 붙이면서 생긴 부분입니다.
   번호 입력 + [인증번호 받기] 한 줄, 6자리 입력 + [확인] 한 줄,
   그 아래 상태 문구 한 줄로 되어 있습니다.
------------------------------------------------------------ */
.quote-page .q-auth{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.quote-page .q-auth-row{ display:grid; grid-template-columns:1fr auto; gap:10px; }
.quote-page .q-auth-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
	border:1px solid var(--q-primary); background:#fff; color:var(--q-primary);
	font-weight:700; font-size:var(--fs-base); padding:10px 20px; border-radius:10px;
	cursor:pointer; transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.quote-page .q-auth-btn:hover{ background:var(--q-primary); color:#fff; }
.quote-page .q-auth-btn.is-confirm{ background:var(--q-primary); color:#fff; }
.quote-page .q-auth-btn.is-confirm:hover{ filter:brightness(1.08); }
.quote-page .q-auth-btn:disabled{
	border-color:#d3d9e2; background:#f2f5fa; color:#8b93a1; cursor:not-allowed;
}
.quote-page .q-auth-btn.is-done{
	border-color:#0f9d6e; background:#e8f8f1; color:#0b7a55; cursor:default;
}
.quote-page .q-auth-msg{
	display:flex; align-items:flex-start; gap:8px; margin:0;
	font-size:var(--fs-xs); line-height:1.65; color:var(--q-muted); word-break:keep-all;
}
.quote-page .q-auth-msg.is-ok{ color:#0b7a55; font-weight:700; }
.quote-page .q-auth-msg.is-err{ color:#c8102e; font-weight:700; }

.quote-page .q-actions{ margin-top:22px; display:flex; justify-content:flex-end; }

/* 되돌려보낼 때 뜨는 사유 (견적 요청 화면) */
.quote-page .q-need{
	display:flex; align-items:flex-start; gap:11px;
	margin:0 0 16px; padding:15px 18px;
	background:#fff1f3; border:1px solid #f0b8c0; border-left:4px solid #c8102e;
	border-radius:12px; color:#a4162a; font-size:var(--fs-base); font-weight:700;
	line-height:1.6; word-break:keep-all;
}

/* 메일 발송 결과 (견적서 화면) */
.quote-doc-note, .services-two .q-mailed{
	display:flex; align-items:flex-start; gap:11px;
	max-width:900px; margin:0 auto 24px; padding:16px 20px;
	background:#eef4ff; border:1px solid #bcd3fb; border-left:4px solid #0066ff;
	border-radius:12px; color:#0b3f8f; font-size:var(--fs-base);
	line-height:1.65; word-break:keep-all;
}
.services-two .q-mailed.is-fail{
	background:#fff1f3; border-color:#f0b8c0; border-left-color:#c8102e; color:#a4162a;
}
.services-two .q-mailed a{ color:inherit; text-decoration:underline; font-weight:700; }

@media (max-width:767px){
	.quote-page .q-customer-grid{ grid-template-columns:1fr; }
	.quote-page .q-auth-row{ grid-template-columns:1fr; }
	.quote-page .q-actions{ justify-content:stretch; }
	.quote-page .q-actions .q-submit{ width:100%; }
}

/* ------------------------------------------------------------
   [2026-08-07] 견적서 미리보기 · 발송 결과 화면 (.qp-*)

   보내기 전에 실제로 나갈 PDF 를 그대로 보여 주는 화면입니다.
   PDF 는 <iframe> 안에서 브라우저 기본 뷰어로 뜹니다.
------------------------------------------------------------ */
.quote-page .qp-note{
	display:flex; align-items:flex-start; gap:11px;
	margin:0 0 20px; padding:16px 20px;
	background:#eef4ff; border:1px solid #bcd3fb; border-left:4px solid var(--q-primary);
	border-radius:12px; color:#0b3f8f;
	font-size:var(--fs-base); line-height:1.65; word-break:keep-all;
}
.quote-page .qp-note i{ margin-top:3px; }

.quote-page .qp-summary{
	display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
	background:var(--q-line); border:1px solid var(--q-line); border-radius:12px;
	overflow:hidden; margin-bottom:18px;
}
.quote-page .qp-summary > div{
	background:#fff; padding:14px 18px; display:flex; flex-direction:column; gap:5px;
}
.quote-page .qp-summary span{ color:var(--q-muted); font-size:var(--fs-2xs); font-weight:700; }
.quote-page .qp-summary b{ color:var(--q-ink); font-size:var(--fs-base); font-weight:800; word-break:keep-all; }
.quote-page .qp-summary .is-total{ background:#f4f8ff; }
.quote-page .qp-summary .is-total b{ color:var(--q-primary); font-size:var(--fs-lg); }

/* PDF 뷰어 — 높이를 화면에 맞춰 잡습니다 */
.quote-page .qp-viewer{
	border:1px solid var(--q-line); border-radius:12px; overflow:hidden;
	background:#eceff4; box-shadow:var(--q-shadow);
}
.quote-page .qp-viewer iframe{
	display:block; width:100%; height:min(80vh, 1000px); border:0;
}

.quote-page .qp-openpdf{
	margin:12px 0 0; text-align:center;
	color:var(--q-muted); font-size:var(--fs-xs);
}
.quote-page .qp-openpdf a{
	color:var(--q-primary); font-weight:700; margin-left:12px; text-decoration:underline;
}

.quote-page .qp-actions{
	display:flex; align-items:center; justify-content:space-between; gap:14px;
	margin-top:26px; flex-wrap:wrap;
}
.quote-page .qp-actions.is-center{ justify-content:center; }
.quote-page .qp-actions form{ margin:0; }
.quote-page .qp-back{
	display:inline-flex; align-items:center; gap:8px;
	padding:14px 24px; border-radius:12px;
	border:1px solid var(--q-line); background:#fff; color:var(--q-body);
	font-weight:700; font-size:var(--fs-base); text-decoration:none;
}
.quote-page .qp-back:hover{ border-color:var(--q-primary); color:var(--q-primary); }
.quote-page .qp-actions a.q-submit{ text-decoration:none; }

/* 발송 결과 */
.quote-page.qp-done .qp-result{
	max-width:760px; margin:0 auto; text-align:center;
	background:#fff; border:1px solid var(--q-line); border-radius:var(--q-radius);
	box-shadow:var(--q-shadow); padding:48px 36px;
}
.quote-page .qp-result-ico{
	display:inline-flex; align-items:center; justify-content:center;
	width:78px; height:78px; border-radius:50%; margin-bottom:20px; font-size:34px;
}
.quote-page .qp-result-ico.is-ok{ background:#e8f8f1; color:#0b7a55; }
.quote-page .qp-result-ico.is-fail{ background:#fff1f3; color:#c8102e; }
.quote-page .qp-result h2{ color:var(--q-ink); font-weight:800; font-size:var(--fs-2xl); margin:0 0 12px; }
.quote-page .qp-result > p{ color:var(--q-body); font-size:var(--fs-base); line-height:1.75; margin:0 0 24px; word-break:keep-all; }
.quote-page .qp-result .qp-summary{ grid-template-columns:repeat(3,1fr); text-align:left; margin-bottom:26px; }
.quote-page .qp-help{ margin:22px 0 0; color:var(--q-muted); font-size:var(--fs-xs); }
.quote-page .qp-help a{ color:var(--q-primary); font-weight:700; }

@media (max-width:767px){
	.quote-page .qp-summary{ grid-template-columns:1fr 1fr; }
	.quote-page .qp-result .qp-summary{ grid-template-columns:1fr; }
	.quote-page .qp-viewer iframe{ height:62vh; }
	.quote-page .qp-actions{ flex-direction:column-reverse; align-items:stretch; }
	.quote-page .qp-actions form, .quote-page .qp-actions .q-submit, .quote-page .qp-back{ width:100%; justify-content:center; }
	.quote-page .qp-openpdf a{ display:block; margin:8px 0 0; }
	.quote-page.qp-done .qp-result{ padding:34px 22px; }
}

/* ==================================================================
   [2026-08-07] 견적 요청 화면 — 2단 구성 + 미리보기 모달

   [무엇을 바꿨나]
   예전에는 제출해야만 금액을 알 수 있었고, 견적서를 보려면 다른
   화면으로 넘어가야 했습니다. 지금은
     · 오른쪽에 요약판이 화면을 따라다니며 합계를 즉시 보여 주고
     · [견적서 미리보기] 를 누르면 실제 PDF 가 모달로 뜹니다

   [왜 모달인가]
   PDF 를 페이지 안에 박으면 화면이 800px 넘게 길어집니다. 방금
   제품 목록을 한 줄로 줄인 효과가 그대로 사라집니다. 모달은
   화면을 꽉 채워 크게 보여 주면서 목록 길이를 건드리지 않습니다.
================================================================== */
.quote-page .q-layout{
	display:grid; grid-template-columns:minmax(0,1fr) 320px;
	gap:24px; align-items:start;
}
.quote-page .q-main{ min-width:0; }

/* 오른쪽 요약판 — 화면에 붙어 따라다닙니다 */
.quote-page .q-side-inner{
	position:sticky; top:96px;
	background:#fff; border:1px solid var(--q-line); border-radius:var(--q-radius);
	box-shadow:var(--q-shadow); padding:20px;
}
.quote-page .q-side-title{
	display:flex; align-items:center; gap:8px; margin:0 0 14px;
	color:var(--q-ink); font-weight:800; font-size:var(--fs-md);
}
.quote-page .q-side-title i{ color:var(--q-primary); }

.quote-page .q-side-list{
	list-style:none; margin:0 0 14px; padding:0;
	max-height:230px; overflow-y:auto;
}
.quote-page .q-side-list li{
	display:grid; grid-template-columns:minmax(0,1fr) auto;
	gap:2px 8px; padding:9px 0; border-bottom:1px dashed var(--q-line);
	font-size:var(--fs-xs);
}
.quote-page .q-side-list li.is-empty{
	display:block; text-align:center; color:var(--q-muted);
	padding:22px 0; border:0;
}
.quote-page .q-side-nm{
	color:var(--q-ink); font-weight:700;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.quote-page .q-side-qty{ color:var(--q-muted); grid-column:1; }
.quote-page .q-side-amt{ grid-column:2; grid-row:2; color:var(--q-ink); font-weight:800; text-align:right; }

.quote-page .q-side-sum{ margin:0 0 16px; }
.quote-page .q-side-sum > div{
	display:flex; align-items:baseline; justify-content:space-between; gap:10px;
	padding:5px 0; font-size:var(--fs-xs); color:var(--q-body);
}
.quote-page .q-side-sum dt, .quote-page .q-side-sum dd{ margin:0; }
.quote-page .q-side-sum dd{ font-weight:700; color:var(--q-ink); }
.quote-page .q-side-sum .is-total{
	margin-top:8px; padding-top:12px; border-top:1px solid var(--q-line);
	font-size:var(--fs-base);
}
.quote-page .q-side-sum .is-total dt{ font-weight:800; color:var(--q-ink); }
.quote-page .q-side-sum .is-total dd{ font-size:var(--fs-xl); font-weight:800; color:var(--q-primary); }

.quote-page .q-side-btn{ width:100%; }
.quote-page .q-side-note{
	margin:12px 0 0; color:var(--q-muted); font-size:var(--fs-2xs);
	line-height:1.6; text-align:center; word-break:keep-all;
}
.quote-page .q-side-note.is-ok{ color:#0b7a55; font-weight:700; }
.quote-page .q-side-note.is-err{ color:#c8102e; font-weight:700; }

/* ── 미리보기 모달 ─────────────────────────────────── */
.quote-page-modal, .q-modal{
	position:fixed; inset:0; z-index:10000;
	display:flex; align-items:center; justify-content:center; padding:24px;
}
.q-modal[hidden]{ display:none; }
.q-modal-dim{ position:absolute; inset:0; background:rgba(10,18,35,0.62); }
.q-modal-box{
	position:relative; display:flex; flex-direction:column;
	width:min(980px, 100%); height:min(92vh, 1080px);
	background:#fff; border-radius:16px; overflow:hidden;
	box-shadow:0 30px 80px rgba(10,18,35,0.45);
}
.q-modal-head{
	display:flex; align-items:center; gap:12px;
	padding:16px 20px; border-bottom:1px solid var(--q-line); background:#fff;
}
.q-modal-head b{ color:var(--q-ink); font-size:var(--fs-md); font-weight:800; }
.q-modal-head b i{ color:var(--q-primary); }
.q-modal-head span{ color:var(--q-primary); font-size:var(--fs-xs); font-weight:800; }
.q-modal-x{
	margin-left:auto; width:36px; height:36px; border-radius:50%;
	border:1px solid var(--q-line); background:#fff; color:var(--q-body);
	cursor:pointer; font-size:var(--fs-md); line-height:1;
}
.q-modal-x:hover{ background:#f3f5f9; }

.q-modal-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; background:#eceff4; }
.q-modal-body iframe{ flex:1 1 auto; width:100%; border:0; min-height:0; }
.q-modal-alt{
	margin:0; padding:8px 16px; text-align:center;
	color:var(--q-muted); font-size:var(--fs-2xs); background:#eceff4;
}
.q-modal-alt a{ color:var(--q-primary); font-weight:700; text-decoration:underline; margin-left:8px; }

.q-modal-foot{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:14px 20px; border-top:1px solid var(--q-line); background:#fff;
}
.q-modal-foot form{ margin:0; }
.q-modal-foot .qp-back{
	display:inline-flex; align-items:center; gap:8px;
	padding:12px 20px; border-radius:10px;
	border:1px solid var(--q-line); background:#fff; color:var(--q-body);
	font-weight:700; font-size:var(--fs-base); cursor:pointer;
}
.q-modal-foot .qp-back:hover{ border-color:var(--q-primary); color:var(--q-primary); }

/* ── 좁은 화면 : 요약판을 화면 아래 고정 바로 ─────────── */
@media (max-width:991px){
	.quote-page .q-layout{ grid-template-columns:1fr; }
	.quote-page{ padding-bottom:170px; }
	.quote-page .q-side{
		position:fixed; left:0; right:0; bottom:0; z-index:9995;
	}
	.quote-page .q-side-inner{
		position:static; border-radius:16px 16px 0 0; border-bottom:0;
		box-shadow:0 -10px 28px rgba(16,24,40,0.18); padding:14px 16px;
	}
	.quote-page .q-side-title,
	.quote-page .q-side-list,
	.quote-page .q-side-sum > div:not(.is-total){ display:none; }
	.quote-page .q-side-sum{ margin:0 0 10px; }
	.quote-page .q-side-sum .is-total{ margin:0; padding:0; border:0; }
	.quote-page .q-side-note{ display:none; }

	.q-modal{ padding:0; }
	.q-modal-box{ width:100%; height:100%; border-radius:0; }
	.q-modal-foot{ flex-direction:column-reverse; align-items:stretch; }
	.q-modal-foot form, .q-modal-foot .q-submit, .q-modal-foot .qp-back{ width:100%; justify-content:center; }
}

/* 셀 라벨 (모바일용, 기본 숨김) */
.quote-page .q-cell-label{ display:none; }

@media (max-width:767px){
	.quote-page{ padding:50px 0 70px; }
	.quote-page .q-head h2{ font-size:var(--fs-2xl); }
	.quote-page .q-thead{ display:none; }
	/* [2026-08-07] 좁은 화면에서도 한 제품이 한 덩어리로 보이게 했습니다.
	   예전에는 가격·단위·수량이 2단으로 흩어져 한 줄이 200px 가까이
	   됐습니다. 이름 한 줄 + 가격·단위·수량 한 줄로 묶습니다. */
	.quote-page .q-row{
		grid-template-columns:minmax(0,1fr) auto auto; gap:4px 12px; padding:12px 16px;
	}
	.quote-page .q-name{ grid-column:1 / -1; display:block; }
	.quote-page .q-name .q-brand{ display:block; white-space:normal; margin-top:2px; }
	.quote-page .q-price{ text-align:left; align-self:center; }
	.quote-page .q-unit{ text-align:center; align-self:center; }
	.quote-page .q-qty{ text-align:right; }
	.quote-page .q-cell-label{ display:none; }
	.quote-page .q-qty select.form-control{ margin:0; max-width:88px; }
	.quote-page .q-customer-grid{ grid-template-columns:1fr; }
}

/* ==================================================================
   [페이지 전용] 다운로드
   스코프 .dl-page
   대상 : download.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 92줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
.dl-page{
	--dl-primary:var(--pg-primary);
	--dl-ink:var(--pg-ink);
	--dl-body:var(--pg-body);
	--dl-muted:var(--pg-muted);
	--dl-line:var(--pg-line);
	--dl-radius:var(--pg-radius);
	--dl-shadow-sm:var(--pg-shadow-sm);
	--dl-shadow-hover:0 18px 44px rgba(16,24,40,0.13);
	padding:72px 0 90px;
}
.dl-page .dl-inner{ position:relative; z-index:1; }

/* 헤더 */
.dl-page .dl-head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.dl-page .dl-eyebrow{
	display:inline-block; color:var(--dl-primary);
	font-weight:700; letter-spacing:0.04em; font-size:var(--fs-lg); margin-bottom:12px;
}
.dl-page .dl-head h2{ color:var(--dl-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 12px; line-height:1.35; }
.dl-page .dl-head p{ color:var(--dl-body); font-size:var(--fs-base); line-height:1.8; margin:0; }

/* 그리드 */
.dl-page .dl-grid{
	display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
	gap:22px; max-width:1160px; margin:0 auto;
}

/* 카드 (액센트 색상은 클래스로 주입) */
.dl-page .dl-card{
	--c:var(--dl-primary); --cbg:#eef4ff;
	display:flex; flex-direction:column;
	background:#fff; border:1px solid var(--dl-line);
	border-radius:var(--dl-radius); box-shadow:var(--dl-shadow-sm);
	padding:26px 24px; position:relative; overflow:hidden;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dl-card.a-blue  { --c:#0066ff; --cbg:#eef4ff; }
.dl-card.a-indigo{ --c:#5a4bd6; --cbg:#eeecfb; }
.dl-card.a-purple{ --c:#7c3aed; --cbg:#f2ecfd; }
.dl-card.a-green { --c:#1f9d55; --cbg:#e7f6ee; }
.dl-card.a-slate { --c:#475569; --cbg:#eef1f5; }
.dl-card.a-amber { --c:#d98a00; --cbg:#fdf3df; }
.dl-page .dl-card:hover{ transform:translateY(-4px); box-shadow:var(--dl-shadow-hover); border-color:color-mix(in srgb, var(--c) 35%, transparent); }
.dl-page .dl-card::before{
	content:""; position:absolute; left:0; top:0; height:4px; width:100%;
	background:var(--c); opacity:0; transition:opacity .2s ease;
}
.dl-page .dl-card:hover::before{ opacity:1; }

/* 상단 : 아이콘 + 카테고리/번호 */
.dl-page .dl-top{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.dl-page .dl-icon{
	flex:0 0 52px; width:52px; height:52px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:var(--cbg); color:var(--c); font-size:var(--fs-xl);
	transition:background .2s ease, color .2s ease;
}
.dl-page .dl-card:hover .dl-icon{ background:var(--c); color:#fff; }
.dl-page .dl-cat{
	display:inline-block; color:var(--c); background:var(--cbg);
	font-weight:800; font-size:var(--fs-2xs); letter-spacing:0.05em;
	padding:4px 10px; border-radius:999px; text-transform:uppercase;
}
.dl-page .dl-no{ margin-left:auto; color:#c2c7cf; font-weight:800; font-size:var(--fs-lg); }

/* 본문 */
.dl-page .dl-title{
	color:var(--dl-ink); font-weight:800; font-size:var(--fs-md);
	line-height:1.4; margin:0 0 8px; word-break:break-word; overflow-wrap:anywhere;
}
.dl-page .dl-desc{
	color:var(--dl-body); font-size:var(--fs-base); line-height:1.7;
	margin:0 0 20px; word-break:keep-all; overflow-wrap:anywhere;
}

/* 버튼 (카드 하단 고정) */
.dl-page .dl-btnwrap{ margin-top:auto; }
/* [2026-08-11] 버튼을 원색으로 꽉 채우니 카드마다 알록달록했습니다.
   옅은 배경 + 색 테두리·글자로 차분하게 두고, 마우스를 올렸을 때만
   색을 채웁니다. 카드별 색감(--c)은 그대로 유지됩니다. */
.dl-page .dl-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	width:100%;
	background:var(--cbg); color:var(--c); border:1px solid var(--c);
	font-weight:700; font-size:var(--fs-base);
	padding:12px 18px; border-radius:12px; text-decoration:none;
	transition:background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.dl-page .dl-btn:hover{ background:var(--c); color:#fff; transform:translateY(-2px); box-shadow:0 8px 18px color-mix(in srgb, var(--c) 26%, transparent); }

@media (max-width:767px){
	.dl-page{ padding:52px 0 68px; }
	.dl-page .dl-head h2{ font-size:var(--fs-2xl); }
	.dl-page .dl-grid{ grid-template-columns:1fr; gap:18px; }
}

/* ==================================================================
   [페이지 전용] 다운로드(단종)
   스코프 .dld-page
   대상 : downloaddrop.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 102줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
.dld-page{
	--dl-primary:var(--pg-primary);
	--dl-ink:var(--pg-ink);
	--dl-body:var(--pg-body);
	--dl-muted:var(--pg-muted);
	--dl-line:var(--pg-line);
	--dl-radius:var(--pg-radius);
	--dl-shadow-sm:var(--pg-shadow-sm);
	--dl-shadow-hover:0 18px 44px rgba(16,24,40,0.13);
	padding:72px 0 90px;
}
.dld-page .dl-inner{ position:relative; z-index:1; }

/* 헤더 */
.dld-page .dl-head{ text-align:center; max-width:720px; margin:0 auto 30px; }
.dld-page .dl-eyebrow{
	display:inline-block; color:var(--dl-primary);
	font-weight:700; letter-spacing:0.04em; font-size:var(--fs-lg); margin-bottom:12px;
}
.dld-page .dl-head h2{ color:var(--dl-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 12px; line-height:1.35; }
.dld-page .dl-head p{ color:var(--dl-body); font-size:var(--fs-base); line-height:1.8; margin:0; }

/* 단종 안내 배너 */
.dld-page .dl-notice{
	display:flex; align-items:flex-start; gap:12px;
	max-width:1160px; margin:0 auto 34px;
	background:#fff8ec; border:1px solid #f2dfb3; border-radius:14px;
	padding:16px 20px; color:#8a6516; font-size:var(--fs-base); line-height:1.7;
}
.dld-page .dl-notice i{ color:#d98a00; font-size:var(--fs-lg); margin-top:2px; flex:0 0 auto; }
.dld-page .dl-notice strong{ color:#6f4f0f; }

/* 그리드 */
.dld-page .dl-grid{
	display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
	gap:22px; max-width:1160px; margin:0 auto;
}

/* 카드 */
.dld-page .dl-card{
	--c:var(--dl-primary); --cbg:#eef4ff;
	display:flex; flex-direction:column;
	background:#fff; border:1px solid var(--dl-line);
	border-radius:var(--dl-radius); box-shadow:var(--dl-shadow-sm);
	padding:26px 24px; position:relative; overflow:hidden;
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dl-card.a-blue  { --c:#0066ff; --cbg:#eef4ff; }
.dl-card.a-indigo{ --c:#5a4bd6; --cbg:#eeecfb; }
.dl-card.a-purple{ --c:#7c3aed; --cbg:#f2ecfd; }
.dl-card.a-green { --c:#1f9d55; --cbg:#e7f6ee; }
.dl-card.a-slate { --c:#475569; --cbg:#eef1f5; }
.dl-card.a-amber { --c:#d98a00; --cbg:#fdf3df; }
.dld-page .dl-card:hover{ transform:translateY(-4px); box-shadow:var(--dl-shadow-hover); border-color:color-mix(in srgb, var(--c) 35%, transparent); }
.dld-page .dl-card::before{
	content:""; position:absolute; left:0; top:0; height:4px; width:100%;
	background:var(--c); opacity:0; transition:opacity .2s ease;
}
.dld-page .dl-card:hover::before{ opacity:1; }

/* 상단 : 아이콘 + 카테고리/번호 */
.dld-page .dl-top{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.dld-page .dl-icon{
	flex:0 0 52px; width:52px; height:52px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:var(--cbg); color:var(--c); font-size:var(--fs-xl);
	transition:background .2s ease, color .2s ease;
}
.dld-page .dl-card:hover .dl-icon{ background:var(--c); color:#fff; }
.dld-page .dl-cat{
	display:inline-block; color:var(--c); background:var(--cbg);
	font-weight:800; font-size:var(--fs-2xs); letter-spacing:0.05em;
	padding:4px 10px; border-radius:999px; text-transform:uppercase;
}
.dld-page .dl-no{ margin-left:auto; color:#c2c7cf; font-weight:800; font-size:var(--fs-lg); }

/* 본문 */
.dld-page .dl-title{
	color:var(--dl-ink); font-weight:800; font-size:var(--fs-md);
	line-height:1.4; margin:0 0 8px; word-break:break-word; overflow-wrap:anywhere;
}
.dld-page .dl-desc{
	color:var(--dl-body); font-size:var(--fs-base); line-height:1.7;
	margin:0 0 20px; word-break:keep-all; overflow-wrap:anywhere;
}

/* 버튼 (카드 하단 고정) */
.dld-page .dl-btnwrap{ margin-top:auto; }
/* [2026-08-11] 단종 다운로드도 같은 이유로 톤다운(위 .dl-page 참고) */
.dld-page .dl-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	width:100%;
	background:var(--cbg); color:var(--c); border:1px solid var(--c);
	font-weight:700; font-size:var(--fs-base);
	padding:12px 18px; border-radius:12px; text-decoration:none;
	transition:background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.dld-page .dl-btn:hover{ background:var(--c); color:#fff; transform:translateY(-2px); box-shadow:0 8px 18px color-mix(in srgb, var(--c) 26%, transparent); }

@media (max-width:767px){
	.dld-page{ padding:52px 0 68px; }
	.dld-page .dl-head h2{ font-size:var(--fs-2xl); }
	.dld-page .dl-grid{ grid-template-columns:1fr; gap:18px; }
}

/* ==================================================================
   [페이지 전용] Seetrol History
   스코프 .history-page
   대상 : history.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 125줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
.history-page .sh-history{
	/* Design tokens */
	--sh-primary:var(--pg-primary);
	--sh-primary-dark:var(--pg-primary-dark);
	--sh-ink:var(--pg-ink);        /* 제목 */
	--sh-body:#3a4150;       /* 본문 */
	--sh-muted:#6b7280;      /* 보조 텍스트 */
	--sh-panel:rgba(255,255,255,0.92);
	--sh-radius:16px;
	--sh-radius-sm:10px;
	--sh-shadow:0 10px 30px rgba(16,24,40,0.08);
	--sh-shadow-sm:0 4px 14px rgba(16,24,40,0.06);
	--sh-gap:28px;
}

/* 섹션 공통 여백을 하나로 통일 */
.history-page .sh-history .sh-section{
	padding:72px 0;
	background-position:top center;
	background-repeat:no-repeat;
	background-size:cover;
}
.history-page .sh-history .sh-section.is-alt{ /* 배경 위 가독성 보정용 오버레이 */
	position:relative;
}
.history-page .sh-history .sh-section.is-alt::before{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(180deg,rgba(244,247,252,0.55),rgba(244,247,252,0.75));
	pointer-events:none;
}
.history-page .sh-history .sh-section > .auto-container{ position:relative; z-index:1; }

/* 통일된 유리 패널 */
.history-page .sh-history .sh-panel{
	background:var(--sh-panel);
	border:1px solid rgba(255,255,255,0.6);
	border-radius:var(--sh-radius);
	box-shadow:var(--sh-shadow);
	padding:36px;
	backdrop-filter:blur(6px);
}
.history-page .sh-history .sh-panel--center{ text-align:center; }

/* 통일된 헤더(eyebrow / 제목 / 리드문) */
.history-page .sh-history .sh-eyebrow{
	display:inline-flex; align-items:center; gap:8px;
	color:var(--sh-primary);
	font-weight:700;
	font-size:var(--fs-lg);
	letter-spacing:0.04em;
	margin-bottom:14px;
}
.history-page .sh-history .sh-eyebrow::before{
	content:""; width:22px; height:2px; background:var(--sh-primary); border-radius:2px;
}
.history-page .sh-history .sh-panel--center .sh-eyebrow::before{ display:none; }

.history-page .sh-history .sh-title{
	color:var(--sh-ink);
	font-weight:800;
	font-size:var(--fs-2xl);
	line-height:1.3;
	margin:0 0 16px;
}
.history-page .sh-history .sh-lead{
	color:var(--sh-body);
	font-size:var(--fs-base);
	line-height:1.8;
	text-align:justify;
}

/* 반복되는 서브 블록 통일 */
.history-page .sh-history .sh-block{ margin-top:22px; padding-top:22px; border-top:1px solid rgba(16,24,40,0.08); }
.history-page .sh-history .sh-block:first-of-type{ margin-top:24px; }
.history-page .sh-history .sh-block-title{
	color:var(--sh-ink);
	font-weight:700;
	font-size:var(--fs-md);
	margin:0 0 6px;
}
.history-page .sh-history .sh-block-text{ color:var(--sh-body); line-height:1.7; text-align:justify; margin:0; }

/* 이미지 통일 */
.history-page .sh-history .sh-figure{ margin:0; }
.history-page .sh-history .sh-figure img{
	width:100%;
	border-radius:var(--sh-radius);
	box-shadow:var(--sh-shadow-sm);
	display:block;
}

/* 행 정렬 통일 */
.history-page .sh-history .sh-row{ display:flex; flex-wrap:wrap; align-items:center; gap:40px; }
.history-page .sh-history .sh-col{ flex:1 1 380px; min-width:280px; }

/* KPI 지표 통일 */
.history-page .sh-history .sh-kpi{
	background:#fff;
	border:1px solid rgba(16,24,40,0.06);
	border-radius:var(--sh-radius-sm);
	box-shadow:var(--sh-shadow-sm);
	padding:28px 22px;
	height:100%;
	transition:transform .2s ease, box-shadow .2s ease;
}
.history-page .sh-history .sh-kpi:hover{ transform:translateY(-4px); box-shadow:var(--sh-shadow); }
.history-page .sh-history .sh-kpi-icon{ font-size:var(--fs-4xl); color:var(--sh-primary); margin-bottom:14px; display:block; }
.history-page .sh-history .sh-kpi-title{ color:var(--sh-ink); font-weight:800; font-size:var(--fs-lg); margin:0 0 8px; }
.history-page .sh-history .sh-kpi-text{ color:var(--sh-muted); line-height:1.65; margin:0; font-size:var(--fs-base); }

/* 성능 지표 바 통일 (VPP82) */
.history-page .sh-history .sh-metric{ margin-top:20px; }
.history-page .sh-history .sh-metric-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.history-page .sh-history .sh-metric-label{ color:var(--sh-ink); font-weight:600; font-size:var(--fs-base); }
.history-page .sh-history .sh-metric-value{ color:var(--sh-primary); font-weight:800; }
.history-page .sh-history .sh-bar{ height:8px; border-radius:8px; background:rgba(0,102,255,0.12); overflow:hidden; }
.history-page .sh-history .sh-bar > span{ display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,var(--sh-primary),var(--sh-primary-dark)); }

@media (max-width:991px){
	.history-page .sh-history .sh-section{ padding:52px 0; }
	.history-page .sh-history .sh-panel{ padding:28px; }
	.history-page .sh-history .sh-row{ gap:28px; }
	.history-page .sh-history .sh-title{ font-size:var(--fs-xl); }
}

/* ==================================================================
   [페이지 전용] 고객 리뷰
   스코프 (스코프 없음 · rv- 접두사)
   대상 : wepledge.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 152줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
.rv-reviews{
	--rv-primary:var(--pg-primary);
	--rv-ink:var(--pg-ink);
	--rv-body:var(--pg-body);
	--rv-muted:var(--pg-muted);
	--rv-star:#ffb400;
	--rv-card:#ffffff;
	--rv-border:rgba(16,24,40,0.08);
	--rv-radius:var(--pg-radius);
	--rv-shadow:0 10px 30px rgba(16,24,40,0.07);
	--rv-shadow-hover:0 18px 44px rgba(16,24,40,0.12);
	padding:72px 0 96px;
}
.rv-reviews .rv-inner{ position:relative; z-index:1; }
/* 헤더 */
.rv-reviews .rv-head{ text-align:center; max-width:760px; margin:0 auto; }
.rv-reviews .rv-eyebrow{
	display:inline-block; color:var(--rv-primary);
	font-weight:700; letter-spacing:0.04em;
	font-size:var(--fs-lg); margin-bottom:14px;
}
.rv-reviews .rv-head h2{
	color:var(--rv-ink); font-weight:800;
	font-size:var(--fs-3xl); line-height:1.35; margin:0 0 18px;
}
.rv-reviews .rv-head p{
	color:var(--rv-body); font-size:var(--fs-base); line-height:1.8; margin:0;
}
/* 요약 배지 — [2026-08-10] 제목 바로 아래(.rv-head 안)로 들어왔습니다 */
.rv-reviews .rv-summary{
	display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
	margin:22px 0 0;
}
/* [2026-08-07] inline-flex + gap:8px 이었습니다. 그러면 "신규 고객의",
   <strong>80%</strong>, "가 지인 소개" 가 각각 flex 항목이 되어 사이마다
   8px 가 벌어집니다. "80% 가" 처럼 조사가 떨어져 보이던 원인입니다.
   inline-block 으로 바꿔 글자가 그냥 이어지게 했습니다. */
.rv-reviews .rv-badge{
	display:inline-block;
	background:#fff; border:1px solid var(--rv-border);
	border-radius:999px; padding:8px 16px;
	/* [2026-08-10] 배지마다 있던 그림자를 뺐습니다. 셋이 나란히 떠 보여
	   제목과 따로 노는 덩어리로 읽혔습니다. */
	color:var(--rv-ink); font-weight:600; font-size:var(--fs-xs);
	white-space:nowrap;
}
.rv-reviews .rv-badge strong{ color:var(--rv-primary); font-weight:800; }
.rv-reviews .rv-badge .rv-badge-stars{ color:var(--rv-star); letter-spacing:2px; margin-right:5px; }
/* 카드 그리드
   [2026-08-10] column-count 메이슨리에서 grid 로 바꿨습니다.
   메이슨리는 카드가 세로로 흘러서 왼쪽 칸을 끝까지 읽고 다시 위로
   올라와야 했고, 아래 끝이 칸마다 들쭉날쭉했습니다. '후기 전문 보기'
   를 펼치면 같은 칸 아래 카드가 전부 밀려 내려가기도 했습니다.
   지금은 왼쪽에서 오른쪽으로 읽히고, 한 줄에 놓인 카드끼리는 키가
   같습니다. */
.rv-reviews .rv-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:24px;
}
@media (max-width:1199px){ .rv-reviews .rv-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){ .rv-reviews .rv-grid{ grid-template-columns:1fr; } }
.rv-reviews .rv-card{
	display:flex; flex-direction:column;
	background:var(--rv-card);
	border:1px solid var(--rv-border);
	border-radius:var(--rv-radius);
	box-shadow:var(--rv-shadow);
	padding:28px 26px;
	margin:0;
	transition:transform .22s ease, box-shadow .22s ease;
}
.rv-reviews .rv-card:hover{ transform:translateY(-5px); box-shadow:var(--rv-shadow-hover); }
.rv-reviews .rv-stars{ color:var(--rv-star); font-size:var(--fs-base); letter-spacing:3px; margin-bottom:14px; }
.rv-reviews .rv-quote{
	color:var(--rv-ink); font-weight:800;
	font-size:var(--fs-lg); line-height:1.45; margin:0 0 16px;
	position:relative; padding-left:2px;
}
.rv-reviews .rv-text{ margin:0; }
.rv-reviews .rv-text p{
	color:var(--rv-body); font-size:var(--fs-base); line-height:1.85;
	margin:0 0 13px; text-align:justify; word-break:keep-all;
}
.rv-reviews .rv-text p:last-child{ margin-bottom:0; }
/* 작성자
   margin-top:auto — 카드마다 글 길이가 달라도 작성자 줄은 늘 카드 맨
   아래에 붙습니다. 한 줄에 놓인 카드들의 밑줄이 나란해집니다. */
.rv-reviews .rv-author{
	display:flex; align-items:center; gap:12px;
	margin-top:auto; padding-top:18px; border-top:1px solid var(--rv-border);
}
.rv-reviews .rv-avatar{
	flex:0 0 44px; width:44px; height:44px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:linear-gradient(135deg,var(--rv-primary),#3a8bff);
	color:#fff; font-weight:800; font-size:var(--fs-md);
}
.rv-reviews .rv-author-name{ color:var(--rv-ink); font-weight:700; font-size:var(--fs-base); line-height:1.3; }
.rv-reviews .rv-author-date{ color:var(--rv-muted); font-size:var(--fs-xs); margin-top:2px; }
/* CTA */
.rv-reviews .rv-cta{ text-align:center; margin-top:56px; }
/* 헤더 인라인 CTA */
.rv-reviews .rv-head-cta{ margin-top:26px; }
.rv-reviews .rv-head-btn{
	display:inline-flex; align-items:center; gap:9px;
	background:linear-gradient(135deg,var(--rv-primary),#3a8bff);
	color:#fff; font-weight:700; font-size:var(--fs-base);
	padding:14px 30px; border-radius:999px;
	box-shadow:0 10px 24px rgba(0,102,255,0.28);
	text-decoration:none; transition:transform .18s ease, box-shadow .18s ease;
}
.rv-reviews .rv-head-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,102,255,0.36); color:#fff; }

/* ============================================================
   입소문 지표 (80%)
============================================================ */
.rv-reviews .rv-wom{ margin-top:10px; }
.rv-reviews .rv-stat{
	display:flex; align-items:center; justify-content:center; gap:24px;
	background:#fff;
	border:1px solid rgba(0,102,255,0.20);
	border-radius:var(--rv-radius);
	box-shadow:var(--rv-shadow);
	padding:26px 32px;
	max-width:820px; margin:0 auto;
}
.rv-reviews .rv-stat-num{
	color:var(--rv-primary); font-weight:800;
	font-size:var(--fs-5xl); line-height:1; flex:0 0 auto;
}
.rv-reviews .rv-stat-body strong{ display:block; color:var(--rv-ink); font-weight:700; font-size:var(--fs-base); margin-bottom:4px; }
.rv-reviews .rv-stat-body span{ color:var(--rv-body); font-size:var(--fs-base); line-height:1.65; word-break:keep-all; }
.rv-reviews .rv-wom-note{
	text-align:center; max-width:820px; margin:16px auto 0;
	color:var(--rv-muted); font-size:var(--fs-xs); line-height:1.7;
	word-break:keep-all;
}

/* 플로팅 CTA (스크롤 내내 노출) */
.rv-float{
	position:fixed; right:26px; top:50%; bottom:auto; transform:translateY(-50%) translateX(120px); z-index:9990;
	display:inline-flex; align-items:center; gap:10px;
	background:linear-gradient(135deg,#0066ff,#3a8bff);
	color:#fff; font-weight:700; font-size:var(--fs-base);
	padding:15px 26px; border-radius:999px;
	box-shadow:0 12px 30px rgba(0,102,255,0.40);
	text-decoration:none;
	opacity:0; pointer-events:none;
	transition:transform .35s ease, opacity .35s ease, box-shadow .18s ease;
}
.rv-float.is-visible{ transform:translateY(-50%) translateX(0); opacity:1; pointer-events:auto; }
.rv-float:hover{ color:#fff; box-shadow:0 16px 38px rgba(0,102,255,0.5); }
.rv-float i{ font-size:var(--fs-base); }
@media (max-width:767px){
	.rv-float{ right:16px; top:40%; padding:13px 22px; font-size:var(--fs-base); }
}
@media (max-width:575px){
	.rv-reviews .rv-stat{ flex-direction:column; align-items:flex-start; gap:12px; padding:22px; }
	.rv-reviews .rv-stat-num{ font-size:var(--fs-4xl); }
}
@media (max-width:767px){
	.rv-reviews{ padding:52px 0 72px; }
	.rv-reviews .rv-head h2{ font-size:var(--fs-2xl); }
	.rv-reviews .rv-card{ padding:26px 22px; }
}

/* ==================================================================
   [2026-08-07] 고객 리뷰 개편분

   후기를 읽히게 만들기 위해 더한 것들입니다.
     · 후기에서 뽑은 숫자 스트립      .rv-figures
     · 업종 필터(자바스크립트 없음)    .rv-radio / .rv-filter
     · 카드의 요약·태그·접기          .rv-sum / .rv-tags / .rv-more
     · 검증 배지, 재확인 배지, 답글    .rv-verified / .rv-recheck / .rv-reply
     · 카드 사이 안내, 후기 보내기     .rv-ctacard / .rv-ask

   [필터가 자바스크립트 없이 되는 이유]
   숨겨 둔 라디오 <input> 이 .rv-grid 보다 앞에 형제로 놓여 있어서,
   "#rvcat-office:checked ~ .rv-grid .rv-card:not(.is-office)" 같은
   선택자로 감출 수 있습니다. 라디오는 눈에 안 보이지만 초점은
   받으므로 키보드로도 조작됩니다.
================================================================== */

/* ── 후기에서 뽑은 숫자 ─────────────────────────────── */
/* [2026-08-10] 그림자 달린 카드 네 장이 따로 떠 있었습니다. 바로 위
   배지 줄, 바로 아래 필터 칩과 함께 테두리 있는 덩어리가 세 줄
   연달아 나와 어수선했습니다. 한 판에 칸으로 나눠 담습니다. */
.rv-reviews .rv-figures{
	display:grid; grid-template-columns:repeat(4,1fr); gap:0;
	max-width:1000px; margin:30px auto 0;
	background:#fff; border:1px solid var(--rv-border);
	border-radius:var(--rv-radius); box-shadow:var(--rv-shadow);
	overflow:hidden;
}
.rv-reviews .rv-fig{
	display:flex; flex-direction:column; gap:7px;
	border-left:1px solid var(--rv-border);
	padding:22px 20px 20px; text-decoration:none;
	transition:background .18s ease;
}
.rv-reviews .rv-fig:first-child{ border-left:0; }
.rv-reviews .rv-fig:hover{ background:rgba(0,102,255,0.04); }
.rv-reviews .rv-fig-num{ color:var(--rv-primary); font-weight:800; font-size:var(--fs-3xl); line-height:1.1; }
.rv-reviews .rv-fig-desc{ color:var(--rv-ink); font-size:var(--fs-xs); line-height:1.55; word-break:keep-all; }
.rv-reviews .rv-fig-who{ color:var(--rv-muted); font-size:var(--fs-2xs); margin-top:auto; }
.rv-reviews .rv-fig-who i{ font-size:var(--fs-2xs); margin-left:3px; }

.rv-reviews .rv-note{
	max-width:900px; margin:18px auto 0; text-align:center;
	color:var(--rv-muted); font-size:var(--fs-xs); line-height:1.75; word-break:keep-all;
}
.rv-reviews .rv-note strong{ color:var(--rv-body); font-weight:700; }

/* ── 업종 필터 ──────────────────────────────────────── */
.rv-reviews .rv-radio{ position:absolute; width:1px; height:1px; opacity:0; }
/* [2026-08-10] 위쪽 간격을 넓히고 아래쪽을 좁혔습니다. 필터가 숫자
   패널에서 떨어져 나와 바로 밑 카드 묶음에 붙어 보이게 하려는 것입니다.
   필터는 카드를 고르는 손잡이지 그 자체가 읽을거리가 아닙니다. */
.rv-reviews .rv-filter{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px;
	margin:44px 0 18px;
}
.rv-reviews .rv-filter-label{
	color:var(--rv-muted); font-size:var(--fs-xs); font-weight:700;
	margin-right:4px; white-space:nowrap;
}
.rv-reviews .rv-filter label{
	display:inline-flex; align-items:center; gap:7px; cursor:pointer;
	background:#fff; border:1px solid var(--rv-border); border-radius:999px;
	padding:9px 17px; margin:0;
	color:var(--rv-body); font-size:var(--fs-xs); font-weight:700;
	transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.rv-reviews .rv-filter label span{
	color:var(--rv-muted); font-size:var(--fs-2xs); font-weight:700;
}
.rv-reviews .rv-filter label:hover{ border-color:var(--rv-primary); color:var(--rv-primary); }

/* 선택된 칩 + 그때 감출 카드 — 업종을 더하면 이 두 줄만 따라 늘리면 됩니다 */
#rvcat-all:checked    ~ .rv-filter label[for="rvcat-all"],
#rvcat-office:checked ~ .rv-filter label[for="rvcat-office"],
#rvcat-msp:checked    ~ .rv-filter label[for="rvcat-msp"],
#rvcat-biz:checked    ~ .rv-filter label[for="rvcat-biz"],
#rvcat-pos:checked    ~ .rv-filter label[for="rvcat-pos"],
#rvcat-edu:checked    ~ .rv-filter label[for="rvcat-edu"],
#rvcat-site:checked   ~ .rv-filter label[for="rvcat-site"]{
	background:var(--rv-primary); border-color:var(--rv-primary); color:#fff;
}
#rvcat-all:checked    ~ .rv-filter label[for="rvcat-all"] span,
#rvcat-office:checked ~ .rv-filter label[for="rvcat-office"] span,
#rvcat-msp:checked    ~ .rv-filter label[for="rvcat-msp"] span,
#rvcat-biz:checked    ~ .rv-filter label[for="rvcat-biz"] span,
#rvcat-pos:checked    ~ .rv-filter label[for="rvcat-pos"] span,
#rvcat-edu:checked    ~ .rv-filter label[for="rvcat-edu"] span,
#rvcat-site:checked   ~ .rv-filter label[for="rvcat-site"] span{ color:rgba(255,255,255,0.82); }

#rvcat-office:checked ~ .rv-grid .rv-card:not(.is-office),
#rvcat-msp:checked    ~ .rv-grid .rv-card:not(.is-msp),
#rvcat-biz:checked    ~ .rv-grid .rv-card:not(.is-biz),
#rvcat-pos:checked    ~ .rv-grid .rv-card:not(.is-pos),
#rvcat-edu:checked    ~ .rv-grid .rv-card:not(.is-edu),
#rvcat-site:checked   ~ .rv-grid .rv-card:not(.is-site){ display:none; }
/* 업종을 고르면 카드 사이 안내는 숨깁니다(맥락이 안 맞아서) */
.rv-reviews .rv-radio:checked:not(#rvcat-all) ~ .rv-grid .rv-ctacard{ display:none; }
/* 키보드로 이동할 때 초점이 보이도록 */
.rv-reviews .rv-radio:focus-visible ~ .rv-filter label[for]{ outline:2px solid var(--rv-primary); outline-offset:2px; }

/* ── 카드 안쪽 ──────────────────────────────────────── */
.rv-reviews .rv-card-top{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	margin-bottom:12px;
}
.rv-reviews .rv-cat{
	display:inline-block; padding:5px 12px; border-radius:999px;
	background:rgba(0,102,255,0.09); color:var(--rv-primary);
	font-size:var(--fs-2xs); font-weight:800; white-space:nowrap;
}
.rv-reviews .rv-verified{
	display:inline-flex; align-items:center; gap:5px;
	color:#0f9d6e; font-size:var(--fs-2xs); font-weight:700; white-space:nowrap;
}
.rv-reviews .rv-stars{ margin-bottom:10px; }
.rv-reviews .rv-quote{ margin-bottom:10px; }
.rv-reviews .rv-sum{
	color:var(--rv-ink); font-size:var(--fs-base); font-weight:700; line-height:1.65;
	margin:0 0 14px; padding-left:12px; border-left:3px solid var(--rv-primary);
	word-break:keep-all;
}
/* 태그 — [2026-08-10] 카드 아래쪽(작성자 바로 위)으로 내려왔습니다.
   회색 상자 세 개가 제목과 본문 사이를 막고 있어서 눈이 한 번 걸렸습니다.
   배경을 없애고 테두리만 남겨 본문보다 뒤로 물러나게 했습니다. */
.rv-reviews .rv-tags{
	list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 0; padding:0;
}
.rv-reviews .rv-tags li{
	background:transparent; border:1px solid var(--rv-border); border-radius:6px;
	padding:4px 9px; color:var(--rv-muted); font-size:var(--fs-2xs); font-weight:600;
	white-space:nowrap;
}
/* 첫 문단은 세 줄까지.
   후기마다 첫 문단이 한 줄이기도 하고 열 줄이기도 해서, 접어 두어도
   카드 키가 두 배씩 차이 났습니다. 세 줄로 끊으면 한 줄에 놓인 카드가
   서로 비슷해집니다. 전문을 펼치면 아래 :has() 규칙이 끊긴 곳을 풉니다. */
.rv-reviews .rv-text--lead p{
	margin-bottom:0;
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
	overflow:hidden;
}
.rv-reviews .rv-card:has(.rv-more[open]) .rv-text--lead p{
	display:block; overflow:visible;
}
/* 카드가 3단으로 좁아 justify 를 쓰면 단어 사이가 벌어져 읽기 나쁩니다 */
.rv-reviews .rv-text p{ text-align:left; }

/* 접기 — <details> 라 자바스크립트가 없어도 열립니다 */
.rv-reviews .rv-more{ margin-top:12px; }
.rv-reviews .rv-more summary{
	display:inline-flex; align-items:center; gap:7px; cursor:pointer; list-style:none;
	color:var(--rv-primary); font-size:var(--fs-xs); font-weight:700;
	padding:7px 14px; border:1px solid rgba(0,102,255,0.28); border-radius:999px;
}
.rv-reviews .rv-more summary::-webkit-details-marker{ display:none; }
.rv-reviews .rv-more summary:hover{ background:rgba(0,102,255,0.06); }
.rv-reviews .rv-more summary i{ font-size:var(--fs-2xs); transition:transform .18s ease; }
.rv-reviews .rv-more[open] summary i{ transform:rotate(180deg); }
.rv-reviews .rv-more[open] summary{ margin-bottom:14px; }
.rv-reviews .rv-more .rv-text p:first-child{ margin-top:0; }

/* 회사 답글 */
.rv-reviews .rv-reply{
	margin-top:16px; padding:14px 16px; border-radius:12px;
	background:#f4f8ff; border:1px solid rgba(0,102,255,0.16);
}
.rv-reviews .rv-reply b{ display:block; color:var(--rv-primary); font-size:var(--fs-xs); font-weight:800; margin-bottom:6px; }
.rv-reviews .rv-reply p{ margin:0; color:var(--rv-body); font-size:var(--fs-xs); line-height:1.75; word-break:keep-all; }

/* 지금도 쓰고 계신지 확인된 후기에 붙는 배지 */
.rv-reviews .rv-recheck{
	display:inline-flex; align-items:center; gap:4px;
	color:#0f9d6e; font-weight:700;
}
/* 도입 이력 — 작성일을 빼고 이 줄만 남겼습니다.
   "언제 쓴 글인가" 보다 "언제부터 쓰고 있는가" 가 더 중요합니다. */
.rv-reviews .rv-hist{
	display:flex; align-items:center; gap:5px;
	color:var(--rv-primary); font-size:var(--fs-xs); font-weight:700;
}
.rv-reviews .rv-recheck + .rv-hist{ margin-top:4px; }

/* ── 카드 사이 안내 ─────────────────────────────────── */
/* [2026-08-10] grid 칸 하나를 차지합니다. 아래 여백(margin-bottom)은
   그리드의 gap 이 대신하므로 뺐습니다. 버튼은 카드 바닥에 붙입니다. */
.rv-reviews .rv-ctacard{
	display:flex; flex-direction:column; align-items:flex-start;
	margin:0; padding:30px 28px;
	border-radius:var(--rv-radius);
	background:linear-gradient(135deg,var(--rv-primary),#3a8bff);
	color:#fff; box-shadow:0 14px 34px rgba(0,102,255,0.28);
}
.rv-reviews .rv-ctacard i{ font-size:var(--fs-2xl); opacity:.9; }
.rv-reviews .rv-ctacard b{ display:block; margin:14px 0 8px; font-size:var(--fs-lg); font-weight:800; }
.rv-reviews .rv-ctacard p{ margin:0 0 18px; font-size:var(--fs-base); line-height:1.7; word-break:keep-all; }
.rv-reviews .rv-ctacard a{
	display:inline-flex; align-items:center; gap:8px; margin-top:auto;
	background:#fff; color:var(--rv-primary); font-weight:800; font-size:var(--fs-xs);
	padding:11px 20px; border-radius:999px; text-decoration:none;
}
.rv-reviews .rv-ctacard a:hover{ color:var(--rv-primary); transform:translateY(-1px); }
.rv-reviews .rv-ctacard a i{ font-size:var(--fs-2xs); opacity:1; }

/* ── 후기 보내기 ────────────────────────────────────── */
.rv-reviews .rv-ask{
	max-width:820px; margin:24px auto 0; text-align:center;
	background:#fff; border:1px dashed rgba(0,102,255,0.35); border-radius:var(--rv-radius);
	padding:30px 28px;
}
.rv-reviews .rv-ask b{ display:block; color:var(--rv-ink); font-size:var(--fs-lg); font-weight:800; margin-bottom:10px; }
.rv-reviews .rv-ask p{ margin:0 0 20px; color:var(--rv-body); font-size:var(--fs-base); line-height:1.75; word-break:keep-all; }
.rv-reviews .rv-ask-btns{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }
/* 비회원 안내 한 줄 — 버튼 아래에 조용히 놓습니다.
   버튼 묶음에 바짝 붙으면 버튼의 부속처럼 보입니다. 따로 읽히도록
   위를 넉넉히 띄우고 아래에도 조금 두어 상자 안에서 숨을 줍니다.

   선택자에 p 를 붙인 까닭 : 바로 위 ".rv-reviews .rv-ask p" 규칙이
   margin:0 0 20px 를 걸고 있는데, 그쪽이 클래스 둘에 요소 하나라
   클래스만 둘인 이 규칙보다 셉니다. p 를 붙여 같은 급으로 올려야
   여백이 먹습니다. */
.rv-reviews .rv-ask p.rv-ask-foot{
	margin:30px 0 4px; color:var(--rv-muted); font-size:var(--fs-xs); line-height:1.7;
}
.rv-reviews .rv-ask p.rv-ask-foot a{ color:var(--rv-primary); font-weight:700; text-decoration:underline; }
.rv-reviews .rv-ask-btn{
	display:inline-flex; align-items:center; gap:8px;
	background:var(--rv-primary); color:#fff; font-weight:700; font-size:var(--fs-base);
	padding:12px 24px; border-radius:999px; text-decoration:none;
}
.rv-reviews .rv-ask-btn:hover{ color:#fff; }
.rv-reviews .rv-ask-alt{
	display:inline-flex; align-items:center; gap:7px;
	color:var(--rv-body); font-weight:600; font-size:var(--fs-xs); text-decoration:none;
	padding:12px 16px; border:1px solid var(--rv-border); border-radius:999px;
}
.rv-reviews .rv-ask-alt:hover{ color:var(--rv-primary); border-color:var(--rv-primary); }

/* 페이지 끝 두 블록의 간격을 맞췄습니다(44 / 34 → 48 / 24).
   입소문 지표와 후기 보내기는 같은 성격이라 서로 붙어 있는 편이
   덜 산만합니다. */
.rv-reviews .rv-wom{ margin-top:48px; }

@media (max-width:1199px){
	/* 숫자 패널이 2×2 가 되면 칸 사이 선도 따라 바뀌어야 합니다 */
	.rv-reviews .rv-figures{ grid-template-columns:repeat(2,1fr); }
	.rv-reviews .rv-fig:nth-child(2n+1){ border-left:0; }
	.rv-reviews .rv-fig:nth-child(n+3){ border-top:1px solid var(--rv-border); }
}
@media (max-width:575px){
	.rv-reviews .rv-figures{ grid-template-columns:1fr; }
	.rv-reviews .rv-fig{ border-left:0; }
	.rv-reviews .rv-fig + .rv-fig{ border-top:1px solid var(--rv-border); }
	.rv-reviews .rv-filter{ justify-content:flex-start; }
	.rv-reviews .rv-filter-label{ width:100%; margin-bottom:2px; }
	.rv-reviews .rv-ask-btns{ flex-direction:column; align-items:stretch; }
	.rv-reviews .rv-ask-btn, .rv-reviews .rv-ask-alt{ justify-content:center; }
}

/* ==================================================================
   [페이지 전용] 자주 묻는 질문
   스코프 .fq-page
   대상 : faq.php
   ------------------------------------------------------------------
   2026-08-10 새로 만들었습니다.

   [분류 고르기가 자바스크립트 없이 되는 이유]
   숨겨 둔 라디오 <input> 이 .fq-list 보다 앞에 형제로 놓여 있어서,
   "#faqcat-buy:checked ~ .fq-list .fq-item:not(.is-buy)" 같은
   선택자로 감출 수 있습니다. 고객 리뷰 페이지의 업종 필터와 같은
   방식입니다. 분류를 더하면 아래 두 묶음만 따라 늘리면 됩니다.
   ================================================================== */
.fq-page{
	--fq-primary:var(--pg-primary);
	--fq-ink:var(--pg-ink);
	--fq-body:var(--pg-body);
	--fq-muted:var(--pg-muted);
	--fq-border:rgba(16,24,40,0.08);
	--fq-radius:var(--pg-radius);
	--fq-shadow:0 10px 30px rgba(16,24,40,0.07);
	position:relative;
	padding:72px 0 96px;
}
.fq-page > .auto-container{ position:relative; z-index:1; }

/* 헤더 */
.fq-page .fq-head{ text-align:center; max-width:760px; margin:0 auto; }
.fq-page .fq-eyebrow{
	display:inline-block; color:var(--fq-primary);
	font-weight:700; letter-spacing:0.04em;
	font-size:var(--fs-lg); margin-bottom:14px;
}
.fq-page .fq-head h2{
	color:var(--fq-ink); font-weight:800;
	font-size:var(--fs-3xl); line-height:1.35; margin:0 0 18px;
}
.fq-page .fq-head p{
	color:var(--fq-body); font-size:var(--fs-base); line-height:1.8; margin:0;
	word-break:keep-all;
}

/* 분류 고르기 */
.fq-page .fq-radio{ position:absolute; width:1px; height:1px; opacity:0; }
.fq-page .fq-filter{
	display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px;
	margin:38px 0 26px;
}
.fq-page .fq-filter label{
	display:inline-flex; align-items:center; gap:7px; cursor:pointer;
	background:#fff; border:1px solid var(--fq-border); border-radius:999px;
	padding:9px 17px; margin:0;
	color:var(--fq-body); font-size:var(--fs-xs); font-weight:700;
	transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.fq-page .fq-filter label span{ color:var(--fq-muted); font-size:var(--fs-2xs); font-weight:700; }
.fq-page .fq-filter label:hover{ border-color:var(--fq-primary); color:var(--fq-primary); }

/* 고른 칩 + 그때 감출 질문 */
#faqcat-all:checked ~ .fq-filter label[for="faqcat-all"],
#faqcat-buy:checked ~ .fq-filter label[for="faqcat-buy"],
#faqcat-env:checked ~ .fq-filter label[for="faqcat-env"],
#faqcat-use:checked ~ .fq-filter label[for="faqcat-use"],
#faqcat-as:checked  ~ .fq-filter label[for="faqcat-as"]{
	background:var(--fq-primary); border-color:var(--fq-primary); color:#fff;
}
#faqcat-all:checked ~ .fq-filter label[for="faqcat-all"] span,
#faqcat-buy:checked ~ .fq-filter label[for="faqcat-buy"] span,
#faqcat-env:checked ~ .fq-filter label[for="faqcat-env"] span,
#faqcat-use:checked ~ .fq-filter label[for="faqcat-use"] span,
#faqcat-as:checked  ~ .fq-filter label[for="faqcat-as"] span{ color:rgba(255,255,255,0.82); }

#faqcat-buy:checked ~ .fq-list .fq-item:not(.is-buy),
#faqcat-env:checked ~ .fq-list .fq-item:not(.is-env),
#faqcat-use:checked ~ .fq-list .fq-item:not(.is-use),
#faqcat-as:checked  ~ .fq-list .fq-item:not(.is-as){ display:none; }

.fq-page .fq-radio:focus-visible ~ .fq-filter label[for]{ outline:2px solid var(--fq-primary); outline-offset:2px; }

/* 질문 목록 — 한 줄로 쌓습니다.
   여러 단으로 놓으면 하나를 펼칠 때 옆 단까지 밀려 시선이 흔들립니다. */
.fq-page .fq-list{
	max-width:900px; margin:0 auto;
	display:flex; flex-direction:column; gap:12px;
}
.fq-page .fq-item{
	background:#fff; border:1px solid var(--fq-border);
	border-radius:var(--fq-radius); box-shadow:var(--fq-shadow);
	transition:border-color .18s ease;
}
.fq-page .fq-item[open]{ border-color:rgba(0,102,255,0.28); }
/* 주소로 바로 들어온 질문을 잠깐 눈에 띄게 */
.fq-page .fq-item:target{ border-color:var(--fq-primary); }

.fq-page .fq-item summary{
	display:flex; align-items:center; justify-content:space-between; gap:14px;
	cursor:pointer; list-style:none;
	padding:20px 24px;
	color:var(--fq-ink); font-size:var(--fs-base); font-weight:700; line-height:1.55;
	word-break:keep-all;
}
.fq-page .fq-item summary::-webkit-details-marker{ display:none; }
.fq-page .fq-item summary:hover{ color:var(--fq-primary); }
.fq-page .fq-item summary i{
	flex:0 0 auto; color:var(--fq-primary); font-size:var(--fs-xs);
	transition:transform .18s ease;
}
.fq-page .fq-item[open] summary i{ transform:rotate(180deg); }

.fq-page .fq-a{ padding:0 24px 22px; }
.fq-page .fq-a p{
	color:var(--fq-body); font-size:var(--fs-base); line-height:1.85;
	margin:0 0 12px; word-break:keep-all;
}
.fq-page .fq-a p:last-child{ margin-bottom:0; }
/* 더 볼 페이지 — 두 개 이상 걸릴 수 있어 묶어서 흘립니다 */
.fq-page .fq-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.fq-page .fq-more{
	display:inline-flex; align-items:center; gap:8px;
	color:var(--fq-primary); font-size:var(--fs-xs); font-weight:700;
	text-decoration:none;
	padding:9px 16px; border:1px solid rgba(0,102,255,0.28); border-radius:999px;
}
.fq-page .fq-more:hover{ background:rgba(0,102,255,0.06); color:var(--fq-primary); }
.fq-page .fq-more i{ font-size:var(--fs-2xs); }

/* 못 찾으셨을 때 */
.fq-page .fq-ask{
	max-width:900px; margin:40px auto 0; text-align:center;
	background:#fff; border:1px dashed rgba(0,102,255,0.35); border-radius:var(--fq-radius);
	padding:30px 28px;
}
.fq-page .fq-ask b{ display:block; color:var(--fq-ink); font-size:var(--fs-lg); font-weight:800; margin-bottom:10px; }
.fq-page .fq-ask p{ margin:0 0 20px; color:var(--fq-body); font-size:var(--fs-base); line-height:1.75; word-break:keep-all; }
.fq-page .fq-ask-btns{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }
.fq-page .fq-ask-btn{
	display:inline-flex; align-items:center; gap:8px;
	background:var(--fq-primary); color:#fff; font-weight:700; font-size:var(--fs-base);
	padding:12px 24px; border-radius:999px; text-decoration:none;
}
.fq-page .fq-ask-btn:hover{ color:#fff; }
.fq-page .fq-ask-alt{
	display:inline-flex; align-items:center; gap:7px;
	color:var(--fq-body); font-weight:600; font-size:var(--fs-xs); text-decoration:none;
	padding:12px 16px; border:1px solid var(--fq-border); border-radius:999px;
}
.fq-page .fq-ask-alt:hover{ color:var(--fq-primary); border-color:var(--fq-primary); }

@media (max-width:767px){
	.fq-page{ padding:52px 0 72px; }
	.fq-page .fq-head h2{ font-size:var(--fs-2xl); }
	.fq-page .fq-item summary{ padding:18px 20px; }
	.fq-page .fq-a{ padding:0 20px 20px; }
}
@media (max-width:575px){
	.fq-page .fq-filter{ justify-content:flex-start; }
	.fq-page .fq-ask-btns{ flex-direction:column; align-items:stretch; }
	.fq-page .fq-ask-btn, .fq-page .fq-ask-alt{ justify-content:center; }
}

/* ==================================================================
   [페이지 전용] 견적서 문서
   스코프 .quote-doc
   대상 : mall/quotation/view_quote_form.php
   ------------------------------------------------------------------
   2026-08-04 페이지 안에 있던 <style> 8줄을 그대로 옮겼습니다.
   토큰만 :root 의 --pg- 를 참조하도록 바꿨고 규칙은 손대지 않았습니다.
   ================================================================== */
/* 견적서 문서용 보강 스타일 (scoped: .quote-doc) — 인쇄 정합성 위주 */
.quote-doc .qd-num{ text-align:right !important; font-variant-numeric:tabular-nums; white-space:nowrap; }
.quote-doc .qd-center{ text-align:center !important; }
.quote-doc .qd-total td{ font-weight:800 !important; }
.quote-doc #totalTD{ font-weight:800; font-size:1.05em; }
@media print{
	.quote-doc .qd-num, .quote-doc #totalTD{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ==================================================================
   [페이지 전용] VPP82 원격제어 엔진
   스코프 .vp-page
   대상 : vpp82.php
   ------------------------------------------------------------------
   2026-08-05 이 페이지만 구매 테마 클래스(feature-two / video-two /
   counter-four)를 그대로 쓰고 있어 다른 페이지와 결이 달랐습니다.
   홈(.hp-) · 왜 Seetrol인가(.my-) · 시스템 구성도(.sys-) 와 같은
   토큰·구성으로 다시 짰습니다. 글은 원문 그대로 옮겼습니다.
   ================================================================== */
.vp-page{
	/* 값은 :root 의 --pg- 에서 옵니다. 여기서 다시 정의하지 않습니다. */
	--vp-primary:var(--pg-primary);
	--vp-primary-dark:var(--pg-primary-dark);
	--vp-ink:var(--pg-ink);
	--vp-body:var(--pg-body);
	--vp-muted:var(--pg-muted);
	--vp-line:var(--pg-line);
	--vp-radius:var(--pg-radius);
	--vp-shadow:var(--pg-shadow);
	--vp-shadow-sm:var(--pg-shadow-sm);
}

/* 섹션 여백 통일 + 배경 밴딩 */
.vp-page .vp-section{ padding:80px 0; }
.vp-page .vp-section--tint{ background:#f5f7fb; }
/* [2026-08-06] seetrol.kr 의 같은 화면처럼 밝은 배경 + 흰 카드로 바꿨습니다.
   이전에는 남색 그라데이션 위에 흰 글씨였습니다. */
.vp-page .vp-section--dark{ background:linear-gradient(180deg,#ffffff 0%,#f5f7fb 100%); }

/* 공통 헤더 */
.vp-page .vp-head{ text-align:center; max-width:800px; margin:0 auto 50px; }
.vp-page .vp-eyebrow{
	display:inline-block; color:var(--vp-primary);
	font-weight:700; letter-spacing:0.04em;
	font-size:var(--fs-lg); margin-bottom:14px;
}
.vp-page .vp-head h2{ color:var(--vp-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 16px; line-height:1.35; word-break:keep-all; }
.vp-page .vp-head p{ color:var(--vp-body); font-size:var(--fs-base); line-height:1.8; margin:0; word-break:keep-all; }

/* 2단 블록 (좌 : 강점 목록 / 우 : 이미지) */
.vp-page .vp-block{ display:flex; flex-wrap:wrap; align-items:center; gap:56px; }
.vp-page .vp-block-body{ flex:1 1 440px; min-width:0; }
.vp-page .vp-block-media{ flex:1 1 340px; min-width:0; text-align:center; }
.vp-page .vp-block-media img{ max-width:100%; height:auto; }

.vp-page .vp-cat{
	display:inline-block; margin-bottom:18px; padding:6px 14px;
	border-radius:999px; background:rgba(0,102,255,0.10);
	color:var(--vp-primary); font-weight:700; font-size:var(--fs-xs); letter-spacing:0.02em;
}

/* 강점 카드 */
.vp-page .vp-points{ display:grid; gap:18px; }
.vp-page .vp-point{
	display:flex; gap:18px; align-items:flex-start;
	background:#fff; border:1px solid var(--vp-line); border-radius:var(--vp-radius);
	box-shadow:var(--vp-shadow-sm); padding:24px 26px;
	transition:transform .2s ease, box-shadow .2s ease;
}
.vp-page .vp-point:hover{ transform:translateY(-4px); box-shadow:var(--vp-shadow); }
.vp-page .vp-point-ico{
	flex:0 0 auto; width:54px; height:54px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(0,102,255,0.10); color:var(--vp-primary); font-size:var(--fs-xl);
}
.vp-page .vp-point-txt{ min-width:0; }
/* P2P 카드만 아이콘 세 글자(모니터-양방향화살표-모니터)를 한 칸에 넣습니다.
   상자 크기는 다른 카드와 같게 두어 본문 시작선이 어긋나지 않게 했습니다. */
.vp-page .vp-point-ico--p2p{ gap:3px; font-size:var(--fs-base); }
.vp-page .vp-point-ico--p2p .fa-left-right{ font-size:var(--fs-2xs); opacity:0.85; }
.vp-page .vp-point h4{ color:var(--vp-ink); font-weight:700; font-size:var(--fs-md); margin:0 0 10px; line-height:1.4; word-break:keep-all; }
.vp-page .vp-point p{ color:var(--vp-body); font-size:var(--fs-base); line-height:1.75; margin:0; word-break:keep-all; }

/* 영상 배너 */
.vp-page .vp-video{ position:relative; border-radius:var(--vp-radius); overflow:hidden; box-shadow:var(--vp-shadow); }
.vp-page .vp-video > img{ width:100%; display:block; filter:brightness(0.62); }
.vp-page .vp-video-overlay{
	position:absolute; inset:0; display:flex; flex-direction:column;
	align-items:center; justify-content:center; text-align:center; padding:30px; color:#fff;
}
.vp-page .vp-play{
	width:82px; height:82px; border-radius:50%; margin-bottom:20px;
	background:rgba(0,102,255,0.92); color:#fff;
	display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl);
	box-shadow:0 8px 24px rgba(0,102,255,0.5); text-decoration:none; position:relative;
	transition:transform .2s ease, background .2s ease;
}
.vp-page .vp-play::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(255,255,255,0.5); animation:vppulse 2s infinite; }
.vp-page .vp-play:hover{ transform:scale(1.08); background:var(--vp-primary); color:#fff; }
@keyframes vppulse{ 0%{ transform:scale(1); opacity:0.8; } 100%{ transform:scale(1.35); opacity:0; } }
.vp-page .vp-video-overlay h3{ color:#fff; font-weight:800; font-size:var(--fs-2xl); margin:0 0 12px; }
.vp-page .vp-video-overlay p{ color:rgba(255,255,255,0.9); font-size:var(--fs-base); line-height:1.7; max-width:640px; margin:0; word-break:keep-all; }

/* 스탯 밴드 */
/* [2026-08-06] seetrol.kr 과 같이 3칸(프레임·전송속도·해상도)입니다. */
.vp-page .vp-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.vp-page .vp-stat{
	text-align:center; padding:28px 24px;
	background:#fff; border:1px solid var(--vp-line); border-radius:var(--vp-radius);
	box-shadow:var(--vp-shadow-sm);
	transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.vp-page .vp-stat:hover{ transform:translateY(-4px); box-shadow:var(--vp-shadow); border-color:rgba(0,102,255,0.28); }
.vp-page .vp-stat-ico{
	display:grid; place-items:center;
	width:62px; height:62px; margin:0 auto 16px;
	border-radius:14px; background:rgba(0,102,255,0.10);
	color:var(--vp-primary); font-size:var(--fs-2xl); line-height:1;
}
/* [2026-08-05] 숫자와 단위(Frames/Mbps)의 높낮이가 어긋났습니다.
   odometer-theme-default.css 가 숫자 안쪽 상자에 top:-3px 를 주고
   vertical-align:middle 을 쓰기 때문에, flex 의 align-items:baseline 이
   기준으로 삼는 글자 바닥선이 실제 숫자 위치와 3px 어긋납니다.
   baseline 대신 center 로 맞추고, 그 -3px 만 되돌려 놓습니다.
   (Frames·Mbps·숫자 모두 내려쓰는 획이 없어 center 가 잘 맞습니다) */
.vp-page .vp-stat-num{
	font-weight:800; font-size:clamp(30px, 3.6vw, 44px); line-height:1.1;
	letter-spacing:-0.03em; color:var(--vp-primary);
	font-variant-numeric:tabular-nums;
	/* baseline 은 odometer 의 top:-3px 때문에 어긋납니다(아래 .odometer 규칙 참고) */
	display:flex; align-items:center; justify-content:center; gap:8px;
}
/* [2026-08-06] odometer-theme-default.css 가 .odometer 에 font-size:60px
   (479px 이하 50px)를 직접 박아 둡니다. 그래서 60·1024 만 그 크기로
   그려지고, 단위가 없는 4K 와 글자 크기가 달라 보였습니다.
   상속으로 되돌려 세 칸을 같은 크기로 맞춥니다. */
.vp-page .vp-stat-num .odometer,
.vp-page .vp-stat-num .odometer *{ font-size:inherit; font-weight:inherit; font-family:inherit; }
.vp-page .vp-stat-num .odometer{ line-height:1; position:relative; top:3px; }
/* [2026-08-06] 단위(FPS·Mbps)에는 전용 클래스를 씁니다.
   그냥 span 으로 잡으면 odometer 가 숫자를 감싸며 만드는 내부 span
   (.odometer-digit / .odometer-value …)에도 걸려, em 이 중첩될 때마다
   곱해져 숫자가 보이지 않을 만큼 작아집니다. */
/* [2026-08-06] 단위도 숫자와 같은 크기입니다. seetrol.kr 이 그렇게 하고
   있고, 크기를 줄이면 4K 처럼 단위가 없는 칸과 글자 크기가 달라 보입니다. */
.vp-page .vp-stat-num .vp-unit{ font-size:1em; font-weight:800; }
.vp-page .vp-stat-label{ margin-top:10px; color:var(--vp-body); font-size:var(--fs-base); font-weight:600; }

/* 반응형 */
@media (max-width:991px){
	.vp-page .vp-section{ padding:56px 0; }
	.vp-page .vp-block{ gap:34px; }
	.vp-page .vp-head h2{ font-size:var(--fs-2xl); }
	.vp-page .vp-video-overlay h3{ font-size:var(--fs-xl); }
	.vp-page .vp-stat-num{ font-size:var(--fs-4xl); }
}
@media (max-width:767px){
	.vp-page .vp-point{ padding:20px; gap:14px; }
	.vp-page .vp-point-ico{ width:46px; height:46px; font-size:var(--fs-lg); }
	.vp-page .vp-play{ width:64px; height:64px; font-size:var(--fs-lg); }
	.vp-page .vp-video-overlay p{ font-size:var(--fs-base); }
	.vp-page .vp-stats{ grid-template-columns:repeat(3,1fr); gap:14px; }
	.vp-page .vp-stat-num{ font-size:var(--fs-3xl); }
	.vp-page .vp-stat-num span{ font-size:var(--fs-base); }
}

/* ==================================================================
   [페이지 전용] 보상판매
   스코프 .cm-page
   대상 : mall/compensation/compensation.php
   ------------------------------------------------------------------
   2026-08-05 구매 테마 클래스(services-two / finance-three /
   service-box / sec-title-five)로 되어 있어 다른 페이지와 결이
   달랐습니다. 홈(.hp-) · 왜 Seetrol인가(.my-) 와 같은 토큰·구성으로
   다시 짰습니다. 글은 원문 그대로입니다.
   ================================================================== */
.cm-page{
	--cm-primary:var(--pg-primary);
	--cm-primary-dark:var(--pg-primary-dark);
	--cm-ink:var(--pg-ink);
	--cm-body:var(--pg-body);
	--cm-muted:var(--pg-muted);
	--cm-line:var(--pg-line);
	--cm-radius:var(--pg-radius);
	--cm-shadow:var(--pg-shadow);
	--cm-shadow-sm:var(--pg-shadow-sm);
}

.cm-page .cm-section{ padding:76px 0; }
.cm-page .cm-section--tint{ background:#f5f7fb; }

/* 공통 헤더 */
.cm-page .cm-head{ text-align:center; max-width:860px; margin:0 auto 46px; }
.cm-page .cm-eyebrow{
	display:inline-block; color:var(--cm-primary);
	font-weight:700; letter-spacing:0.04em; font-size:var(--fs-md); margin-bottom:12px;
}
.cm-page .cm-head h2{ color:var(--cm-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 16px; line-height:1.35; word-break:keep-all; }
.cm-page .cm-head p{ color:var(--cm-body); font-size:var(--fs-base); line-height:1.85; margin:0; word-break:keep-all; }

/* 맨 위 이벤트 배너 */
.cm-page .cm-banner{ display:block; max-width:100%; height:auto; margin:0 auto 34px; border-radius:var(--cm-radius); }

/* 핵심 숫자 4칸 (도입부) */
.cm-page .cm-highlights{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:940px; margin:0 auto; }
.cm-page .cm-highlight{
	background:#fff; border:1px solid var(--cm-line); border-radius:var(--cm-radius);
	box-shadow:var(--cm-shadow-sm); padding:26px 18px; text-align:center;
	transition:transform .2s ease, box-shadow .2s ease;
}
.cm-page .cm-highlight:hover{ transform:translateY(-4px); box-shadow:var(--cm-shadow); }
.cm-page .cm-highlight-ico{
	width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:rgba(0,102,255,0.10); color:var(--cm-primary); font-size:var(--fs-xl);
}
.cm-page .cm-highlight-num{ color:var(--cm-ink); font-weight:800; font-size:var(--fs-xl); line-height:1.2; }
.cm-page .cm-highlight-label{ color:var(--cm-muted); font-size:var(--fs-xs); margin-top:6px; }

/* 구형 제품 타입 선택 */
.cm-page .cm-types{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.cm-page .cm-type{
	background:#fff; border:1px solid var(--cm-line); border-radius:var(--cm-radius);
	box-shadow:var(--cm-shadow-sm); overflow:hidden; text-align:center;
	display:flex; flex-direction:column;
	transition:transform .2s ease, box-shadow .2s ease;
}
.cm-page .cm-type:hover{ transform:translateY(-4px); box-shadow:var(--cm-shadow); }
.cm-page .cm-type-img{ background:#f5f7fb; padding:16px; }
.cm-page .cm-type-img img{ width:100%; height:auto; display:block; }
.cm-page .cm-type-body{ padding:16px 14px 18px; display:flex; flex-direction:column; gap:12px; margin-top:auto; }
.cm-page .cm-type-name{ color:var(--cm-ink); font-weight:700; font-size:var(--fs-base); }
.cm-page .cm-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:7px;
	height:42px; border-radius:10px; padding:0 14px;
	background:var(--cm-primary); color:#fff; font-weight:700; font-size:var(--fs-base);
	text-decoration:none; transition:background .2s ease, transform .2s ease;
}
.cm-page .cm-btn:hover{ background:var(--cm-primary-dark); color:#fff; transform:translateY(-2px); }

/* 참여해야 하는 이유 */
.cm-page .cm-reasons{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.cm-page .cm-reason{
	background:#fff; border:1px solid var(--cm-line); border-radius:var(--cm-radius);
	box-shadow:var(--cm-shadow-sm); padding:30px 28px;
	display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center;
	transition:transform .2s ease, box-shadow .2s ease;
}
.cm-page .cm-reason:hover{ transform:translateY(-4px); box-shadow:var(--cm-shadow); }
.cm-page .cm-reason-ico{
	grid-row:1; grid-column:1;
	width:58px; height:58px; border-radius:15px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(0,102,255,0.10); color:var(--cm-primary); font-size:var(--fs-xl);
}
.cm-page .cm-reason h4{ grid-row:1; grid-column:2; margin:0; color:var(--cm-ink); font-weight:700; font-size:var(--fs-md); line-height:1.45; word-break:keep-all; }
.cm-page .cm-reason-txt{ grid-row:2; grid-column:1 / -1; margin-top:16px; }
.cm-page .cm-reason-txt p{ color:var(--cm-body); font-size:var(--fs-base); line-height:1.8; margin:0 0 8px; word-break:keep-all; }
.cm-page .cm-reason-txt p:last-child{ margin-bottom:0; }

/* 신형에서 좋아진 점 ? 번호형 목록
   [2026-08-05] 처음엔 왼쪽에 파란 세로선을 둔 카드였는데, 상자 느낌이
   부담스럽다고 하셔서 테두리를 걷어냈습니다. 큰 번호와 얇은 가로선만
   남긴 잡지 목차 형태입니다.
   번호는 CSS 카운터로 자동으로 매깁니다 ? 마크업에 숫자가 없어서
   항목을 넣거나 빼도 번호가 저절로 맞습니다. */
/* [2026-08-05] 2열 그리드였는데 행마다 높이를 맞추느라, 왼쪽 항목이 짧으면
   같은 행 오른쪽 높이에 끌려가 아래가 비었습니다. 행 개념이 없는 단(column)
   배치로 바꿔 빈 곳이 생기지 않게 했습니다. 번호는 순서 그대로입니다. */
.cm-page .cm-list{ counter-reset:cmnum; columns:2; column-gap:60px; }
.cm-page .cm-item{
	counter-increment:cmnum;
	break-inside:avoid;   /* 항목이 단 경계에서 잘리지 않게 */
	display:grid; grid-template-columns:64px 1fr; column-gap:14px;
	padding:26px 0; border-bottom:1px solid var(--cm-line);
}
.cm-page .cm-item::before{
	content:counter(cmnum,decimal-leading-zero);
	grid-row:1; grid-column:1;
	color:var(--cm-primary); opacity:0.32;
	font-weight:800; font-size:var(--fs-4xl); line-height:1.05; letter-spacing:-0.02em;
}
.cm-page .cm-item-head{ grid-row:1; grid-column:2; display:flex; align-items:center; gap:10px; min-height:34px; }
.cm-page .cm-item-head i{ flex:0 0 auto; color:var(--cm-primary); font-size:var(--fs-md); }
.cm-page .cm-item-head h4{ margin:0; color:var(--cm-ink); font-weight:700; font-size:var(--fs-md); line-height:1.45; word-break:keep-all; }
.cm-page .cm-item p{ grid-row:2; grid-column:2; color:var(--cm-body); font-size:var(--fs-base); line-height:1.8; margin:8px 0 0; word-break:keep-all; }

/* 반응형 */
@media (max-width:1199px){
	.cm-page .cm-types{ grid-template-columns:repeat(3,1fr); }
	.cm-page .cm-highlights{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:991px){
	.cm-page .cm-section{ padding:54px 0; }
	.cm-page .cm-head h2{ font-size:var(--fs-2xl); }
	.cm-page .cm-reasons{ grid-template-columns:1fr; }
	.cm-page .cm-list{ columns:1; column-gap:0; }
}
@media (max-width:575px){
	.cm-page .cm-types{ grid-template-columns:repeat(2,1fr); }
	.cm-page .cm-reason{ padding:24px 20px; }
	.cm-page .cm-reason-ico{ width:48px; height:48px; font-size:var(--fs-lg); }
}

/* ==================================================================
   [페이지 전용] 보상판매 견적 요청서
   스코프 .rg-page
   대상 : mall/compensation/register-form.php
   ------------------------------------------------------------------
   2026-08-05 구매 테마 클래스(finance-three / service-box /
   sec-title-five)로 되어 있었고, 폼이 12칸 전체 폭으로 퍼져 입력칸이
   지나치게 길었습니다. 가운데 정렬한 좁은 카드 안에 넣었습니다.
   ※ 입력칸의 id·name·onKeyup 은 그대로입니다. 페이지 아래 JS 가
     id 로만 접근하므로 마크업을 바꿔도 동작에 영향이 없습니다.
   ================================================================== */
.rg-page{
	--rg-primary:var(--pg-primary);
	--rg-primary-dark:var(--pg-primary-dark);
	--rg-ink:var(--pg-ink);
	--rg-body:var(--pg-body);
	--rg-muted:var(--pg-muted);
	--rg-line:var(--pg-line);
	--rg-radius:var(--pg-radius);
	--rg-shadow:var(--pg-shadow);
	--rg-shadow-sm:var(--pg-shadow-sm);
}

.rg-page .rg-section{ padding:70px 0 84px; background:#f5f7fb; }

/* 머리말 */
.rg-page .rg-head{ text-align:center; max-width:680px; margin:0 auto 34px; }
.rg-page .rg-eyebrow{
	display:inline-block; color:var(--rg-primary);
	font-weight:700; letter-spacing:0.04em; font-size:var(--fs-md); margin-bottom:12px;
}
.rg-page .rg-head h2{ color:var(--rg-ink); font-weight:800; font-size:var(--fs-3xl); margin:0 0 14px; line-height:1.35; word-break:keep-all; }
.rg-page .rg-head p{ color:var(--rg-body); font-size:var(--fs-base); line-height:1.8; margin:0; word-break:keep-all; }
.rg-page .rg-head p a{ color:var(--rg-primary); font-weight:700; text-decoration:none; border-bottom:1px solid rgba(0,102,255,0.35); }
.rg-page .rg-head p a:hover{ color:var(--rg-primary-dark); border-bottom-color:var(--rg-primary-dark); }

/* 폼 카드 ? 좌우 폭을 좁게 잡습니다 */
.rg-page .rg-card{
	max-width:720px; margin:0 auto;
	background:#fff; border:1px solid var(--rg-line); border-radius:var(--rg-radius);
	box-shadow:var(--rg-shadow); padding:38px 40px 34px;
}

/* 안내 문구 */
.rg-page .rg-note{
	display:flex; gap:11px; align-items:flex-start;
	background:rgba(0,102,255,0.06); border:1px solid rgba(0,102,255,0.16);
	border-radius:12px; padding:16px 18px; margin:0 0 28px;
	color:var(--rg-body); font-size:var(--fs-base); line-height:1.7; word-break:keep-all;
}
.rg-page .rg-note i{ flex:0 0 auto; margin-top:3px; color:var(--rg-primary); }
.rg-page .rg-note strong{ color:#d92b2b; font-weight:700; }

/* 입력 묶음 */
.rg-page .rg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.rg-page .rg-field{ display:flex; flex-direction:column; }
.rg-page .rg-field--full{ grid-column:1 / -1; }
.rg-page .rg-label{ margin:0 0 8px; color:var(--rg-ink); font-weight:700; font-size:var(--fs-xs); }
.rg-page .rg-req{ color:#d92b2b; margin-left:3px; }

.rg-page .form-control{
	width:100%; height:50px; padding:0 15px;
	border:1.5px solid var(--rg-line); border-radius:12px;
	background:#fbfcfe; color:var(--rg-ink); font-size:var(--fs-base); font-family:inherit;
	transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.rg-page .form-control::placeholder{ color:#b6bdc9; }
.rg-page .form-control:hover{ border-color:#d3d9e4; }
.rg-page .form-control:focus{ outline:none; border-color:var(--rg-primary); background:#fff; box-shadow:0 0 0 4px rgba(0,102,255,0.12); }
.rg-page .form-control[readonly]{ background:#f2f4f8; color:var(--rg-body); cursor:default; }
.rg-page .form-control[readonly]:hover{ border-color:var(--rg-line); }
.rg-page .form-control[readonly]:focus{ border-color:var(--rg-line); box-shadow:none; }
.rg-page .rg-help{ margin:7px 0 0; color:var(--rg-muted); font-size:var(--fs-xs); line-height:1.6; }

/* [2026-08-05] 보상 대상 제품명 옆에 해당 제품 사진을 보여 줍니다.
   사진은 register-form.php 가 itemType 으로 골라 넣습니다. */
/* [2026-08-05] 제품명과 사진을 카드 하나로 합쳤습니다.
   바깥 .rg-item 이 카드이고, 안쪽 두 요소는 테두리 없이 놓입니다.
   왼쪽에 제품명, 오른쪽에 사진입니다. */
.rg-page .rg-item{
	display:flex; align-items:center; justify-content:flex-start; gap:50px;
	background:#fbfcfe; border:1.5px solid var(--rg-line); border-radius:14px;
	padding:18px 26px; min-height:104px;
}
.rg-page .rg-item-name{
	min-width:0; color:var(--rg-ink); font-weight:800; font-size:var(--fs-lg); line-height:1.4;
}
.rg-page .rg-item-img{
	flex:0 0 auto; display:flex; align-items:center; justify-content:center;
}
.rg-page .rg-item-img img{ max-height:76px; width:auto; height:auto; display:block; }

/* 버튼 */
.rg-page .rg-actions{ margin-top:30px; padding-top:26px; border-top:1px solid var(--rg-line); display:flex; gap:12px; }
.rg-page .rg-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	height:54px; border-radius:12px; border:none; cursor:pointer;
	font-family:inherit; font-weight:800; font-size:var(--fs-base); text-decoration:none;
	transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.rg-page .rg-btn-primary{
	flex:1 1 auto; order:2;
	background:linear-gradient(135deg,var(--rg-primary),#3a8bff); color:#fff;
	box-shadow:0 10px 24px rgba(0,102,255,0.28);
}
.rg-page .rg-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,102,255,0.36); color:#fff; }
.rg-page .rg-btn-ghost{ flex:0 0 130px; order:1; background:#eef1f6; color:var(--rg-body); }
.rg-page .rg-btn-ghost:hover{ background:#e3e7ee; color:var(--rg-body); }

/* 반응형 */
@media (max-width:767px){
	.rg-page .rg-section{ padding:48px 0 60px; }
	.rg-page .rg-head h2{ font-size:var(--fs-xl); }
	.rg-page .rg-card{ padding:26px 20px 24px; }
	.rg-page .rg-grid{ grid-template-columns:1fr; }
	.rg-page .rg-item{ padding:16px 18px; gap:24px; min-height:0; }
	.rg-page .rg-item-name{ font-size:var(--fs-md); }
	.rg-page .rg-item-img img{ max-height:58px; }
	.rg-page .rg-actions{ flex-direction:column; }
	.rg-page .rg-btn-primary{ order:1; }
	.rg-page .rg-btn-ghost{ order:2; flex:0 0 48px; height:48px; }
}

/* ==================================================================
   [공용] 무료체험 플로팅 CTA — .st-float-cta
   ------------------------------------------------------------------
   [2026-08-06]

   왜 새로 만들었나
     이 파일에는 같은 버튼이 이미 다섯 벌 들어 있습니다.
       .hp-float (index)  .my-float (whyseetrol)  .pc-float (costcomparison)
       .uc-float (casestudy)  .rv-float (wepledge)
     규칙 내용은 사실상 같고 이름만 다릅니다. 여기에 페이지를 더 넣으면서
     여섯 벌을 더 복사하면 열한 벌이 됩니다. 그래서 이름 하나로 모은
     공용 클래스를 두고, 새로 넣는 페이지는 이것만 씁니다.
     기존 다섯 벌은 건드리지 않았습니다(겉모습이 같아 화면상 차이 없음).
     정리하실 때 그 다섯을 이 클래스로 바꾸시면 규칙 5벌과 스크립트 5벌이
     한꺼번에 사라집니다.

   동작을 켜는 스크립트는 common/foot.php 에 한 번만 있습니다.
   페이지에는 <a class="st-float-cta"> 만 넣으면 됩니다.

   색
     기존 다섯 벌과 같은 파란 그라데이션이되, 밝은 쪽 끝을 #3a8bff 에서
     #1f6fe4 로 조금 낮췄습니다. 그 자리에서 흰 글자 대비가 3.32:1 이라
     WCAG AA(4.5:1)에 못 미쳤습니다. 새 값은 4.72:1 이고, 진한 쪽
     #0066ff 는 4.83:1 로 원래 통과합니다. 눈으로는 거의 같습니다.
     (기존 다섯 벌은 그대로 두었습니다 — 함께 맞추시려면 말씀해 주세요)
   ================================================================== */
.st-float-cta{
	position:fixed; right:26px; top:50%; bottom:auto;
	transform:translateY(-50%) translateX(120px); z-index:9990;
	display:inline-flex; align-items:center; gap:10px;
	background:linear-gradient(135deg,#0066ff,#1f6fe4);
	color:#fff; font-weight:700; font-size:var(--fs-base);
	padding:15px 26px; border-radius:999px;
	box-shadow:0 12px 30px rgba(0,102,255,0.40);
	text-decoration:none; opacity:0; pointer-events:none;
	transition:transform .35s ease, opacity .35s ease, box-shadow .18s ease;
}
.st-float-cta.is-visible{ transform:translateY(-50%) translateX(0); opacity:1; pointer-events:auto; }
.st-float-cta:hover{ color:#fff; box-shadow:0 16px 38px rgba(0,102,255,0.5); }
.st-float-cta i{ font-size:var(--fs-base); }
@media (max-width:767px){ .st-float-cta{ right:16px; top:40%; padding:13px 22px; font-size:var(--fs-base); } }

/* 움직임을 줄이도록 설정한 이용자에게는 밀려 들어오는 동작을 뺍니다 */
@media (prefers-reduced-motion: reduce){
	.st-float-cta{ transition:opacity .2s linear; transform:translateY(-50%); }
	.st-float-cta.is-visible{ transform:translateY(-50%); }
}

/* ==================================================================
   [공용] 글자 크기 척도 — --fs-*
   ------------------------------------------------------------------
   [2026-08-06] 이 파일의 rem 글자 크기 636곳을 모두 이 척도로 바꿨습니다.
   (1단계로 whyseetrol.php 에 먼저 적용해 확인한 뒤 전체로 넓혔습니다)

   남겨 둔 것
     em 57곳    부모 크기를 따라가라고 일부러 그렇게 둔 자리입니다
                (이 파일 머리말 [원칙] 1번 참고)
     clamp 1곳  화면 너비에 따라 변하는 반응형 제목입니다
     px 1곳     아이콘 크기라 글자 척도와 상관이 없습니다

   왜 필요했나
     이 파일의 font-size 선언 636개가 서로 다른 값 62가지로 흩어져
     있었습니다. 같은 역할인데 페이지마다 크기가 달랐습니다.
       본문(-desc/-text/p)   74개 선언에 17가지 값 (0.80 ~ 1.08rem)
       설명·주석(-note/-hint) 18개 선언에 11가지 값
       버튼(-btn)             30개 선언에 11가지 값
       배지(-badge/-tag)      21개 선언에 16가지 값
     0.92 / 0.94 / 0.95 / 0.96 처럼 눈으로 구분되지 않는 값들이
     따로 관리되고 있었습니다.

   ※ 기준(1rem)에 대해 — 지금 html 에 font-size 선언이 없어
     1rem = 16px 이고, body 는 18px 입니다(global.css). 즉 아래 값들은
     본문 크기를 따라가지 않습니다. 이건 사이트 전체 글자가 한꺼번에
     커지는 변경이라 이번 작업에서는 건드리지 않았습니다.

   쓰는 법 : font-size: var(--fs-base); 처럼 역할에 맞는 것을 고릅니다.
             새 값을 직접 적지 마세요.

   [2026-08-06 시인성] 설명 문단이 작아 읽기 힘들다는 이야기가 있어
   본문 토큰만 아주 조금 올렸습니다(예로 드신 곳 : whyseetrol.php 의 .my-lead).
     --fs-base  0.95 → 0.98rem   15.2 → 15.7px   (+0.48px, 256곳)

   ※ 리드 문단만 따로 키우지 않았습니다. 같은 크기를 쓰던 것들이 함께
     움직여야 페이지 안에서 크기가 어긋나지 않습니다.
     (.my-lead 등 7곳만 --fs-md 로 올려 봤다가 되돌렸습니다 —
      그 문단만 튀어 보였습니다)

   더 키우시려면 --fs-base 한 줄만 바꾸면 256곳이 함께 움직입니다.
   되돌리려면 0.95rem 으로 두시면 됩니다.
   ================================================================== */
:root{
	--fs-2xs:  0.75rem;   /* 12.0px  배지·아주 작은 글자 */
	--fs-xs:   0.88rem;   /* 14.1px  라벨·주석 */
	--fs-base: 0.98rem;   /* 15.7px  본문 */
	--fs-md:   1.05rem;   /* 16.8px  큰 본문·강조 */
	--fs-lg:   1.2rem;    /* 19.2px  소제목 */
	--fs-xl:   1.4rem;    /* 22.4px  카드 제목 */
	--fs-2xl:  1.6rem;    /* 25.6px  섹션 제목 */
	--fs-3xl:  1.9rem;    /* 30.4px  페이지 제목 */
	--fs-4xl:  2.2rem;    /* 35.2px  대제목 */
	--fs-5xl:  2.6rem;    /* 41.6px  히어로 */
}

/* ==================================================================
   [공용] 한글 줄바꿈 — 낱말 중간에서 끊기지 않게
   ------------------------------------------------------------------
   [무엇이 문제였나]
   브라우저 기본값(word-break:normal)은 한글을 글자 단위로 끊습니다.
   "원격지원을" 이 줄 끝에서 "원격지원 / 을" 처럼 잘립니다.
   그동안은 컴포넌트마다 word-break:keep-all 을 따로 붙여 왔는데
   (main.css 131곳, style.css 35곳 등 200곳 가까이), 새 화면을 만들 때
   빠뜨리면 그 부분만 어색하게 잘렸습니다.

   [왜 body 한 줄로 되나]
   word-break 와 overflow-wrap 은 상속되는 속성입니다. body 에 주면
   페이지 전체가 물려받습니다. 개별 요소에서 이미 지정해 둔 곳은
   그쪽 값이 계속 우선하므로 기존 화면은 달라지지 않습니다.

   [overflow-wrap 을 같이 주는 이유]
   keep-all 만 주면 긴 URL 이나 긴 영문 단어가 끊을 자리를 못 찾아
   상자 밖으로 삐져나갑니다. 다른 방법이 없을 때만 끊도록 안전장치를
   겁니다. 한글 문장에는 영향이 없습니다.

   [예외를 두고 싶을 때]
     · 이 구절만은 절대 안 끊기게  →  white-space:nowrap  또는  &nbsp;
     · 여기서만 끊기게             →  <wbr>
     · 표 안 긴 값처럼 글자 단위로 끊어야  →  word-break:break-all
   ================================================================== */
body{
	word-break:keep-all;
	overflow-wrap:break-word;
}

/* 여기 감싼 것은 절대 끊기지 않습니다.

   keep-all 은 낱말 중간을 지켜 주지만, 숫자·기호와 뒤따르는 한글 사이는
   낱말 경계로 봅니다. 그래서 "80%가" 가 "80%" / "가" 로 갈라집니다.
   "5,000원" · "24시간" 처럼 숫자에 조사나 단위가 붙는 곳도 같습니다.
   그런 구절만 이 클래스로 감싸 주세요.  예) <span class="nobr">80%가</span> */
.nobr{ white-space:nowrap; }

/* ==================================================================
   [공용] 우편번호 찾기 모달        .zipmodal
   [2026-08-10] 대상 : 보상판매 주문서(compensation-pay.php),
                       일반 결제(mall/buy/shop_my_pay.php ·
                       shop_my_pay_not_login.php)

   안쪽 검색창은 카카오가 iframe 으로 그리므로 우리가 손댈 수 없습니다.
   여기서는 그 iframe 을 담을 틀만 화면과 같은 모양으로 만듭니다 —
   흰 판, 둥근 모서리, 그늘, 제목줄. 안쪽 색은 각 페이지 findZipcode()
   의 theme 값이 맡습니다.

   ※ 자리·크기(position:fixed, 가운데 정렬, z-index)와 여닫기(display)는
     각 페이지의 인라인 style / 자바스크립트가 잡습니다. CSS 가 늦게 와도
     모달이 뜨게 하려는 것이라, 여기서는 display 를 건드리지 않습니다.
   ================================================================== */
.zipmodal__dim{ backdrop-filter:blur(2px); }
.zipmodal__box{
	max-height:calc(100vh - 40px);
	display:flex; flex-direction:column;
	box-shadow:0 24px 60px rgba(11,27,58,0.35);
}
.zipmodal__head{
	flex:0 0 auto;
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:16px 18px; border-bottom:1px solid #e4e8ef;
}
.zipmodal__head b{ color:#1a1d24; font-size:1rem; font-weight:800; }
.zipmodal__head b i{ color:#0066ff; margin-right:4px; }
.zipmodal__close{
	flex:0 0 auto; width:34px; height:34px; padding:0;
	display:flex; align-items:center; justify-content:center;
	border:1px solid #e4e8ef; border-radius:9px; background:#fff;
	color:#8b93a1; font-size:1rem; cursor:pointer;
	transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.zipmodal__close:hover{ border-color:#c8d2e2; background:#f7f9fc; color:#1a1d24; }
.zipmodal__body iframe{ display:block; width:100% !important; height:100% !important; border:0; }

@media (max-width:575px){
	.zipmodal{ padding:0 !important; }
	.zipmodal__box{ max-width:none !important; max-height:100vh; height:100vh; border-radius:0 !important; }
}

/* ==================================================================
   [페이지 전용] Seetrol IO 소개        .sio-
   [2026-08-10] 대상 : seetrolio.php
   whyseetrol 의 my-* / 가격비교 pc-* 와 같은 결. 새 자산 없이 기존
   이미지만 씁니다. 색·모서리·그림자는 :root 의 --pg- 토큰을 따릅니다.
   ================================================================== */
.sio-page{
	--sio-primary:var(--pg-primary);
	--sio-ink:var(--pg-ink);
	--sio-body:var(--pg-body);
	--sio-muted:var(--pg-muted);
	--sio-line:var(--pg-line);
	--sio-radius:var(--pg-radius);
	--sio-shadow:var(--pg-shadow);
}
.sio-page .sio-section{ padding:72px 0; position:relative; }
.sio-page .sio-section--tint{ background:#f5f7fb; }
.sio-page .sio-hero{ padding-top:60px; }

/* 공통 헤더 */
.sio-page .sio-head{ text-align:center; max-width:760px; margin:0 auto 44px; }
.sio-page .sio-eyebrow-c{
	display:inline-block; color:var(--sio-primary); font-weight:700;
	letter-spacing:0.04em; font-size:var(--fs-base); margin-bottom:12px;
}
.sio-page .sio-head h2{ color:var(--sio-ink); font-weight:800; font-size:var(--fs-3xl); line-height:1.35; margin:0 0 16px; }
.sio-page .sio-head p{ color:var(--sio-body); font-size:var(--fs-base); line-height:1.8; margin:0; word-break:keep-all; }

/* 히어로 블록 */
.sio-page .sio-block{ display:flex; flex-wrap:wrap; align-items:center; gap:48px; }
.sio-page .sio-block-body{ flex:1 1 420px; min-width:300px; }
.sio-page .sio-block-media{ flex:1 1 380px; min-width:300px; }
.sio-page .sio-eyebrow{ display:inline-block; color:var(--sio-primary); font-weight:700; letter-spacing:0.04em; font-size:var(--fs-lg); margin-bottom:14px; }
.sio-page .sio-title{ color:var(--sio-ink); font-weight:800; font-size:var(--fs-3xl); line-height:1.3; margin:0 0 18px; }
.sio-page .sio-lead{ color:var(--sio-body); font-size:var(--fs-base); line-height:1.85; margin:0; word-break:keep-all; }
.sio-page .sio-lead strong{ color:var(--sio-ink); font-weight:700; }
.sio-page .sio-video{ position:relative; border-radius:var(--sio-radius); overflow:hidden; box-shadow:var(--sio-shadow); }
.sio-page .sio-video img{ width:100%; display:block; }
.sio-page .sio-play{
	position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
	width:64px; height:64px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:rgba(0,102,255,0.92); color:#fff; font-size:var(--fs-lg);
	box-shadow:0 10px 26px rgba(0,102,255,0.4); transition:transform .18s ease;
}
.sio-page .sio-play:hover{ transform:translate(-50%,-50%) scale(1.08); color:#fff; }

/* 왜 필요한가 */
.sio-page .sio-why{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.sio-page .sio-why-card{
	background:#fff; border:1px solid var(--sio-line); border-radius:var(--sio-radius);
	box-shadow:var(--sio-shadow); padding:30px 26px;
}
.sio-page .sio-why-card i{ color:var(--sio-primary); font-size:var(--fs-2xl); }
.sio-page .sio-why-card h5{ color:var(--sio-ink); font-weight:800; font-size:var(--fs-md); margin:16px 0 8px; }
.sio-page .sio-why-card p{ color:var(--sio-body); font-size:var(--fs-base); line-height:1.75; margin:0; word-break:keep-all; }

/* 동작 3단계 */
.sio-page .sio-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.sio-page .sio-step{
	background:#fff; border:1px solid var(--sio-line); border-radius:var(--sio-radius);
	box-shadow:var(--sio-shadow); padding:30px 26px; position:relative;
}
.sio-page .sio-step-num{ color:var(--sio-primary); font-weight:800; font-size:var(--fs-2xl); line-height:1; opacity:.85; }
.sio-page .sio-step h5{ color:var(--sio-ink); font-weight:800; font-size:var(--fs-md); margin:12px 0 8px; }
.sio-page .sio-step p{ color:var(--sio-body); font-size:var(--fs-base); line-height:1.75; margin:0; word-break:keep-all; }

/* 제품 그룹 */
.sio-page .sio-group{ margin-top:40px; }
.sio-page .sio-group:first-of-type{ margin-top:0; }
.sio-page .sio-group-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; }
.sio-page .sio-group-head i{
	flex:0 0 auto; width:46px; height:46px; border-radius:12px;
	display:flex; align-items:center; justify-content:center;
	background:rgba(0,102,255,0.10); color:var(--sio-primary); font-size:var(--fs-lg);
}
.sio-page .sio-group-head h3{ color:var(--sio-ink); font-weight:800; font-size:var(--fs-lg); margin:0 0 4px; }
.sio-page .sio-group-head p{ color:var(--sio-body); font-size:var(--fs-base); line-height:1.65; margin:0; word-break:keep-all; }

.sio-page .sio-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.sio-page .sio-card{
	display:flex; flex-direction:column;
	background:#fff; border:1px solid var(--sio-line); border-radius:var(--sio-radius);
	box-shadow:var(--sio-shadow); padding:24px; transition:transform .2s ease, box-shadow .2s ease;
}
.sio-page .sio-card:hover{ transform:translateY(-4px); box-shadow:var(--pg-shadow-hover, 0 18px 44px rgba(16,24,40,0.12)); }
.sio-page .sio-card-img{ height:150px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.sio-page .sio-card-img img{ max-height:150px; max-width:100%; object-fit:contain; }
.sio-page .sio-card h4{ color:var(--sio-ink); font-weight:800; font-size:var(--fs-md); margin:0 0 8px; }
.sio-page .sio-card-desc{ color:var(--sio-body); font-size:var(--fs-base); line-height:1.7; margin:0 0 14px; word-break:keep-all; }
.sio-page .sio-spec{ list-style:none; margin:0 0 18px; padding:0; }
.sio-page .sio-spec li{ position:relative; padding:5px 0 5px 18px; color:var(--sio-body); font-size:var(--fs-xs); line-height:1.5; }
.sio-page .sio-spec li::before{ content:''; position:absolute; left:2px; top:12px; width:6px; height:6px; border-radius:50%; background:var(--sio-primary); }
.sio-page .sio-card-link{
	display:inline-flex; align-items:center; gap:8px; margin-top:auto;
	color:var(--sio-primary); font-weight:700; font-size:var(--fs-xs); text-decoration:none;
	padding:11px 18px; border:1px solid rgba(0,102,255,0.28); border-radius:999px; align-self:flex-start;
}
.sio-page .sio-card-link:hover{ background:rgba(0,102,255,0.06); color:var(--sio-primary); }
.sio-page .sio-card-link i{ font-size:var(--fs-2xs); }

/* 공통 사양 */
.sio-page .sio-common{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1000px; margin:0 auto; }
.sio-page .sio-common-item{
	background:#fff; border:1px solid var(--sio-line); border-radius:14px; padding:20px 22px;
	display:flex; flex-direction:column; gap:4px;
}
.sio-page .sio-common-item i{ color:var(--sio-primary); font-size:var(--fs-lg); margin-bottom:6px; }
.sio-page .sio-common-item b{ color:var(--sio-ink); font-weight:800; font-size:var(--fs-base); }
.sio-page .sio-common-item span{ color:var(--sio-body); font-size:var(--fs-xs); line-height:1.5; }

/* 문의 */
.sio-page .sio-ask{
	max-width:820px; margin:0 auto; text-align:center;
	background:#fff; border:1px dashed rgba(0,102,255,0.35); border-radius:var(--sio-radius); padding:34px 28px;
}
.sio-page .sio-ask b{ display:block; color:var(--sio-ink); font-size:var(--fs-lg); font-weight:800; margin-bottom:10px; }
.sio-page .sio-ask p{ margin:0 0 22px; color:var(--sio-body); font-size:var(--fs-base); line-height:1.75; word-break:keep-all; }
.sio-page .sio-ask-btns{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }
.sio-page .sio-ask-btn{
	display:inline-flex; align-items:center; gap:8px;
	background:var(--sio-primary); color:#fff; font-weight:700; font-size:var(--fs-base);
	padding:13px 26px; border-radius:999px; text-decoration:none;
}
.sio-page .sio-ask-btn:hover{ color:#fff; }
.sio-page .sio-ask-alt{
	display:inline-flex; align-items:center; gap:7px;
	color:var(--sio-body); font-weight:600; font-size:var(--fs-xs); text-decoration:none;
	padding:13px 18px; border:1px solid var(--sio-line); border-radius:999px; background:#fff;
}
.sio-page .sio-ask-alt:hover{ color:var(--sio-primary); border-color:var(--sio-primary); }

@media (max-width:991px){
	.sio-page .sio-section{ padding:52px 0; }
	.sio-page .sio-why, .sio-page .sio-steps{ grid-template-columns:1fr; }
	.sio-page .sio-common{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
	.sio-page .sio-head h2, .sio-page .sio-title{ font-size:var(--fs-2xl); }
	.sio-page .sio-cards{ grid-template-columns:1fr; }
	.sio-page .sio-common{ grid-template-columns:1fr; }
	.sio-page .sio-ask-btns{ flex-direction:column; align-items:stretch; }
	.sio-page .sio-ask-btn, .sio-page .sio-ask-alt{ justify-content:center; }
}

/* ============================================================
   네이버 스마트스토어 구매평 (한두 줄짜리 짧은 후기)
   위 .rv-card 는 문단이 여러 개인 긴 후기용이라, 짧은 글을 담으면
   카드 안이 비어 보입니다. 인용 묶음 형태로 따로 둡니다.
============================================================ */
.rv-reviews .rv-shorts{ margin-top:56px; }
.rv-reviews .rv-shorts-head{ text-align:center; max-width:760px; margin:0 auto 28px; }
.rv-reviews .rv-shorts-eyebrow{
	display:inline-flex; align-items:center; gap:8px;
	background:rgba(0,102,255,0.08); color:var(--rv-primary);
	font-weight:700; font-size:var(--fs-xs); letter-spacing:.04em;
	padding:7px 15px; border-radius:999px;
}
.rv-reviews .rv-shorts-head h3{
	color:var(--rv-ink); font-weight:800; font-size:var(--fs-2xl);
	margin:14px 0 10px; line-height:1.35;
}
.rv-reviews .rv-shorts-head p{
	color:var(--rv-body); font-size:var(--fs-base); line-height:1.7;
	word-break:keep-all; margin:0;
}
/* 3칸으로 둡니다. 짧은 글 7건 + 답글이 붙어 두 칸을 쓰는 1건 = 9칸이라
   세 줄이 빈틈 없이 채워집니다. 4칸으로 두면 끝에 구멍이 남습니다. */
.rv-reviews .rv-shorts-list{
	display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
	list-style:none; margin:0; padding:0;
}
.rv-reviews .rv-short{
	display:flex; flex-direction:column;
	background:var(--rv-card); border:1px solid var(--rv-border);
	border-radius:var(--rv-radius); box-shadow:var(--rv-shadow);
	padding:22px 20px; transition:transform .2s ease, box-shadow .2s ease;
}
.rv-reviews .rv-short:hover{ transform:translateY(-4px); box-shadow:var(--rv-shadow-hover); }
/* 답글이 붙은 칸은 글이 길어 두 칸을 씁니다 */
.rv-reviews .rv-short.has-reply{ grid-column:span 2; }
.rv-reviews .rv-short-topic{
	align-self:flex-start; background:rgba(0,102,255,0.07);
	color:var(--rv-primary); font-weight:700; font-size:var(--fs-xs);
	padding:4px 11px; border-radius:999px; margin-bottom:12px;
}
.rv-reviews .rv-short blockquote{
	flex:1; margin:0; padding:0; border:0; background:none;
}
.rv-reviews .rv-short blockquote p{
	color:var(--rv-ink); font-weight:600;
	font-size:var(--fs-base); line-height:1.65; margin:0 0 6px;
	word-break:keep-all;
}
.rv-reviews .rv-short blockquote p:last-child{ margin-bottom:0; }
.rv-reviews .rv-short-reply{
	background:rgba(0,102,255,0.05); border-left:3px solid var(--rv-primary);
	border-radius:8px; padding:13px 15px; margin-top:14px;
}
.rv-reviews .rv-short-reply b{
	display:block; color:var(--rv-primary); font-weight:700;
	font-size:var(--fs-xs); margin-bottom:5px;
}
.rv-reviews .rv-short-reply p{
	color:var(--rv-body); font-size:var(--fs-xs); line-height:1.7;
	margin:0; word-break:keep-all;
}
.rv-reviews .rv-short cite{
	display:block; margin-top:16px; padding-top:13px;
	border-top:1px solid var(--rv-border);
	color:var(--rv-muted); font-style:normal;
	font-size:var(--fs-xs); letter-spacing:.02em;
}
@media (max-width:1199px){
	.rv-reviews .rv-shorts-list{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
	.rv-reviews .rv-shorts-list{ grid-template-columns:1fr; }
	.rv-reviews .rv-short.has-reply{ grid-column:auto; }
}


/* ============================================================
   상단 고정 메뉴바 반투명 유리 효과 (2026-08-14, seetrol_kr 과 동일)
   header.css 는 고정 메뉴바(.sticky-header)를 불투명 흰색으로 깔아
   둡니다. 흐림(blur)을 지원하는 브라우저에서만 배경을 65% 흰색으로
   낮춰 본문이 은은하게 비치게 합니다. 지원하지 않는 브라우저는
   불투명 흰색이 그대로 남아 가독성이 떨어지지 않습니다.

   ※ 주의: blur 는 반드시 고정 요소인 .sticky-header "자신"에게만
     걸어야 합니다. .main-header(조상)에 filter/backdrop-filter 를
     걸면 그 요소가 fixed 자손의 위치 기준이 되어, 고정 메뉴바가
     화면 밖으로 사라집니다 — seetrol_kr 에서 실제로 있었던 버그입니다.
============================================================ */
.main-header .sticky-header{
	-webkit-backdrop-filter:blur(12px);
	backdrop-filter:blur(12px);
}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
	.main-header .sticky-header{
		background-color:rgba(255,255,255,.65);
	}
}
