@charset "utf-8";

/*
  Project _ CSS Init
  FileName _ policy.css - (개인정보/이메일 영역)
  Author _ 쮸양~★
  Date _ 2026. 02. 08
  Last _ 
*/

/* ══════════════════════════════════════════
			디자인 토큰
══════════════════════════════════════════ */
:root {
	/* 개인정보영역 */
	--green:       #2d6a4f;
	--green-mid:   #40916c;
	--green-light: #d8f3dc; 
	--green-pale:  #f0faf2; 
	--ink:         #1a1f1c; 
	--ink2:        #3d4740; 
	--ink3:        #6b7570; 
	--line:        #dde5e0; 
	--line-light:  #eef3ef; 
	--bg:          #f7faf8; 
	--white:       #ffffff; 
	--r:           10px; 
	--ease:        cubic-bezier(.22,1,.36,1);
	
	/* 이메일 */
	--moss:        #2d5a27;
	--fern:        #4a7c3f;
	--sage:        #7aab6d;
	--mint-light:  #d4edcc;
	--cream:       #f5f0e8;
	--linen:       #ede8dc;
	--bark:        #8b6f47;
	--sand:        #c4a882;
	--earth:       #6b4c2a;
	--leaf-yellow: #b5c44a;
	--text-dark:   #1e2d1a;
	--text-body:   #3d4f38;
	--text-muted:  #7a8f74;
	--border:      #c8d8bc;
	--bg-shell:    #e8e3d8;
}

.policy-container {}

/* ══════════════════════════════════════════
			히어로 배너
══════════════════════════════════════════ */
.hero {background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%); padding: 52px 24px 48px; text-align: center; position: relative; overflow: hidden;}
.hero::before {content: ''; position: absolute; inset: 0; background-image:
      radial-gradient(circle at 20% 50%, rgba(255,255,255,.07) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255,255,255,.05) 0%, transparent 40%); pointer-events: none;}
/* 장식 원 */
.hero::after {content: ''; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border: 40px solid rgba(255,255,255,.06); border-radius: 50%; pointer-events: none;}
.hero-inner { position: relative; max-width: var(--w-page); margin: 0 auto;}
.hero-eyebrow {display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 14px;}
.hero-eyebrow span { display: inline-block; width: 20px; height: 1px; background: rgba(255,255,255,.5);}
.hero h1 { font-size: clamp(24px, 4vw, 34px); font-weight: 600; color: #fff; line-height: 1.25; letter-spacing: -.3px; margin-bottom: 12px;}
.hero-sub {font-size:18px; color: rgba(255,255,255,.75); max-width: 480px; margin: 0 auto; line-height: 1.7;}
.hero-date {display: inline-block; margin-top: 20px; font-size: 12px; color: rgba(255,255,255,.6); background: rgba(255,255,255,.12); padding: 5px 16px; border-radius: 100px; letter-spacing: .05em;}

/* ══════════════════════════════════════════
			탭 내비
══════════════════════════════════════════ */
.tab-outer {background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top:110px; z-index:1;}
.tab-nav {margin: 0 auto; padding: 0 24px; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; justify-content:center;}
.tab-nav::-webkit-scrollbar { display: none;}
.tab-btn {flex: 0 0 auto; padding: 16px 22px; font-family: var(--f-sans); font-size:18px; font-weight: 600; color: var(--ink3); background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; transition: color .18s, border-color .18s; display: flex; align-items: center; gap: 7px;}
.tab-btn:hover { color: var(--green-mid);}
.tab-btn.is-active {color: var(--green); border-bottom-color: var(--green);}
.tab-btn .tab-ico {width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; flex-shrink: 0;}

/* ══════════════════════════════════════════
     본문 레이아웃
══════════════════════════════════════════ */
.page-body {max-width:1400px; margin: 0 auto; padding: 40px 24px 100px;}

@media (max-width: 640px) {
	.page-body { padding: 24px 16px 80px;}
}

/* 탭 패널 */
.email-panel { display: none; animation: fadeIn .3s var(--ease);}
.email-panel.is-active { display: block;}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px);}
	to { opacity: 1; transform: none;}
}

/* ══════════════════════════════════════════
     콘텐츠 카드
══════════════════════════════════════════ */
.policy-card {background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 40px 44px; box-shadow: 0 1px 8px rgba(0,0,0,.04);}

@media (max-width: 640px) {
	.policy-card { padding: 24px 20px;}
}

/* 카드 헤더 */
.policy-card-head {padding-bottom: 28px; margin-bottom: 32px; border-bottom: 1px solid var(--line);}
.policy-card-eyebrow {font-size: 10.5px; font-weight:600; letter-spacing: .22em; text-transform: uppercase; color: var(--green-mid); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;}
.policy-card-eyebrow::before {content: ''; display: block; width: 16px; height: 2px; background: var(--green-mid); border-radius: 1px;}
.policy-card-title { font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -.2px; line-height: 1.3; margin-bottom: 10px;}
.policy-card-desc {font-size:18px; color: var(--ink3); line-height: 1.75;}

/* ══════════════════════════════════════════
     약관 타이포 스타일
══════════════════════════════════════════ */
.policy-body { font-size:18px; color: var(--ink2); line-height: 1.88;}
.policy-body p { margin-bottom: 14px;}
.policy-body p:last-child { margin-bottom: 0;}

/* h2 — 대분류 (서비스 이용약관) */
.policy-body > h2, .policy-body .sec-h2 { font-size: 19px; font-weight: 600; color: var(--ink); margin: 36px 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--green-light); display: flex; align-items: center; gap: 10px; line-height: 1.3;}
.policy-body > h2:first-child { margin-top: 0;}

/* h3 — 조항 */
.policy-body h3 {font-size: 18px; font-weight:600; color: var(--green); margin: 28px 0 10px; padding: 9px 16px; background: var(--green-pale); border-left: 3px solid var(--green-mid); border-radius: 0 6px 6px 0; line-height: 1.4;}

/* h4 — 장 */
.policy-body h4 {font-size: 17px; font-weight: 600; color: var(--ink); margin: 36px 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); line-height: 1.3;}
.policy-body h4:first-child { margin-top: 0;}

/* h5 — 조 */
.policy-body h5 {font-size: 18px; font-weight:600; color: var(--green); margin: 28px 0 10px; padding: 9px 16px; background: var(--green-pale); border-left: 3px solid var(--green-mid); border-radius: 0 6px 6px 0; line-height: 1.4;}
.policy-body h5:first-child { margin-top: 0;}

/* h6 — 소항목 */
.policy-body h6 {font-size:18px; font-weight:600; color: var(--ink); margin: 22px 0 8px; line-height: 1.4;}

/* ol / ul */
.policy-body ol,
.policy-body ul {padding-left: 0; margin: 10px 0 16px; display: flex; flex-direction: column; gap: 6px;}
.policy-body > ol { list-style: none; counter-reset: pol-ol;}
.policy-body > ol > li,
.policy-body ol > li {counter-increment: pol-ol; display: flex; gap: 10px; flex-wrap:wrap; font-size:16px; color: var(--ink2); line-height: 1.8;}
.policy-body ol > li::before {content: counter(pol-ol) "."; color: var(--green-mid); font-weight:600; min-width: 20px; flex-shrink: 0; padding-top: 1px;}
.policy-body ul { list-style: none; width:100%;}
.policy-body ul li {display: flex; gap: 10px; font-size:18px; color: var(--ink2); line-height: 1.8;}
.policy-body ul li::before {content: '—'; color: var(--green-mid); font-weight:600; flex-shrink: 0; padding-top: 1px;}
/* 중첩 리스트 */
.policy-body li ol,
.policy-body li ul { margin: 8px 0 0 20px;}
.policy-body li ol { counter-reset: pol-inner;}
.policy-body li ol li { counter-increment: pol-inner;}
.policy-body li ol li::before { content: counter(pol-inner, lower-alpha) ")";}

/* 부칙 */
.policy-body .addendum {margin-top: 28px; padding: 14px 20px; background: var(--green-pale); border: 1px solid var(--green-light); border-radius: 8px; font-size: 13px; color: var(--ink3);}

/* ══════════════════════════════════════════
     테이블
══════════════════════════════════════════ */
.policy-table-wrap {overflow-x: auto; margin: 16px 0 24px; border-radius: 8px; border: 1px solid var(--line);}
.policy-table {width: 100%; border-collapse: collapse;}
.policy-table thead tr { background: var(--green);}
.policy-table thead th {padding: 12px 16px; font-size:15px; color: #fff; font-weight: 600; text-align: center; white-space: nowrap; border-right: 1px solid rgba(255,255,255,.15);}
.policy-table thead th:last-child { border-right: none;}
.policy-table tbody tr { border-bottom: 1px solid var(--line-light);}
.policy-table tbody tr:last-child { border-bottom: none;}
.policy-table tbody tr:nth-child(even) { background: var(--bg);}
.policy-table tbody tr:hover { background: var(--green-pale);}
.policy-table tbody td {
	  font-size:15px; padding: 11px 16px; color: var(--ink2); vertical-align: top; border-right: 1px solid var(--line-light); line-height: 1.65;}
.policy-table tbody td:last-child { border-right: none;}
.policy-table tbody td.first {font-weight:600; color: var(--ink); background: rgba(45,106,79,.04); white-space: nowrap;}

/* ══════════════════════════════════════════
     목차 내비 (개인정보처리방침)
══════════════════════════════════════════ */
.toc-box {background: var(--green-pale); border: 1px solid var(--green-light); border-radius: 8px; padding: 20px 24px; margin-bottom: 28px;}
.toc-box-title {font-size: 18px; font-weight:600; letter-spacing: .1em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; display: flex; align-items: center; gap: 6px;}
.toc-box-title svg { width: 14px; height: 14px; stroke: var(--green); fill: none; stroke-width: 2;}
.toc-ol {display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; list-style: none; counter-reset: toc-c;}
.toc-ol li {counter-increment: toc-c; display: flex; gap: 6px; font-size: 12.5px; color: var(--ink3); line-height: 1.6;}
.toc-ol li::before {content: counter(toc-c) "."; color: var(--green-mid); font-weight:600; flex-shrink: 0; min-width: 18px;}

/* ══════════════════════════════════════════
     담당자 카드 (청소년보호정책)
══════════════════════════════════════════ */
.contact-card {display: flex; flex-wrap: wrap; gap: 8px 24px; background: var(--green-pale); border: 1px solid var(--green-light); border-radius: 8px; padding: 20px 24px; margin-top: 16px; font-size:18px;}
.contact-card__item { display: flex; gap: 8px;}
.contact-card__label { font-weight:600; color: var(--green); min-width: 48px;}
.contact-card__value { color: var(--ink2);}


/* ── 뷰어 헤더 ── */
.viewer-header {background: var(--moss); padding: 15px 32px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; position: sticky; top: 0; z-index: 100; border-bottom: 3px solid var(--fern);}
.viewer-brand {display: flex; align-items: center; gap: 10px;}
.vb-leaf {width: 34px; height: 34px; background: rgba(255,255,255,0.15); border-radius: 50% 10px 50% 10px; display: flex; align-items: center; justify-content: center;}
.vb-leaf svg {width: 18px; height: 18px; color: #fff;}
.vb-name { font-size: 16px; color: #fff;}
.vb-name em {font-style: italic; color: #b8e0a8;}
.vb-sub {font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 1px;}
.tab-group {display: flex; gap: 6px; flex-wrap: wrap;}

.email-tab-btn {padding: 7px 16px; border: 1.5px solid rgba(255,255,255,0.25); border-radius: 24px; background: transparent; color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 500; font-family: var(--font-sans); cursor: pointer; transition: all 0.2s;}
.email-tab-btn:hover {background: rgba(255,255,255,0.12); color: #fff;}
.email-tab-btn.active {background: var(--leaf-yellow); border-color: var(--leaf-yellow); color: var(--text-dark); font-weight: 700;}
.email-tab-btn:focus-visible {outline: 2px solid #b8e0a8; outline-offset: 2px;}

.viewer-body {padding: 36px 24px 64px; display: flex; justify-content: center;}
.email-panel {display: none; width: 100%; max-width:800px; margin:0px auto; animation: rise 0.28s ease;}
.email-panel.active {display: block;}

@keyframes rise {
	from {opacity: 0; transform: translateY(10px);} to {opacity: 1; transform: none;}
}

/* 복사 버튼 */
.code-actions {margin-bottom: 12px; display: flex; justify-content: flex-end;}
.btn-copy {display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; background: var(--moss); color: #fff; border: none; border-radius: 20px; font-size: 12px; font-weight: 700; font-family: var(--font-sans); cursor: pointer; transition: background 0.18s;}
.btn-copy:hover {background: var(--fern);}
.btn-copy.copied {background: var(--leaf-yellow); color: var(--text-dark);}
.btn-copy:focus-visible {outline: 2px solid var(--fern); outline-offset: 2px;}

/* ── 이메일 공통 ── */
.email-shell {background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 0 var(--border), 0 8px 36px rgba(45,90,39,0.13); border: 1px solid var(--border);}
.em {font-family: var(--font-sans); color: var(--text-body); font-size: 14px; line-height: 1.75;}
.em a {text-decoration: none;}
.em-inner {}

/* ── 공통 푸터 ── */
.email-footer {background: var(--moss); padding: 28px 40px; text-align: center;}
.ef-logo {display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;}
.ef-logo >i {width: 28px; height: 28px; background: rgba(255,255,255,0.15); border-radius: 50% 8px 50% 8px; display: flex; align-items: center; justify-content: center; color:#fff;}
.ef-brand {font-size:18px; color: #fff;}
.ef-brand em {color: #b8e0a8; font-style: italic;}
.ef-divider {width: 40px; height: 1px; background: rgba(255,255,255,0.2); margin: 12px auto;}
.ef-text {font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.9;}
.ef-text a {color: rgba(255,255,255,0.65); text-decoration: underline;}

/* ── 공통 섹션 타이틀 ── */
.sec-title {font-size: 13px; font-weight: 700; color: var(--fern); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 8px;}
.sec-title::before {content: ''; display: block; width: 14px; height: 2px; background: var(--sage); border-radius: 2px;}
.sec-title::after  {content: ''; flex: 1; height: 1px; background: var(--border);}

/* ── 공통 CTA ── */
.btn-cta-wrap {text-align: center; margin: 24px 0;}
.btn-cta {display: inline-block; padding: 14px 44px; background: var(--fern); color: #fff; font-size: 14px; font-weight: 700; border-radius: 40px; box-shadow: 0 4px 16px rgba(74,124,63,0.35); transition: background 0.2s;}
.btn-cta:hover {background: var(--moss);}

/* ── 에코 뱃지 ── */
.eco-badge {display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--mint-light); border-radius: 8px; padding: 10px 16px; margin-top: 18px; font-size: 12px; color: var(--moss); font-weight: 700;}
.eco-badge i { font-size:18px;}

/* ── 에코 배너 ── */
.eco-banner {background: var(--mint-light); border-radius: 10px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; margin-bottom: 24px;}
.eco-banner-icon {width: 36px; height: 36px; flex-shrink: 0; background: var(--fern); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.eco-banner-icon svg {width: 18px; height: 18px; color: #fff;}
.eco-banner-text {font-size: 12px; color: var(--moss); line-height: 1.7;}
.eco-banner-text strong {font-weight: 700;}

/* ════════════════════
       1. 회원가입
════════════════════ */
.join-header {background: var(--moss); background-image: linear-gradient(160deg, #1e3d1a 0%, #2d5a27 55%, #3a6e30 100%); padding: 52px 40px 48px; text-align: center; position: relative;}
.join-header::after {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30px; background: #fff; clip-path: ellipse(55% 100% at 50% 100%);}
.join-header-inner {position: relative; z-index: 1;}
.join-icon {display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; background: rgba(255,255,255,0.13); border: 2px solid rgba(255,255,255,0.28); border-radius: 50%; margin-bottom: 20px;}
.join-icon i {font-size:35px; color: #b8e0a8;}
.join-header h1 { font-size: 26px; font-weight: 700; font-style: italic; color: #fff; margin-bottom: 8px;}
.join-header p {font-size: 13px; color: rgba(255,255,255,0.78);}

.join-body {padding: 40px 40px 32px;}
.join-greeting { font-size: 19px; font-weight: 700; color: var(--text-dark); margin-bottom: 14px;}
.join-greeting .name-hl {color: var(--fern); font-style: italic;}
.join-text {font-size: 14px; color: var(--text-body); line-height: 1.85; margin-bottom: 28px;}

.join-info-box {background: var(--cream); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; margin-bottom: 28px; position: relative; overflow: hidden;}
.join-info-box::before {content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--sage), var(--fern)); border-radius: 4px 0 0 4px;}
.join-info-box h3 {font-size: 13px; font-weight: 700; color: var(--fern); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px;}
.join-info-row {display: flex; gap: 12px; font-size: 13px; padding: 7px 0; border-bottom: 1px dashed var(--border);}
.join-info-row:last-child {border-bottom: none;}
.join-info-label {color: var(--text-muted); min-width: 80px; flex-shrink: 0; font-size: 12px;}
.join-info-value {color: var(--text-dark); font-weight: 500;}

.join-notice {background: #fdf8ee; border: 1px solid #e8d9a0; border-radius: 10px; padding: 14px 18px; font-size: 12px; color: #6b5300; margin-bottom: 24px; line-height: 1.8;}
.join-notice strong {color: #5a4200;}

/* ════════════════════
       2. 주문완료
════════════════════ */
.order-header {background: var(--linen); padding: 26px 40px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--border);}
.order-brand {display: flex; align-items: center; gap: 10px;}
.order-brand-icon {width: 40px; height: 40px; background: var(--fern); border-radius: 50% 12px 50% 12px; display: flex; align-items: center; justify-content: center;}
.order-brand-icon svg {width: 20px; height: 20px; color: #fff;}
.order-brand-name { font-size: 18px; font-weight: 700; font-style: italic; color: var(--moss);}
.order-num-wrap {text-align: right;}
.order-num-label {font-size: 10px; color: var(--text-muted); letter-spacing: 0.8px; text-transform: uppercase;}
.order-num-val {font-size: 13px; font-weight: 700; color: var(--bark); margin-top: 2px;}

.order-hero {background: linear-gradient(180deg, #e8f5e2 0%, #f5f9f3 60%, #fff 100%); padding: 34px 40px 28px; text-align: center; border-bottom: 1px solid var(--border);}
.order-check {width: 64px; height: 64px; margin: 0 auto 18px; background: linear-gradient(135deg, var(--sage), var(--fern)); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(74,124,63,0.30);}
.order-check svg {width: 30px; height: 30px; color: #fff;}
.order-hero h2 { font-size: 22px; font-weight: 700; font-style: italic; color: var(--text-dark); margin-bottom: 8px;}
.order-hero p {font-size: 13px; color: var(--text-muted);}

.order-body {padding: 30px 40px;}

.order-table {width: 100%; border-collapse: collapse; margin-bottom: 20px;}
.order-table thead tr {background: var(--cream); border-bottom: 2px solid var(--border);}
.order-table th {padding: 10px 12px; font-size: 13px; font-weight: 700; color: var(--text-muted); text-align: left; letter-spacing: 0.5px; text-transform: uppercase;}
.order-table th:last-child {text-align: right;}
.order-table td {padding: 13px 12px; font-size: 13px; color: var(--text-body); border-bottom: 1px solid var(--linen); vertical-align: middle;}
.order-table td:last-child {text-align: right; font-weight: 700; color: var(--text-dark);}
.order-item-name {font-weight: 500; color: var(--text-dark);}
.order-item-option {font-size: 13px; color: var(--text-muted); margin-top: 3px;}
.eco-label {display: inline-block; padding: 1px 6px; background: var(--mint-light); color: var(--moss); border-radius: 4px; font-size: 10px; font-weight: 700; margin-left: 5px; vertical-align: middle;}

.order-total {background: var(--cream); border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; margin-bottom: 24px;}
.order-total-row {display: flex; justify-content: space-between; font-size: 13px; color: var(--text-body); padding: 5px 0;}
.order-total-row.final {border-top: 1px dashed var(--border); margin-top: 8px; padding-top: 13px; font-size: 15px; font-weight: 900; color: var(--text-dark);}
.order-total-row.final .amount {color: var(--fern); font-size: 17px;}

.order-delivery {background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; margin-bottom: 24px;}
.order-drow {display: flex; gap: 10px; font-size: 13px; padding: 5px 0;}
.order-dlabel {color: var(--text-muted); min-width: 68px; flex-shrink: 0; font-size: 12px;}
.order-dvalue {color: var(--text-dark); font-weight: 500;}

/* ════════════════════
       3. 배송시작
════════════════════ */
.ship-header {background: linear-gradient(150deg, #5a3d20 0%, #8b6f47 55%, #a0835a 100%); padding: 48px 40px 44px; text-align: center; position: relative;}
.ship-header::after {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 28px; background: #fff; clip-path: ellipse(60% 100% at 50% 100%);}
.ship-header-inner {position: relative; z-index: 1;}
.ship-truck-box {display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.25); border-radius: 20px; margin-bottom: 20px;}
.ship-truck-box svg {width: 38px; height: 38px; color: #fff;}
.ship-header h1 { font-size: 24px; font-weight: 700; font-style: italic; color: #fff; margin-bottom: 8px;}
.ship-header p {font-size: 13px; color: rgba(255,255,255,0.78);}

.ship-body {padding: 36px 40px 28px;}

.ship-info-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px;}
.ship-info-card {background: var(--cream); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;}
.sic-label {font-size: 10px; font-weight: 700; color: var(--fern); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 6px;}
.sic-value { font-size: 15px; font-weight: 700; color: var(--text-dark);}
.sic-sub {font-size: 13px; color: var(--text-muted); margin-top: 3px;}
.sic-sub a {color: var(--bark); text-decoration: underline;}

/* 배송 스텝 */
.ship-step-wrap {margin-bottom: 28px;}
.ship-step {display: flex; gap: 16px; align-items: flex-start; position: relative; padding-bottom: 22px;}
.ship-step:last-child {padding-bottom: 0;}
.ship-step:not(:last-child)::before {content: ''; position: absolute; left: 17px; top: 38px; width: 2px; height: calc(100% - 38px); background: var(--linen);}
.ship-step.done::before {background: linear-gradient(180deg, var(--sage), var(--mint-light));}
.ship-step-dot {width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--linen); border: 2px solid var(--border);}
.ship-step.done	.ship-step-dot {background: linear-gradient(135deg, var(--sage), var(--fern)); border-color: transparent; box-shadow: 0 2px 8px rgba(74,124,63,0.25);}
.ship-step.active .ship-step-dot {background: #fff; border: 2px solid var(--fern); box-shadow: 0 0 0 4px rgba(74,124,63,0.14);}
.ship-step-dot svg {width: 15px; height: 15px;}
.ship-step.done	.ship-step-dot svg {color: #fff;}
.ship-step.active .ship-step-dot svg {color: var(--fern);}
.ship-step:not(.done):not(.active) .ship-step-dot svg {color: #c8c8c8;}
.ship-step-info {flex: 1; padding-top: 7px;}
.ship-step-name {font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 2px;}
.ship-step:not(.done):not(.active) .ship-step-name {color: #c0bdb5;}
.ship-step.active .ship-step-name {color: var(--fern);}
.ship-step-desc {font-size: 12px; color: var(--text-muted);}
.ship-step.active .ship-step-desc {color: var(--text-body);}
.ship-step-time {font-size: 13px; margin-top: 2px;}
.ship-step.done	.ship-step-time {color: var(--sage);}
.ship-step:not(.done) .ship-step-time {color: #c8c8c0;}

.ship-address {background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; margin-bottom: 24px; position: relative; overflow: hidden;}
.ship-address::before {content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--bark), var(--sand)); border-radius: 4px 0 0 4px;}
.ship-addr-title {font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 10px;}
.ship-addr-name {font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px;}
.ship-addr-detail {font-size: 13px; color: var(--text-body); line-height: 1.65;}
.ship-addr-phone {font-size: 13px; color: var(--bark); font-weight: 600; margin-top: 5px;}

/* 반응형 */
@media (max-width: 640px) {
	.viewer-header {padding: 13px 16px;}
	.viewer-body {padding: 20px 12px 48px;}
	.join-body, .order-body, .ship-body {padding: 24px 20px;}
	.join-header, .ship-header {padding: 30px 20px 28px;}
	.order-header {flex-direction: column; gap: 10px; padding: 20px;}
	.order-num-wrap {text-align: left;}
	.order-hero {padding: 24px 20px;}
	.email-footer {padding: 24px 20px;}
	.ship-info-grid {grid-template-columns: 1fr;}
	.order-table th:nth-child(2), .order-table td:nth-child(2) {display: none;}
}