@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        │
   │                                                              │
   │  ※ .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 에 따로 있습니다.                  │
   │  ※ 이 파일을 고치신 뒤에는 아래 두 곳의 ?v=날짜 를 함께        │
   │    바꿔 주세요. 한쪽만 올리면 그 페이지만 옛 CSS 를 받습니다.  │
   │      common/head.php          (사이트 대부분)                 │
   │      payment/PayRequest.php   (카드결제 · head.php 를 안 씀)  │
   │    실제로 PayRequest.php 만 한동안 뒤처져 있었습니다.          │
   └──────────────────────────────────────────────────────────────┘

   [원칙]
   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:2rem;
	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:1.6rem; }
	.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:1.2rem;
	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:0.85rem;
}
.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:1.75rem; line-height:1.4; word-break:keep-all;
}
.st-result > p{
	max-width:430px; margin:0 auto;
	color:var(--st-body); font-size:0.98rem; 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:0.95rem;
}
.st-infobox h4 i{ color:var(--st-primary); font-size:0.9rem; }
.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:0.88rem; 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:0.72rem;
}
.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:1rem; 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:1.45rem; }
	.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:1.6rem;
	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:0.88rem; 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:0.72rem;
}

/* 카드 밖 하단 문의 안내 */
.st-result-foot{
	margin:18px 0 0; text-align:center;
	color:var(--st-muted); font-size:0.84rem; 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:1.7rem;
	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:1.7rem;
	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:1.7rem;
	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:1.7rem;
	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:0.88rem; 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:0.78rem; 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:0.9rem; font-weight:700;
}
.st-idchip i{ color:var(--st-primary); font-size:0.85rem; }
.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:1rem;
}
.st-next h3 i{ color:var(--st-primary); font-size:0.9rem; }
.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:0.9rem; 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:0.82rem;
}
.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:0.85rem; }

/* 주의 상자 */
.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:0.88rem; 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:0.9rem; 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:0.76rem; font-weight:800;
}

/* 결과 화면 버튼 줄 ? 구분선 없는 형태 */
.st-result-actions--plain{ padding-top:0; border-top:0; }

@media (max-width:767px){
	.st-steps li{ font-size:0.82rem; }
	.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:1.14rem; }
.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:1rem;
}
.st-card-desc{
	margin:0 0 22px; color:var(--st-muted);
	font-size:0.86rem; 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:0.92rem; 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:0.96rem; 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:0.88rem;
}
.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:0.72rem; font-weight:700; white-space:nowrap;
}
.st-tag i{ font-size:0.68rem; }
.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:1rem; 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:0.88rem;
	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:0.8rem; }
.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:0.81rem; 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:0.9rem; 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:0.83rem; 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:1.6rem; }
}
@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:0.9rem; 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:1rem; line-height:1.4;
}
.st-agree-all .st-agree-sub{
	display:block; margin-top:3px;
	color:var(--st-muted); font-weight:500; font-size:0.84rem;
}
.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:1.05rem;
}
.st-doc-head h3 i{ color:var(--st-primary); font-size:0.95rem; }
.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:0.74rem; 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:0.9rem; 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:0.95rem; 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:0.92rem; }
.st-scroll-hint{
	margin-left:auto; display:inline-flex; align-items:center; gap:6px;
	color:var(--st-muted); font-size:0.8rem;
}

/* 하단 큰 버튼 줄 (보조 + 주 버튼) */
.st-form-actions{ display:flex; gap:12px; margin-top:28px; }
.st-form-actions .st-btn{ height:56px; font-size:1.02rem; 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:1.05rem;
}
.st-fsection-title i{ color:var(--st-primary); font-size:0.95rem; }
.st-fsection-desc{
	margin:0 0 20px; color:var(--st-muted);
	font-size:0.85rem; 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:0.96rem; 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:0.9rem;
}
.st-req-mark{ color:var(--st-primary); font-weight:800; }
.st-help{ margin:7px 0 0; color:var(--st-muted); font-size:0.82rem; 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:0.9rem; }

/* 비밀번호 보기 토글 */
.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:0.82rem; 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:0.82rem; font-weight:600; }
.st-section .success-id-comment{ display:block; margin-top:7px; color:var(--st-success); font-size:0.82rem; 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:0.81rem; font-weight:600; transition:color .18s ease;
}
.st-rules li i{ font-size:0.72rem; 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:0.84rem; }
}

/* 제목 아래 설명 안의 링크 */
.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:0.8rem; font-weight:700; letter-spacing:0.06em;
	margin-bottom:22px;
}
.lg-page .lg-aside h2{
	color:#fff; font-weight:800;
	font-size:1.9rem; 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:0.96rem; 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:0.84rem; color:#fff;
}
.lg-page .lg-aside-txt strong{
	display:block; color:#fff; font-weight:700;
	font-size:0.95rem; 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:0.86rem; 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:0.84rem; 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;
}
.lg-page .lg-form-head{ margin-bottom:26px; }
.lg-page .lg-form-head h3{
	color:var(--lg-ink); font-weight:800;
	font-size:1.6rem; margin:0 0 8px;
}
.lg-page .lg-form-head p{
	color:var(--lg-muted); font-size:0.93rem; 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:0.82rem; 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:0.88rem; 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:0.84rem; 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:0.95rem; 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:0.98rem; 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:1.02rem;
	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:1.5rem; 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:1.35rem; }
	/* 좁은 화면에서 라벨 줄이 좁아지면 링크를 아래로 흘림 */
	.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:0.9rem; padding:8px 18px; border-radius:999px;
}
.sc-page .sc-head h2{ color:var(--sc-ink); font-weight:800; font-size:2rem; margin:0 0 12px; line-height:1.35; }
.sc-page .sc-head p{ color:var(--sc-body); font-size:1rem; 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:1.05rem; margin:0 0 10px; line-height:1.4; word-break:keep-all;
}
.sc-page .sc-item p{
	color:var(--sc-body); font-size:0.9rem; 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:1.05rem; 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:1.02rem; margin:0 0 8px; line-height:1.45; word-break:keep-all;
}
.sc-page .sc-alert-body p{
	color:var(--sc-body); font-size:0.91rem; 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:0.98rem; margin:0 0 14px;
}
.sc-page .sc-detail h4 i{ color:var(--sc-danger); font-size:0.9rem; }
.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:0.9rem; line-height:1.65; word-break:keep-all;
}
.sc-page .sc-detail li i{ color:var(--sc-danger); font-size:0.72rem; 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:0.98rem; margin:0 0 6px;
}
.sc-page .sc-verify h4 i{ color:var(--sc-primary); font-size:0.9rem; }
.sc-page .sc-verify p{ color:var(--sc-muted); font-size:0.86rem; 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:0.96rem; 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:0.93rem; 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:1rem; 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:0.85rem; 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:1.6rem; }
	.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:0.95rem; padding:8px 18px; border-radius:999px;
}
.mm-page .mm-head h2{ color:var(--mm-ink); font-weight:800; font-size:2rem; margin:0 0 12px; line-height:1.35; }
.mm-page .mm-head p{ color:var(--mm-body); font-size:1rem; 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:1.15rem;
	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:1rem; }

/* 섹션 구분 (기본 정보 / 본인 확인) */
.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:1rem; margin:0 0 6px;
}
.mm-page .mm-section-title i{ color:var(--mm-primary); font-size:0.9rem; }
.mm-page .mm-section-desc{ color:var(--mm-muted); font-size:0.86rem; 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:0.98rem;
}
.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:0.78rem; font-weight:600; letter-spacing:0.02em;
}
.mm-page .mm-account-txt strong{
	color:var(--mm-ink); font-weight:800; font-size:1rem;
	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:0.74rem; font-weight:700; white-space:nowrap;
}
.mm-page .mm-lock i{ font-size:0.68rem; }

/* 필드 */
.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:0.9rem; 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:0.82rem; 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:0.74rem; font-weight:700; white-space:nowrap;
}
.mm-page .mm-badge i{ font-size:0.7rem; }
.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:0.96rem; 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:0.92rem; 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:0.85rem; }

/* 비밀번호 보기 토글 */
.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:1.02rem; 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:1.02rem; margin:0 0 14px;
}
.mm-page .mm-panel h4 i{ color:var(--mm-primary); font-size:0.95rem; }
.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:0.89rem; 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:0.78rem; 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:0.92rem;
	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:0.95rem; flex:0 0 auto; }
.mm-page .mm-link .mm-link-arrow{ margin-left:auto; color:var(--mm-muted); font-size:0.8rem; }
.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:1.6rem; }
	.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:0.86rem; }
	.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:0.92rem;
	}
	body.pv .pv-head h1{ margin:0; color:var(--pv-ink); font-size:1.06rem; font-weight:800; letter-spacing:-0.01em; }
	body.pv .pv-sent{ margin:9px 0 14px; font-size:0.85rem; 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:1.32rem; 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:0.92rem; 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:0.98rem; 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:0.8rem; 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:0.78rem; 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:0.92rem;
	}
	body.pv .pv-head h1{ margin:0; color:var(--pv-ink); font-size:1.06rem; font-weight:800; letter-spacing:-0.01em; }
	body.pv .pv-sent{ margin:9px 0 14px; font-size:0.85rem; 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:1.32rem; 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:0.92rem; 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:0.98rem; 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:0.8rem; 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:0.78rem; 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:1rem; padding:9px 20px; border-radius:999px;
}
.demo-page .dm-head h2{ color:var(--dm-ink); font-weight:800; font-size:2rem; margin:0 0 12px; line-height:1.35; }
.demo-page .dm-head p{ color:var(--dm-body); font-size:1rem; 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:0.9rem;
	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:0.92rem; 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:0.82rem; 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:1.15rem;
	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:1rem; }
.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:0.9rem; 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:0.72rem; font-weight:600; letter-spacing:0;
}
.demo-page .dm-lock i{ font-size:0.68rem; }

/* 입력 (기존 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:0.96rem; 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:0.8rem; 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:0.88rem; 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:1.02rem; 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:1.02rem; margin:0 0 14px;
}
.demo-page .dm-panel h4 i{ color:var(--dm-primary); font-size:0.95rem; }
.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:2.2rem; line-height:1; margin:0 0 6px; }
.demo-page .dm-panel--accent p{ color:rgba(255,255,255,0.88); font-size:0.9rem; 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:0.89rem; 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:0.78rem;
}

/* ── 반응형 ── */
@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:1.6rem; }
	.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:1.15rem; margin-bottom:14px;
}
.nt-page .nt-head h2{ color:var(--nt-ink); font-weight:800; font-size:2rem; margin:0 0 14px; line-height:1.35; }
.nt-page .nt-head p{ color:var(--nt-body); font-size:1rem; line-height:1.8; margin:0; }

/* 건수 표시 */
.nt-page .nt-count{
	max-width:900px; margin:0 auto 14px;
	color:var(--nt-muted); font-size:0.9rem;
}
.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:1.05rem;
	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:2rem; 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:1.2rem;
	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:0.85rem; 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:0.78rem; 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:0.74rem; 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:0.72rem; 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:1.22rem;
	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:0.96rem; 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:0.85rem; 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:0.72rem; 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:0.95rem;
	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:1.6rem; }
	.nt-page .nt-item{ padding:22px 20px; gap:14px; }
	.nt-page .nt-badge{ flex-basis:44px; width:44px; height:44px; font-size:1.05rem; }
	.nt-page .nt-title{ font-size:1.08rem; }
	.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:2rem; line-height:1.35;
}
.sh-page .sh-head p{
	margin:0; color:var(--sh-muted);
	font-size:0.96rem; 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:0.9rem;
}
.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:2rem; }

/* 본문 ? 사진 칸이 흰색이 되었으므로 본문은 옅은 회색으로 나눕니다 */
.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:1.06rem; 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:0.79rem; 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:1.3rem;
}
.sh-page .sh-price span{ color:var(--sh-body); font-size:0.9rem; font-weight:600; }
.sh-page .sh-price.is-call{
	align-items:center; color:var(--sh-primary); font-size:1rem;
}
.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:0.8rem; 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:0.88rem; 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:0.78rem; 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:2rem; 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:1.6rem; }
	.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:2.4rem; }

.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:1.55rem; line-height:1.4; word-break:keep-all;
}
.it-lead{
	margin:0 0 20px; color:var(--it-body);
	font-size:0.96rem; 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:0.92rem; 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:0.92rem; 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:0.92rem; }
.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:0.94rem; 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:1.8rem; line-height:1.2; }
.it-price .it-price-won{ color:var(--it-ink); font-weight:700; font-size:1rem; }
.it-price .it-price-note{ width:100%; color:var(--it-muted); font-size:0.84rem; }
.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:0.95rem;
}
.it-price.is-call .it-call-label{ color:var(--it-body); font-size:0.92rem; font-weight:600; }
.it-price.is-call a{
	color:var(--it-primary); font-weight:800; font-size:1.25rem; 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:1rem; 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:0.84rem; 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:1.25rem; }
	.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:2rem; line-height:1.35;
}
.po-page .po-head p{ margin:0; color:var(--po-muted); font-size:0.94rem; }

/* 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:1.08rem;
}
.po-card-title i{ color:var(--po-primary); font-size:0.94rem; }
.po-card-title small{ margin-left:auto; color:var(--po-muted); font-size:0.8rem; 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:1.4rem; }
.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:1rem; line-height:1.45; word-break:keep-all;
}
.po-item-spec{ margin:0; color:var(--po-muted); font-size:0.85rem; line-height:1.6; word-break:keep-all; }
.po-item-qty{
	flex:0 0 auto; color:var(--po-body); font-size:0.9rem; 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:1rem; white-space:nowrap;
}
.po-item-price span{ font-size:0.85rem; 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:0.88rem; 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:0.94rem; 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:0.8rem; 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:0.88rem; 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:0.9rem; 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:0.92rem; font-weight:600; cursor:pointer; }
.po-sub-title{
	margin:22px 0 12px; color:var(--po-ink); font-weight:700; font-size:0.95rem;
}

/* 입금 예정일 */
.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:0.9rem; 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:0.92rem; 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:0.92rem;
}
.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:0.98rem; font-weight:800; }
.po-sum-total .po-sum-num{ color:var(--po-primary); font-size:1.7rem; font-weight:800; line-height:1.2; }
.po-sum-total .po-sum-won{ color:var(--po-primary); font-size:1rem; 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:1rem; 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:0.82rem; 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:1.6rem; }
	.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:1.7rem;
	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:1.6rem; line-height:1.4; word-break:keep-all;
}
.oc-head p{ margin:0; color:var(--oc-body); font-size:0.95rem; 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:0.9rem; 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:1.02rem;
}
.oc-deposit h3 i{ color:#cfe1ff; font-size:0.92rem; }
.oc-deposit .oc-amount{
	display:flex; align-items:baseline; gap:5px; margin-bottom:16px;
	font-weight:800; font-size:2rem; line-height:1.2;
}
.oc-deposit .oc-amount span{ font-size:1rem; 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:0.92rem;
}
.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:0.8rem; 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:0.84rem; 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:1.02rem;
}
.oc-card-title i{ color:var(--oc-primary); font-size:0.9rem; }

.oc-list{ margin:0; }
.oc-list .oc-row{
	display:flex; gap:14px; padding:11px 0; border-bottom:1px solid #eef1f6;
	font-size:0.92rem; 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:1.1rem; 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:0.98rem; 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:0.84rem; 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:1.3rem; }
	.oc-card,
	.oc-deposit{ padding:20px 18px; }
	.oc-deposit .oc-amount{ font-size:1.6rem; }
	.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:2rem; line-height:1.35;
}
.ol-page .ol-head p{ margin:0; color:var(--ol-muted); font-size:0.95rem; }

.ol-page .ol-count{ margin:0 0 14px; color:var(--ol-muted); font-size:0.9rem; }
.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:0.76rem; font-weight:600; margin-bottom:2px;
}
.ol-orderno b{
	display:block; color:var(--ol-ink);
	font-size:0.94rem; font-weight:800; word-break:break-all;
}

/* 결제 상태 */
.ol-state{
	flex:0 0 auto; padding:5px 12px; border-radius:999px;
	font-size:0.78rem; 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:1.02rem; 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:0.89rem; 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:0.98rem; }

.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:0.92rem; 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:2rem; color:#c9d2df; margin-bottom:14px; }
.ol-empty strong{ display:block; color:var(--ol-ink); font-weight:800; font-size:1.02rem; 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:0.95rem; 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:0.94rem; 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:1.6rem; }
	.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:0.8rem; font-weight:800;
}
.oc-items .oc-item-name{
	flex:1 1 auto; min-width:0; margin:0;
	color:var(--oc-ink); font-size:0.96rem; 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:0.9rem; 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:0.96rem; font-weight:800; white-space:nowrap;
}
.oc-items .oc-item-price span{ color:var(--oc-body); font-size:0.84rem; 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:0.98rem; font-weight:800; }
.oc-sum .oc-sum-num{ color:var(--oc-primary); font-size:1.5rem; font-weight:800; }
.oc-sum .oc-sum-won{ color:var(--oc-primary); font-size:0.95rem; 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:2rem; line-height:1.35;
}
.ct-page .ct-head p{ margin:0; color:var(--ct-muted); font-size:0.95rem; }
.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:1.5rem; }
.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:1.02rem; line-height:1.45; word-break:keep-all;
}
.ct-item-spec{ margin:0; color:var(--ct-muted); font-size:0.86rem; line-height:1.6; word-break:keep-all; }
.ct-item-qty{
	flex:0 0 auto; color:var(--ct-body); font-size:0.92rem; 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:1.02rem; white-space:nowrap;
}
.ct-item-price span{ color:var(--ct-body); font-size:0.86rem; 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:0.85rem; 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:2.2rem; color:#c9d2df; margin-bottom:16px; }
.ct-empty strong{ display:block; color:var(--ct-ink); font-weight:800; font-size:1.05rem; 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:1.02rem;
	display:flex; align-items:center; gap:9px;
}
.ct-sum-title i{ color:var(--ct-primary); font-size:0.9rem; }
.ct-sum-row{
	display:flex; align-items:center; justify-content:space-between;
	padding:8px 0; color:var(--ct-body); font-size:0.92rem;
}
.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:0.98rem; font-weight:800; }
.ct-sum-total .ct-sum-num{ color:var(--ct-primary); font-size:1.7rem; font-weight:800; line-height:1.2; }
.ct-sum-total .ct-sum-won{ color:var(--ct-primary); font-size:1rem; 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:1rem; 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:0.82rem; 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:1.6rem; }
	.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:0.92rem; 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:0.9rem; 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:0.85rem; 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:0.87rem !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:1.15rem; margin-bottom:14px;
}
.home-page .hp-head h2{ color:var(--hp-ink); font-weight:800; font-size:2rem; margin:0 0 16px; line-height:1.35; }
.home-page .hp-head p{ color:var(--hp-body); font-size:1rem; line-height:1.8; margin:0; }
.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; }
.home-page .hp-feat .hp-feat-tag{ color:var(--hp-primary); font-weight:600; font-size:0.82rem; margin-bottom:8px; display:block; }
.home-page .hp-feat h4{ color:var(--hp-ink); font-weight:700; font-size:1.1rem; margin:0 0 10px; line-height:1.4; }
.home-page .hp-feat p{ color:var(--hp-body); font-size:0.9rem; 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:1.6rem;
	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:1.6rem; margin:0 0 12px; }
.home-page .hp-video-overlay p{ color:rgba(255,255,255,0.9); font-size:1rem; line-height:1.7; max-width:640px; margin:0; word-break:keep-all; }

/* 스탯 밴드 */
.home-page .hp-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.home-page .hp-stat{ text-align:center; color:#fff; padding:10px; }
.home-page .hp-stat-ico{ font-size:2rem; color:#7fb0ff; margin-bottom:10px; }
/* [2026-08-05] vpp82 와 같은 문제라 함께 고칩니다 (위 .vp-stat-num 주석 참고) */
.home-page .hp-stat-num{ font-weight:800; font-size:2.6rem; line-height:1; color:#fff;
	display:flex; align-items:center; justify-content:center; gap:8px; }
.home-page .hp-stat-num .odometer{ line-height:1; position:relative; top:3px; }
.home-page .hp-stat-num span{ font-size:1.3rem; font-weight:700; }
.home-page .hp-stat-label{ color:rgba(255,255,255,0.8); font-size:0.95rem; margin-top:8px; }

/* 응대형/접속대기형 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:0.85rem; padding:5px 14px; border-radius:999px; margin-bottom:12px; }
.home-page .hp-duo-body h5{ color:var(--hp-ink); font-weight:600; font-size:1.08rem; 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:0.98rem; margin:0 0 6px; }
.home-page .hp-os-prog{ color:var(--hp-muted); font-size:0.85rem; 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:0.95rem; margin-bottom:12px; }
.home-page .hp-review h4{ margin:0 0 12px; font-size:1.12rem; 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); }
.home-page .hp-review-text{ color:var(--hp-body); font-size:0.93rem; line-height:1.75; margin:0 0 18px; text-align:justify; 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:0.9rem; }
.home-page .hp-review-date{ color:var(--hp-muted); font-size:0.8rem; margin-top:2px; }

/* 다운로드 카드 */
.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:1.05rem; 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:1rem; }

@media (max-width:991px){
	.home-page .hp-section{ padding:56px 0; }
	.home-page .hp-head h2{ font-size:1.6rem; }
	.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; }
}
@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; }
}

/* 플로팅 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:1rem;
	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:0.95rem; }
@media (max-width:767px){ .hp-float{ right:16px; top:40%; padding:13px 22px; font-size:0.95rem; } }

/* ==================================================================
   [페이지 전용] 왜 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:1.15rem; margin-bottom:14px;
}
.my-page .my-head h2{ color:var(--my-ink); font-weight:800; font-size:2rem; margin:0 0 16px; line-height:1.35; }
.my-page .my-head p{ color:var(--my-body); font-size:1rem; 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:0.82rem; 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:1.8rem; margin:0 0 14px; line-height:1.3; }
.my-page .my-lead{ color:var(--my-body); font-size:1rem; 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:1.08rem; margin:0; word-break:keep-all; }
.my-page .my-hl p{ grid-row:2; grid-column:1 / -1; color:var(--my-body); font-size:0.92rem; 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:1.9rem; }
.my-page .my-ring-cap{ color:var(--my-ink); font-weight:600; font-size:0.95rem; line-height:1.4; }
.my-page .my-ring-cap span{ display:block; color:var(--my-muted); font-size:0.82rem; 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:1.5rem;
	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:0.98rem;
	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:2.15rem;
}
/* [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:1.05rem; margin:0; word-break:keep-all; }
.my-page .my-feat p{ grid-row:2; grid-column:1 / -1; color:var(--my-body); font-size:0.92rem; 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:2.4rem; 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:1.15rem; margin:0 0 10px; }
.my-page .my-step p{ color:var(--my-body); font-size:0.94rem; 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:1.1rem; margin:0 0 8px; }
.my-page .my-io-card p{ color:var(--my-body); font-size:0.9rem; 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:1.6rem; }
	.my-page .my-name{ font-size:1.5rem; }
	.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:1rem;
			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:0.95rem; }
		@media (max-width:767px){ .my-float{ right:16px; top:40%; padding:13px 22px; font-size:0.95rem; } }

/* ==================================================================
   [페이지 전용] 시스템 구성도
   스코프 .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:1.15rem; margin-bottom:14px;
}
.sys-page .sys-head h2{ color:var(--sys-ink); font-weight:800; font-size:2rem; margin:0 0 16px; line-height:1.35; }
.sys-page .sys-head p{ color:var(--sys-body); font-size:1rem; 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;
}
.sys-page .sys-chart{
	background:#fff; border:1px solid var(--sys-line);
	border-radius:var(--sys-radius); box-shadow:var(--sys-shadow-sm);
	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 var(--sys-line);
}
.sys-page .sys-chart-title{ color:var(--sys-ink); font-weight:800; font-size:1.25rem; }
.sys-page .sys-chart-hint{ color:var(--sys-muted); font-size:0.86rem; 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;
}

/* 제품 블록(지그재그) */
.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; }

/* 카테고리 배지 */
.sys-page .sys-cat{
	display:inline-flex; align-items:center; gap:7px;
	font-weight:700; font-size:0.82rem; 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); }

.sys-page .sys-name{ color:var(--sys-ink); font-weight:800; font-size:1.85rem; margin:0 0 10px; }
.sys-page .sys-tagline{ color:var(--sys-primary); font-weight:600; font-size:1.05rem; line-height:1.6; margin:0 0 18px; }
.sys-page .sys-desc{ color:var(--sys-body); font-size:0.98rem; 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:0.94rem; 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:0.82rem;
}

/* 버튼 */
.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:0.98rem;
	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:1.6rem; }
	.sys-page .sys-name{ font-size:1.55rem; }
	.sys-page .sys-charts{ gap:26px; }
	.sys-page .sys-chart-head{ padding:16px 20px; }
	.sys-page .sys-chart-title{ font-size:1.1rem; }
	.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:1.15rem; margin-bottom:14px;
}
.uc-page .uc-head h2{ color:var(--uc-ink); font-weight:800; font-size:2rem; margin:0 0 16px; line-height:1.35; }
.uc-page .uc-head p{ color:var(--uc-body); font-size:1rem; 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:0.82rem; 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:1.8rem; margin:0 0 14px; line-height:1.3; }
.uc-page .uc-lead{ color:var(--uc-body); font-size:1rem; 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:1.05rem; margin:0 0 8px; line-height:1.4;
}
.uc-page .uc-point h5 i{ color:var(--uc-primary); font-size:0.95rem; margin-top:4px; flex:0 0 auto; }
.uc-page .uc-point p{ color:var(--uc-body); font-size:0.95rem; line-height:1.75; margin:0; text-align:justify; word-break:keep-all; }

/* 업종 아이콘 카드 */
.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:1.7rem;
}
.uc-page .uc-ind-name{ color:var(--uc-ink); font-weight:700; font-size:1.1rem; 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:1.5rem; line-height:1; }
.uc-page .uc-mv-num span{ font-size:0.95rem; font-weight:700; color:var(--uc-muted); }
.uc-page .uc-mv-label{ margin-top:6px; font-weight:600; font-size:0.9rem; }
.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:1.5rem;
	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:0.9rem; 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:1.15rem; }

/* 플로팅 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:1rem;
	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:0.95rem; }

@media (max-width:991px){
	.uc-page .uc-section{ padding:56px 0; }
	.uc-page .uc-block{ gap:34px; }
	.uc-page .uc-head h2{ font-size:1.6rem; }
	.uc-page .uc-name{ font-size:1.5rem; }
	.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:0.95rem; }
}
@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:1.15rem; margin-bottom:14px; }
.hiw-page .hiw-head h2{ color:var(--hiw-ink); font-weight:800; font-size:2rem; margin:0 0 16px; line-height:1.4; }
.hiw-page .hiw-head p{ color:var(--hiw-body); font-size:1rem; 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:1rem; 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:1.35rem; margin:0 0 4px; }
.hiw-page .hiw-card-head span{ color:var(--hiw-muted); font-size:0.92rem; 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:0.96rem; 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:0.8rem;
}
.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:0.9rem; 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:1.2rem;
	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:1.15rem; margin:0 0 12px; }
.hiw-page .hiw-step p{ color:var(--hiw-body); font-size:0.94rem; 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:0.78rem; 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:0.94rem;
}
.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:0.96rem; 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:1.6rem; }
	.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: 1.15rem;
	margin-bottom: 14px;
}
.pc-page .pc-head h2 {
	color: var(--pc-ink);
	font-weight: 800;
	font-size: 2rem;
	margin: 0 0 16px;
	line-height: 1.35;
}
.pc-page .pc-head p {
	color: var(--pc-body);
	font-size: 1rem;
	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: 0.95rem;
	margin-bottom: 10px;
}
.pc-page .pc-title {
	color: var(--pc-ink);
	font-weight: 800;
	font-size: 1.8rem;
	margin: 0 0 14px;
	line-height: 1.3;
}
.pc-page .pc-lead {
	color: var(--pc-body);
	font-size: 1rem;
	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: 1.05rem;
	margin: 0 0 8px;
}
.pc-page .pc-point h5 i {
	color: var(--pc-primary);
	font-size: 1rem;
}
.pc-page .pc-point p {
	color: var(--pc-body);
	font-size: 0.95rem;
	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: 0.78rem;
	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: 1.05rem;
	margin: 0 0 10px;
	line-height: 1.5;
}
.pc-page .pc-check-card h5 i {
	color: var(--pc-primary);
	font-size: 0.98rem;
	margin-top: 5px;
	flex: 0 0 auto;
}
.pc-page .pc-check-card p {
	color: var(--pc-body);
	font-size: 0.93rem;
	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: 1.35rem;
	line-height: 1;
}
.pc-page .pc-since-arrow {
	color: var(--pc-muted);
	font-size: 0.9rem;
}
.pc-page .pc-since-now {
	color: var(--pc-ink);
	font-weight: 800;
	font-size: 1.35rem;
	line-height: 1;
}
.pc-page .pc-since-cap {
	color: var(--pc-muted);
	font-size: 0.85rem;
	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: 2.6rem;
	line-height: 1;
	flex: 0 0 auto;
}
.pc-page .pc-stat-body strong {
	display: block;
	color: var(--pc-ink);
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 4px;
}
.pc-page .pc-stat-body span {
	color: var(--pc-body);
	font-size: 0.92rem;
	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: 0.85rem;
	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;
}
.pc-page .pc-gap-sub {
	text-align: center;
	color: var(--pc-muted);
	font-size: 0.95rem;
	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: 1.02rem;
}
.pc-page .pc-bar-name span {
	color: var(--pc-muted);
	font-weight: 500;
	font-size: 0.85rem;
	margin-left: 6px;
}
.pc-page .pc-bar-val         { font-weight: 800; font-size: 1.15rem; }
.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: 1.05rem;
}
.pc-page .pc-gap-callout strong {
	color: var(--pc-warn);
	font-size: 1.7rem;
	font-weight: 800;
}

/* ------------------------------------------------------------
   06. 10년 이용료 비교 카드
   ------------------------------------------------------------ */
.pc-page .pc-compare {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.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: 1.2rem;
	margin: 0 0 4px;
}
.pc-page .pc-vs-type {
	font-size: 0.82rem;
	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: 1.35rem;
	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: 0.78rem;
	margin-top: 4px;
}
.pc-page .pc-note {
	text-align: center;
	color: var(--pc-muted);
	font-size: 0.85rem;
	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: 0.98rem;
}
.pc-page .pc-year-val {
	color: var(--pc-warn);
	font-weight: 800;
	font-size: 1rem;
}
.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: 0.98rem;
}
.pc-page .pc-flatline i      { color: var(--pc-primary); font-size: 1.2rem; }
.pc-page .pc-flatline strong { 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: 1rem;
	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: 0.95rem; }

/* ------------------------------------------------------------
   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: 1.6rem; }
	.pc-page .pc-title      { font-size: 1.5rem; }
	.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; }
}

@media (max-width: 767px) {
	.pc-float { right: 16px; top: 40%; padding: 13px 22px; font-size: 0.95rem; }
}

@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: 2.2rem; }
}

@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:1.15rem; margin-bottom:14px;
}
.ref-page .ref-head h2{ color:var(--ref-ink); font-weight:800; font-size:2rem; margin:0 0 16px; line-height:1.35; }
.ref-page .ref-head p{ color:var(--ref-body); font-size:1rem; 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:1.02rem;
	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:0.85rem; 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:0.95rem;
}
.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:0.92rem;
}

@media (max-width:991px){ .ref-page{ padding:52px 0 70px; } .ref-page .ref-head h2{ font-size:1.6rem; } }

/* ==================================================================
   [페이지 전용] 설치방법
   스코프 .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:1.15rem; margin-bottom:14px; }
.ins-page .ins-head h2{ color:var(--ins-ink); font-weight:800; font-size:1.9rem; margin:0 0 16px; line-height:1.4; }
.ins-page .ins-head p{ color:var(--ins-body); font-size:1rem; 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:1.5rem;
}
.ins-page .ins-role h4{ color:var(--ins-ink); font-weight:800; font-size:1.2rem; margin:0 0 4px; }
.ins-page .ins-role .ins-role-tag{ color:var(--ins-primary); font-weight:600; font-size:0.88rem; display:block; margin-bottom:10px; }
.ins-page .ins-role p{ color:var(--ins-body); font-size:0.95rem; 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:1.15rem;
	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:0.95rem; 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:1.02rem;
}
.ins-page .ins-os i{ color:var(--ins-primary); font-size:1.15rem; }
.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:1.5rem; }
	.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:1.15rem; margin-bottom:14px; }
.ez-page .ez-head h2{ color:var(--ez-ink); font-weight:800; font-size:1.9rem; margin:0 0 16px; line-height:1.4; }
.ez-page .ez-head p{ color:var(--ez-body); font-size:1rem; 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:1.2rem;
	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:1.4rem; 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:0.97rem; 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:0.8rem;
}

/* 순서 리스트 (번호) */
.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:0.97rem; 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:0.82rem; 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:0.95rem; line-height:1.7; word-break:keep-all;
}
.ez-page .ez-note i{ color:var(--ez-primary); font-size:1.05rem; 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:1.5rem; }
}

/* ==================================================================
   [페이지 전용] 무료체험 안내
   스코프 .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:0.9rem; padding:8px 18px; border-radius:999px;
}
.pw-page .pw-head h2{ color:var(--pw-ink); font-weight:800; font-size:2rem; margin:0 0 12px; line-height:1.35; }
.pw-page .pw-head p{ color:var(--pw-body); font-size:1rem; 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:0.9rem; 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:0.96rem; 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:0.82rem; 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:0.86rem; line-height:1.5;
	transition:color .18s ease;
}
.pw-page .pw-rules li i{ font-size:0.72rem; 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:0.85rem; 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:1rem; 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:1.6rem; }
	.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:1.25rem;
	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:0.85rem; padding:7px 16px; border-radius:999px;
}
.rs-page .rs-card h2{
	color:var(--rs-ink); font-weight:800;
	font-size:1.75rem; line-height:1.4; margin:0 0 12px; word-break:keep-all;
}
.rs-page .rs-card p{
	color:var(--rs-body); font-size:0.98rem; 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:0.88rem; 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:1rem; 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:1.45rem; }
	.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:1.15rem; margin-bottom:14px; }
.quote-page .q-head h2{ color:var(--q-ink); font-weight:800; font-size:2rem; 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:0.95rem; 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;
}
.quote-page .q-thead, .quote-page .q-row{
	display:grid; grid-template-columns:minmax(0,2.4fr) 1.1fr 0.7fr 1.1fr; align-items:center;
}
.quote-page .q-thead{
	background:#0b1b3a; color:#fff; font-weight:700; font-size:0.92rem;
	padding:15px 24px; 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:18px 24px; border-top:1px solid var(--q-line);
	transition:background .15s ease;
}
.quote-page .q-row:hover{ background:#f7f9fc; }
.quote-page .q-name{ color:var(--q-ink); font-weight:700; font-size:1rem; }
.quote-page .q-name .q-brand{ display:block; color:var(--q-muted); font-weight:500; font-size:0.85rem; margin-top:3px; }
.quote-page .q-price{ text-align:center; color:var(--q-ink); font-weight:700; }
.quote-page .q-price span{ color:var(--q-muted); font-weight:500; font-size:0.85rem; }
.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:0.92rem; }
.quote-page .q-qty{ text-align:center; }
.quote-page .q-qty select.form-control{
	width:100%; max-width:110px; margin:0 auto; border:1px solid var(--q-line);
	border-radius:10px; height:46px; line-height:normal; padding:0 12px;
	font-size:0.95rem; 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:30px;
}
.quote-page .q-customer h3{ color:var(--q-ink); font-weight:800; font-size:1.2rem; margin:0 0 18px; display:flex; align-items:center; gap:9px; }
.quote-page .q-customer h3 i{ color:var(--q-primary); }
.quote-page .q-customer-grid{ display:grid; grid-template-columns:1.3fr 1.4fr 1.1fr auto; gap:14px; align-items:stretch; }
.quote-page .q-customer .form-control{
	width:100%; height:auto; min-height:52px; line-height:normal;
	border:1px solid var(--q-line); border-radius:12px;
	padding:14px 16px; font-size:0.97rem; 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:1rem; 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-cell-label{ display:none; }

@media (max-width:767px){
	.quote-page{ padding:50px 0 70px; }
	.quote-page .q-head h2{ font-size:1.6rem; }
	.quote-page .q-thead{ display:none; }
	.quote-page .q-row{
		grid-template-columns:1fr 1fr; gap:10px 14px; padding:18px;
	}
	.quote-page .q-name{ grid-column:1 / -1; }
	.quote-page .q-price, .quote-page .q-unit, .quote-page .q-qty{ text-align:left; }
	.quote-page .q-cell-label{ display:block; color:var(--q-muted); font-size:0.78rem; font-weight:600; margin-bottom:3px; }
	.quote-page .q-qty select.form-control{ margin:0; }
	.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:1.15rem; margin-bottom:12px;
}
.dl-page .dl-head h2{ color:var(--dl-ink); font-weight:800; font-size:2rem; margin:0 0 12px; line-height:1.35; }
.dl-page .dl-head p{ color:var(--dl-body); font-size:1rem; 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:1.35rem;
	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:0.72rem; 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:1.15rem; }

/* 본문 */
.dl-page .dl-title{
	color:var(--dl-ink); font-weight:800; font-size:1.12rem;
	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:0.92rem; line-height:1.7;
	margin:0 0 20px; word-break:keep-all; overflow-wrap:anywhere;
}

/* 버튼 (카드 하단 고정) */
.dl-page .dl-btnwrap{ margin-top:auto; }
.dl-page .dl-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	width:100%;
	background:var(--c); color:#fff; font-weight:700; font-size:0.95rem;
	padding:12px 18px; border-radius:12px; text-decoration:none;
	transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.dl-page .dl-btn:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 10px 22px color-mix(in srgb, var(--c) 32%, transparent); opacity:0.96; }

@media (max-width:767px){
	.dl-page{ padding:52px 0 68px; }
	.dl-page .dl-head h2{ font-size:1.6rem; }
	.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:1.15rem; margin-bottom:12px;
}
.dld-page .dl-head h2{ color:var(--dl-ink); font-weight:800; font-size:2rem; margin:0 0 12px; line-height:1.35; }
.dld-page .dl-head p{ color:var(--dl-body); font-size:1rem; 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:0.94rem; line-height:1.7;
}
.dld-page .dl-notice i{ color:#d98a00; font-size:1.15rem; 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:1.35rem;
	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:0.72rem; 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:1.15rem; }

/* 본문 */
.dld-page .dl-title{
	color:var(--dl-ink); font-weight:800; font-size:1.12rem;
	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:0.92rem; line-height:1.7;
	margin:0 0 20px; word-break:keep-all; overflow-wrap:anywhere;
}

/* 버튼 (카드 하단 고정) */
.dld-page .dl-btnwrap{ margin-top:auto; }
.dld-page .dl-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	width:100%;
	background:var(--c); color:#fff; font-weight:700; font-size:0.95rem;
	padding:12px 18px; border-radius:12px; text-decoration:none;
	transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.dld-page .dl-btn:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 10px 22px color-mix(in srgb, var(--c) 32%, transparent); opacity:0.96; }

@media (max-width:767px){
	.dld-page{ padding:52px 0 68px; }
	.dld-page .dl-head h2{ font-size:1.6rem; }
	.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:1.15rem;
	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:1.7rem;
	line-height:1.3;
	margin:0 0 16px;
}
.history-page .sh-history .sh-lead{
	color:var(--sh-body);
	font-size:1rem;
	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:1.05rem;
	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:2.2rem; 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:1.15rem; margin:0 0 8px; }
.history-page .sh-history .sh-kpi-text{ color:var(--sh-muted); line-height:1.65; margin:0; font-size:0.92rem; }

/* 성능 지표 바 통일 (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:0.95rem; }
.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:1.45rem; }
}

/* ==================================================================
   [페이지 전용] 고객 리뷰
   스코프 (스코프 없음 · 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 20px; }
.rv-reviews .rv-eyebrow{
	display:inline-block; color:var(--rv-primary);
	font-weight:700; letter-spacing:0.04em;
	font-size:1.15rem; margin-bottom:14px;
}
.rv-reviews .rv-head h2{
	color:var(--rv-ink); font-weight:800;
	font-size:2rem; line-height:1.35; margin:0 0 18px;
}
.rv-reviews .rv-head p{
	color:var(--rv-body); font-size:1rem; line-height:1.8; margin:0;
}
/* 요약 배지 */
.rv-reviews .rv-summary{
	display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
	margin:26px 0 50px;
}
.rv-reviews .rv-badge{
	display:inline-flex; align-items:center; gap:8px;
	background:#fff; border:1px solid var(--rv-border);
	border-radius:999px; padding:10px 20px;
	box-shadow:var(--rv-shadow);
	color:var(--rv-ink); font-weight:600; font-size:0.92rem;
}
.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; }
/* 카드 메이슨리 (컬럼) */
.rv-reviews .rv-grid{
	column-count:3;
	column-gap:26px;
}
@media (max-width:1199px){ .rv-reviews .rv-grid{ column-count:2; } }
@media (max-width:767px){ .rv-reviews .rv-grid{ column-count:1; } }
.rv-reviews .rv-card{
	break-inside:avoid;
	-webkit-column-break-inside:avoid;
	background:var(--rv-card);
	border:1px solid var(--rv-border);
	border-radius:var(--rv-radius);
	box-shadow:var(--rv-shadow);
	padding:30px 28px;
	margin:0 0 26px;
	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:1rem; letter-spacing:3px; margin-bottom:14px; }
.rv-reviews .rv-quote{
	color:var(--rv-ink); font-weight:800;
	font-size:1.18rem; 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:0.96rem; 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; }
/* 작성자 */
.rv-reviews .rv-author{
	display:flex; align-items:center; gap:12px;
	margin-top:20px; 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:1.05rem;
}
.rv-reviews .rv-author-name{ color:var(--rv-ink); font-weight:700; font-size:0.95rem; line-height:1.3; }
.rv-reviews .rv-author-date{ color:var(--rv-muted); font-size:0.82rem; 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:1rem;
	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:2.8rem; line-height:1; flex:0 0 auto;
}
.rv-reviews .rv-stat-body strong{ display:block; color:var(--rv-ink); font-weight:700; font-size:1rem; margin-bottom:4px; }
.rv-reviews .rv-stat-body span{ color:var(--rv-body); font-size:0.92rem; 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:0.85rem; 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:1rem;
	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:0.95rem; }
@media (max-width:767px){
	.rv-float{ right:16px; top:40%; padding:13px 22px; font-size:0.95rem; }
}
@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:2.3rem; }
}
@media (max-width:767px){
	.rv-reviews{ padding:52px 0 72px; }
	.rv-reviews .rv-head h2{ font-size:1.6rem; }
	.rv-reviews .rv-card{ padding:26px 22px; }
}

/* ==================================================================
   [페이지 전용] 견적서 문서
   스코프 .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; }
.vp-page .vp-section--dark{ background:linear-gradient(135deg,#0b1b3a,#0047b3); }

/* 공통 헤더 */
.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:1.15rem; margin-bottom:14px;
}
.vp-page .vp-head h2{ color:var(--vp-ink); font-weight:800; font-size:2rem; margin:0 0 16px; line-height:1.35; word-break:keep-all; }
.vp-page .vp-head p{ color:var(--vp-body); font-size:1rem; 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:0.84rem; 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:1.35rem;
}
.vp-page .vp-point-txt{ min-width:0; }
/* P2P 카드만 아이콘 세 글자(모니터-양방향화살표-모니터)를 한 칸에 넣습니다.
   상자 크기는 다른 카드와 같게 두어 본문 시작선이 어긋나지 않게 했습니다. */
.vp-page .vp-point-ico--p2p{ gap:3px; font-size:0.92rem; }
.vp-page .vp-point-ico--p2p .fa-left-right{ font-size:0.7rem; opacity:0.85; }
.vp-page .vp-point h4{ color:var(--vp-ink); font-weight:700; font-size:1.1rem; margin:0 0 10px; line-height:1.4; word-break:keep-all; }
.vp-page .vp-point p{ color:var(--vp-body); font-size:0.93rem; 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:1.6rem;
	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:1.6rem; margin:0 0 12px; }
.vp-page .vp-video-overlay p{ color:rgba(255,255,255,0.9); font-size:1rem; line-height:1.7; max-width:640px; margin:0; word-break:keep-all; }

/* 스탯 밴드 */
.vp-page .vp-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.vp-page .vp-stat{ text-align:center; color:#fff; padding:10px; }
.vp-page .vp-stat-ico{ font-size:2rem; color:#7fb0ff; margin-bottom:10px; }
/* [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:2.6rem; line-height:1; color:#fff;
	display:flex; align-items:center; justify-content:center; gap:8px;
}
.vp-page .vp-stat-num .odometer{ line-height:1; position:relative; top:3px; }
.vp-page .vp-stat-num span{ font-size:1.3rem; font-weight:700; }
.vp-page .vp-stat-label{ color:rgba(255,255,255,0.8); font-size:0.95rem; margin-top:8px; }

/* 반응형 */
@media (max-width:991px){
	.vp-page .vp-section{ padding:56px 0; }
	.vp-page .vp-block{ gap:34px; }
	.vp-page .vp-head h2{ font-size:1.65rem; }
	.vp-page .vp-video-overlay h3{ font-size:1.3rem; }
	.vp-page .vp-stat-num{ font-size:2.1rem; }
}
@media (max-width:767px){
	.vp-page .vp-point{ padding:20px; gap:14px; }
	.vp-page .vp-point-ico{ width:46px; height:46px; font-size:1.15rem; }
	.vp-page .vp-play{ width:64px; height:64px; font-size:1.25rem; }
	.vp-page .vp-video-overlay p{ font-size:0.9rem; }
	.vp-page .vp-stats{ gap:14px; }
	.vp-page .vp-stat-num{ font-size:1.8rem; }
	.vp-page .vp-stat-num span{ font-size:1rem; }
}
