/* BASIC css start */
/* ============================================================
	피시위즈 모바일 이용안내 (useinfo) — CSS 탭   2026-08-11

	★ 상품 카드 규칙은 한 줄도 적지 않았습니다.
	  카드·상품 줄의 글자 크기와 색은 header.1.css 의 「카드 v3」 가 전 화면에 걸립니다.
	  이 파일에는 「담는 칸」(상자 · 여백 · 줄 나눔) 과 이 화면만의 것만 넣습니다.

	★ 값은 전부 부품표에서 가져왔습니다. 새로 정한 값은 없습니다.
	  좌우 여백 16 · 간격 4/8/12/16/24/32 · 상자 모서리 12 + 테두리 1px #DFE3E8
	  버튼 높이 52/44/34 + 모서리 10 · 주버튼 #14181D 흰 글자 · 보조 흰 바탕 + 테두리
	  입력칸 높이 44 · 모서리 10 · 글자 13.5
	  제목 #14181D · 본문 #2B3138 · 설명 #8A9099 · 강조 #EF6253
============================================================ */

#contents .useinfo {overflow-x:hidden; max-width:100%; padding-bottom:32px;}
/* hidden 을 붙인 것은 반드시 숨깁니다 — 우리 버튼 규칙(display:flex)이 브라우저 기본을
   덮어써서, 이 한 줄이 없으면 「예비 단추」가 손님에게 보입니다 */
#contents .useinfo [hidden] {display:none !important;}

/* --- 제목 줄 : 높이 56 · 좌우 16 ------------------------------------------- */
#contents .useinfo .fw-phead {display:flex; align-items:center; justify-content:space-between;
	height:56px; box-sizing:border-box; padding:0 16px;}
#contents .useinfo .fw-ptit {margin:0; font-size:18px; font-weight:800; color:#14181D; letter-spacing:-.3px;}
#contents .useinfo .fw-psub {font-size:12.5px; color:#8A9099; text-decoration:none;}
/* 제목 아래 설명 한 줄 */
#contents .useinfo .fw-pdesc {margin:0 16px 12px; font-size:12px; line-height:1.6; color:#8A9099;}

/* --- 카드형 상자 : 표를 쓰지 않습니다. 모바일에서 표는 읽기 어렵습니다 ------ */
#contents .useinfo .fw-box {box-sizing:border-box; margin:0 16px 12px; padding:16px;
	background:#fff; border:1px solid #DFE3E8; border-radius:12px;}
#contents .useinfo .fw-boxtit {margin:0 0 12px; font-size:14px; font-weight:700; color:#14181D;}
#contents .useinfo .fw-boxtit .sm {margin-left:4px; font-size:11.5px; font-weight:400; color:#8A9099;}

/* --- 이름·값 두 칸 줄 (부품표 라벨값표) : 라벨 폭 84 고정 ------------------ */
#contents .useinfo .fw-lv {display:flex; align-items:flex-start; gap:12px; padding:5px 0;}
#contents .useinfo .fw-lv .k {flex:none; min-width:84px; font-size:13px; font-weight:400; color:#8A9099;}
#contents .useinfo .fw-lv .v {flex:1 1 auto; text-align:right; font-size:13px; font-weight:500;
	color:#14181D; word-break:break-all; line-height:1.5;}
#contents .useinfo .fw-lv .v.sub {font-weight:400; color:#8A9099;}
#contents .useinfo .fw-lv .v.red {color:#EF6253;}
#contents .useinfo .fw-lv .v.rsv {color:#8A7207;}
/* 값이 비면 줄을 감춥니다 — 감추는 판단은 JS 가 합니다 (조건문을 쓰지 않는 대신) */
#contents .useinfo .fw-lv.hide {display:none;}
/* 합계 줄만 위에 1px 선을 두고 크게 씁니다 (부품표 금액 합계표) */
#contents .useinfo .fw-lv.total {margin-top:8px; padding-top:12px; border-top:1px solid #DFE3E8;}
#contents .useinfo .fw-lv.total .k {font-size:13px; color:#14181D; font-weight:700;}
#contents .useinfo .fw-lv.total .v {font-size:18px; font-weight:800;}

/* --- 버튼 : 높이 52 / 44 / 34 · 모서리 10 · 주버튼 검정 ------------------- */
#contents .useinfo .fw-btn {box-sizing:border-box; display:flex; align-items:center; justify-content:center;
	width:100%; height:52px; margin:0; padding:0 12px;
	border:1px solid #DFE3E8; border-radius:10px; background:#fff;
	font-family:inherit; font-size:14px; font-weight:700; color:#14181D;
	text-decoration:none; -webkit-appearance:none; appearance:none; cursor:pointer;}
#contents .useinfo .fw-btn.pri {background:#14181D; border-color:#14181D; color:#fff;}
#contents .useinfo .fw-btn.h44 {height:44px; font-size:13.5px;}
#contents .useinfo .fw-mini {box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
	height:34px; padding:0 10px; border:1px solid #DFE3E8; border-radius:8px; background:#fff;
	font-family:inherit; font-size:11.5px; font-weight:500; color:#41474E;
	text-decoration:none; white-space:nowrap; -webkit-appearance:none; appearance:none; cursor:pointer;}
/* 버튼 묶음 — 사이 8 (부품표 : 버튼 사이 8 이상) */
#contents .useinfo .fw-btns {display:flex; gap:8px; margin:0 16px 12px;}
#contents .useinfo .fw-btns > * {flex:1 1 0;}
#contents .useinfo .fw-btnone {margin:0 16px 12px;}

/* --- 입력칸 : 높이 44 · 모서리 10 · 좌우 12 · 글자 13.5 ------------------- */
#contents .useinfo .fw-fld {margin:0 0 12px;}
#contents .useinfo .fw-fld:last-child {margin-bottom:0;}
#contents .useinfo .fw-flabel {display:block; margin:0 0 4px; font-size:12px; font-weight:700; color:#14181D;}
#contents .useinfo .fw-flabel .req {color:#EF6253;}
#contents .useinfo .fw-fld input[type=text],
#contents .useinfo .fw-fld input[type=password],
#contents .useinfo .fw-fld input[type=tel],
#contents .useinfo .fw-fld input[type=email],
#contents .useinfo .fw-fld input[type=number],
#contents .useinfo .fw-fld input:not([type]),
#contents .useinfo .fw-fld select {box-sizing:border-box; width:100%; height:44px; padding:0 12px; margin:0;
	border:1px solid #DFE3E8; border-radius:10px; background:#fff;
	font-family:inherit; font-size:13.5px; color:#14181D; -webkit-appearance:none; appearance:none;}
#contents .useinfo .fw-fld textarea {box-sizing:border-box; width:100%; height:110px; padding:12px; margin:0;
	border:1px solid #DFE3E8; border-radius:10px; background:#fff;
	font-family:inherit; font-size:13.5px; line-height:1.5; color:#14181D; resize:none;}
#contents .useinfo .fw-fld input[type=file] {font-size:12px; color:#41474E;}
#contents .useinfo .fw-help {margin:4px 0 0; font-size:10.5px; line-height:1.5; color:#9AA0A8;}
/* 입력칸 + 옆 버튼 — 칸 사이 8 · 버튼만 고정폭 96 */
#contents .useinfo .fw-side {display:flex; gap:8px; align-items:center;}
#contents .useinfo .fw-side > :first-child {flex:1 1 auto; min-width:0;}
#contents .useinfo .fw-side .fw-mini {flex:none; width:96px; height:44px; border-radius:10px; font-size:13px;}
/* 두 칸 한 줄 — 모바일은 두 칸까지 */
#contents .useinfo .fw-two {display:flex; gap:8px; align-items:center;}
#contents .useinfo .fw-two > * {flex:1 1 0; min-width:0;}
#contents .useinfo .fw-two .tilde {flex:none; font-size:13px; color:#8A9099;}
/* 체크·라디오 18 · 글자까지 눌러도 켜진다 · 누르는 자리 44 */
#contents .useinfo .fw-chk {display:flex; align-items:flex-start; gap:8px; min-height:44px; padding:11px 0;
	box-sizing:border-box; font-size:13px; line-height:1.6; color:#14181D;}
#contents .useinfo .fw-chk input {width:18px; height:18px; margin:1px 0 0; flex:none;}

/* --- 알림상자 3종 : 모서리 10 · 안쪽 12 (부품표) -------------------------- */
#contents .useinfo .fw-note {margin:0 16px 12px; padding:12px; border-radius:10px;
	background:#F7F8FA; font-size:11.5px; line-height:1.6; color:#14181D;}
#contents .useinfo .fw-note.warn {background:#FDEFEE; color:#EF6253;}
#contents .useinfo .fw-note.done {background:#F2F7F4; color:#2E7D5B;}
#contents .useinfo .fw-note p {margin:0;}
#contents .useinfo .fw-note p + p {margin-top:4px;}

/* --- 빈 화면 --------------------------------------------------------------- */
#contents .useinfo .none-data {padding:60px 16px; text-align:center; white-space:pre-line;
	font-size:13px; line-height:1.7; color:#A8ADB3;}

/* --- 접기(아코디언) : 줄 높이 52 · 제목 13.5 · 아래 1px 선 (부품표) -------
   details/summary 를 쓰지 않는 이유 — 브라우저가 제 삼각형을 그려서 부품표와 어긋납니다.
   그래서 div + JS 로 만들고 화살표도 우리 글자(›)를 돌려 씁니다. */
#contents .useinfo .fw-acc {margin:0 16px 16px; background:#fff; border:1px solid #DFE3E8; border-radius:12px; overflow:hidden;}
#contents .useinfo .fw-acci + .fw-acci {border-top:1px solid #DFE3E8;}
#contents .useinfo .fw-acch {box-sizing:border-box; display:flex; align-items:center; justify-content:space-between;
	width:100%; min-height:52px; padding:12px 16px; background:#fff; border:0;
	font-family:inherit; font-size:13.5px; font-weight:500; color:#14181D; text-align:left;
	text-decoration:none; cursor:pointer; -webkit-appearance:none; appearance:none;}
#contents .useinfo .fw-acch .t {flex:1 1 auto; padding-right:12px; line-height:1.5;}
#contents .useinfo .fw-acch .ar {flex:none; font-size:16px; line-height:1; color:#B3B9C0;
	transform:rotate(90deg); transition:transform .18s ease;}
#contents .useinfo .fw-acci.on .fw-acch {font-weight:700;}
#contents .useinfo .fw-acci.on .fw-acch .ar {transform:rotate(-90deg);}
#contents .useinfo .fw-accb {display:none; padding:0 16px 12px; font-size:11.5px; line-height:1.7; color:#8A9099;}
#contents .useinfo .fw-acci.on .fw-accb {display:block;}
#contents .useinfo .fw-accb p {margin:0 0 4px;}
#contents .useinfo .fw-accb p:last-child {margin-bottom:0;}
#contents .useinfo .fw-accb .fw-lv .v {font-weight:500; color:#2B3138;}
/* 접기 안에 들어가는 번호 목록 (주문 방법 01 02 03) */
#contents .useinfo .fw-steps {margin:0; padding:0; list-style:none;}
#contents .useinfo .fw-steps li {display:flex; gap:8px; padding:4px 0;}
#contents .useinfo .fw-steps .no {flex:none; width:20px; font-size:11.5px; font-weight:700; color:#14181D;}
#contents .useinfo .fw-steps .tx {flex:1 1 auto; font-size:11.5px; line-height:1.7; color:#2B3138;}
#contents .useinfo .fw-steps .tx b {font-weight:700; color:#14181D;}
/* 긴 글(약관 전문)이 통째로 들어오는 자리 */
#contents .useinfo .fw-long {margin:0; font-size:11.5px; line-height:1.8; color:#2B3138; white-space:pre-wrap; word-break:break-all;}
#contents .useinfo .fw-long:empty {display:none;}

/* --- 메뉴 이동 줄 : 높이 52 · 글자 14 · 오른쪽 화살표 (부품표) ------------- */
#contents .useinfo .fw-menu {margin:0 16px 16px; background:#fff; border:1px solid #DFE3E8; border-radius:12px; overflow:hidden;}
#contents .useinfo .fw-mrow {box-sizing:border-box; display:flex; align-items:center; min-height:52px; padding:12px 16px;
	font-size:14px; font-weight:500; color:#14181D; text-decoration:none;}
#contents .useinfo .fw-mrow + .fw-mrow {border-top:1px solid #DFE3E8;}
#contents .useinfo .fw-mrow .t {flex:1 1 auto;}
#contents .useinfo .fw-mrow .n {flex:none; margin-right:12px; font-size:12px; font-weight:400; color:#8A9099;}
#contents .useinfo .fw-mrow .ar {flex:none; font-size:15px; line-height:1; color:#B3B9C0;}

/* 접기 안의 이름·값 줄은 좁은 화면이라 라벨 폭을 72 로 씁니다 (부품표 84 의 모바일 조정) */
#contents .useinfo .fw-accb .fw-lv .k {min-width:72px;}
#contents .useinfo .fw-accb .fw-lv .v {text-align:left; font-size:12px;}
#contents .useinfo .fw-accb .fw-lv .v .sub {color:#8A9099;}
#contents .useinfo .fw-slead {margin:0 0 8px; font-size:13px; font-weight:700; color:#14181D;}
/* 지도 단추 두 개 — 높이 34 · 사이 8 */
#contents .useinfo .fw-mbtns {display:flex; gap:8px; margin-top:12px;}
#contents .useinfo .fw-mbtns .fw-mini {flex:1 1 0;}
#contents .useinfo .fw-accb .fw-n {font-style:normal; font-weight:700; color:#14181D;}

/* BASIC css end */