@font-face {
	font-family: "Pretendard";
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2") format("woff2-variations");
}

:root {
	--as-ink: #181d26;
	--as-muted: #41454d;
	--as-hairline: #dddddd;
	--as-black: #0f1012;
	--as-gold: #b8873b;
	--as-font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* 시안의 전역 리셋 — box-sizing이 없으면 테두리가 있는 요소들이 전부 커진다. */
* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; }

/* 시안 base.css의 body 기본값 — 이걸 안 맞추면 line-height를 명시하지 않은 박스들의 높이가 전부 어긋난다. */
body {
	background: #fff; font-family: var(--as-font); color: #2b2f36; word-break: keep-all;
	font-size: 14px; line-height: 1.45;
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--as-black); }
a:hover { color: var(--as-gold); }

@keyframes as-fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes as-pop { 0% { transform: scale(.65); opacity: 0; } 60% { transform: scale(1.07); } 100% { transform: scale(1); opacity: 1; } }
.as-fu { animation: as-fadeUp .32s cubic-bezier(.2,.7,.3,1) both; }
.as-pop { animation: as-pop .5s cubic-bezier(.2,.7,.3,1) both; }

.as-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* header */
.as-header { background: var(--as-black); }
.as-header__row { height: 64px; display: flex; align-items: center; gap: 16px; }
.as-header__logo img { width: 118px; display: block; }
.as-header__label { font-size: 12px; color: rgba(255,255,255,0.5); letter-spacing: 0.04em; padding-left: 14px; border-left: 1px solid rgba(255,255,255,0.18); }
.as-header__links { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.as-header__links a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.82); text-decoration: none; white-space: nowrap; }
.as-header__links a:hover { color: var(--as-gold); }

/* footer */
.as-footer { background: var(--as-black); flex-shrink: 0; padding: 34px 0; }
.as-footer__logo { width: 96px; display: block; opacity: 0.75; }
.as-footer__cols { margin-top: 20px; display: flex; flex-direction: column; gap: 18px; }
.as-footer__title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.82); margin-bottom: 7px; }
.as-footer__body { font-size: 11.5px; color: rgba(255,255,255,0.45); line-height: 1.85; word-break: keep-all; }

/* progress / stepper */
.as-progress { background: #fff; border-bottom: 1px solid var(--as-hairline); position: sticky; top: 0; z-index: 12; padding-top: 18px; }
.as-progress__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.as-back { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--as-font); font-size: 13px; font-weight: 500; color: var(--as-muted); }
.as-back[disabled] { visibility: hidden; }

.as-stepper { display: flex; align-items: flex-start; padding-bottom: 16px; }
.as-stepper__item { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.as-stepper__row { display: flex; align-items: center; width: 100%; }
.as-stepper__line { flex: 1; height: 2px; background: #e6e6e8; }
.as-stepper__dot {
	flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #fff; border: 1.5px solid #dcdee2; color: #a9adb4;
	font-size: 12.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.as-stepper__label { margin-top: 7px; font-size: 11.5px; line-height: 1.35; font-weight: 500; color: var(--as-muted); text-align: center; word-break: keep-all; }
.as-stepper__item.is-current .as-stepper__label { font-weight: 700; color: var(--as-ink); }

/* step head */
.as-stephead__item h2 { font-family: var(--as-font); font-weight: 600; color: var(--as-ink); margin: 0; letter-spacing: -0.015em; line-height: 1.25; font-size: 30px; }
.as-stephead__item p { font-size: 14px; line-height: 1.65; color: var(--as-muted); margin: 10px 0 0; max-width: 620px; }
.as-stephead { padding: 30px 0 0; }

.as-steps { margin-top: 26px; padding-bottom: 44px; }
.as-step { display: flex; flex-direction: column; gap: 20px; max-width: 620px; }
.as-step[hidden] { display: none; }
.as-step[data-step="1"] { gap: 12px; max-width: none; }
.as-step[data-step="3"] { max-width: 720px; }
.as-step[data-step="4"] { max-width: 640px; }
.as-step[data-step="6"] { max-width: 680px; }

.as-label { display: block; font-size: 13px; font-weight: 600; color: var(--as-ink); margin-bottom: 9px; }
.as-label--sm { font-size: 12.5px; margin-bottom: 7px; }
/* 시안은 라벨마다 아래 여백이 다르다(기본 9px) — 라벨별 인라인 값 그대로 */
.as-label--mb6 { margin-bottom: 6px; }
.as-label--mb8 { margin-bottom: 8px; }
.as-label--mb10 { margin-bottom: 10px; }
.as-label__sub { font-weight: 400; color: var(--as-muted); }
.as-required { color: #c0392b; font-weight: 700; }
.as-hint { font-size: 12.5px; color: var(--as-muted); line-height: 1.6; margin: 0 0 11px; }

/* Basegrid Input/Select/Textarea 실측값: 높이 44px, radius 6px */
.as-input, .as-select, .as-textarea {
	width: 100%; height: 44px; padding: 0 14px;
	border: 1px solid var(--as-hairline); border-radius: 6px; background: #fff;
	font-family: var(--as-font); font-size: 14px; color: var(--as-ink); outline: none;
}
.as-select { padding: 0 36px 0 14px; }
.as-textarea { height: auto; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.as-input:focus, .as-select:focus, .as-textarea:focus { border-color: var(--as-black); }

/* checkbox (generic square) */
.as-checkbox { position: relative; width: 21px; height: 21px; border-radius: 6px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid #c4c8cf; }
.as-checkbox--sm { width: 21px; height: 21px; border-radius: 6px; }
.as-checkbox svg { display: block; }
.is-checked .as-checkbox::after {
	content: ''; position: absolute; left: 6px; top: 3px; width: 6px; height: 11px;
	border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(40deg);
}

/* STEP 1 — 보증 안내 */
.as-warranty { position: relative; background: #eff7fd; border-left: 3px solid #3d9bd4; border-radius: 12px; padding: 17px 20px; }
.as-warranty__title { font-size: 14px; font-weight: 700; color: #1c5f87; line-height: 1.45; }
.as-warranty__lines { margin: 11px 0 0; display: flex; flex-direction: column; gap: 6px; }
.as-warranty__line { font-size: 12.5px; line-height: 1.7; color: #39566b; word-break: keep-all; }
.as-warranty__gap { height: 10px; }

/* 동의 카드 */
.as-consent-card { position: relative; display: block; border-radius: 12px; padding: 17px 20px; cursor: pointer; user-select: none; box-shadow: none; }
.as-consent-card.is-checked { box-shadow: inset 0 0 0 1.5px var(--tone-bar); }
.as-consent-card.as-tone-blue { --tone-bg: #f4f7fd; --tone-bar: #1d4ed8; --tone-title: #1c3f8f; --tone-body: #3f4d68; }
.as-consent-card.as-tone-gold { --tone-bg: #fdf8ef; --tone-bar: #b8873b; --tone-title: #7a5b22; --tone-body: #6b5426; }
.as-consent-card.as-tone-gray { --tone-bg: #f7f7f8; --tone-bar: #9aa0a8; --tone-title: #2b2f36; --tone-body: #4a5058; }
.as-consent-card { background: var(--tone-bg); border-left: 3px solid var(--tone-bar); }
.as-consent-card__badge { position: absolute; top: 12px; right: 14px; font-size: 10.5px; font-weight: 700; color: #d92d20; background: #fdecea; border: 1px solid #f7c8c3; border-radius: 5px; padding: 2px 7px; letter-spacing: 0.02em; line-height: 1.4; }
.as-consent-card__head { display: flex; align-items: center; gap: 11px; width: 100%; }
.as-consent-card__head .as-checkbox { border-color: #c4c8cf; }
.as-consent-card.is-checked .as-checkbox { background: var(--tone-bar); border-color: var(--tone-bar); }
.as-consent-card__title { flex: 1; min-width: 0; padding-right: 44px; font-size: 14px; font-weight: 700; color: var(--tone-title); line-height: 1.45; }
.as-consent-card__lines { margin: 11px 0 0 32px; display: flex; flex-direction: column; gap: 6px; }
.as-consent-card__line { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; line-height: 1.7; color: var(--tone-body); }
.as-consent-card__line span:first-child { flex-shrink: 0; color: var(--tone-bar); }

.as-agree-all { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 50px; margin-top: 4px; border-radius: 10px; cursor: pointer; font-family: var(--as-font); font-size: 14px; font-weight: 600; background: #fff; color: var(--as-black); border: 1px solid var(--as-black); }
.as-agree-all.is-active { background: #eef4fd; color: #1d4ed8; border-color: #1d4ed8; }
.as-agree-all__check { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: #1d4ed8; }
.as-agree-all__check[hidden] { display: none; }

/* STEP 2 */
.as-cat-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.as-cat-tab { padding: 9px 16px; border-radius: 9px; cursor: pointer; font-family: var(--as-font); font-size: 13px; font-weight: 600; background: #fff; color: #3d434b; border: 1px solid var(--as-hairline); }
.as-cat-tab.is-active { background: var(--as-black); color: #fff; border-color: var(--as-black); }

.as-product-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.as-product-tile {
	text-align: left; cursor: pointer; background: #fff; border: 1.5px solid var(--as-hairline);
	border-radius: 11px; padding: 10px; box-shadow: none;
	transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.as-product-tile[hidden] { display: none; }
.as-product-tile:hover { border-color: #b6bac1; }
.as-product-tile.is-active { border-color: var(--as-black); box-shadow: 0 4px 14px -6px rgba(15,16,18,0.22); }
.as-product-tile__img { display: block; height: 92px; background: #fafafb; border-radius: 8px; overflow: hidden; }
/* 시안은 이미지 레이어를 박스에서 7px 안쪽(inset:7px)으로 넣는다. */
.as-product-tile__img img { width: 100%; height: 100%; padding: 7px; object-fit: contain; }
.as-product-tile__name { display: block; font-size: 12.5px; font-weight: 600; color: var(--as-ink); margin-top: 9px; line-height: 1.35; }
/* 여러 제품 접수(사용자 요청) — 담긴 타일에 "선택됨 / N대 선택" 표시 */
.as-product-tile { position: relative; }
.as-product-tile__count { position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 6px; background: var(--as-black); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.35; }
.as-product-tile__count[hidden] { display: none; }

/* 선택한 제품 · 시리얼 — 제품마다 한 장(시리얼 칸 · "잘 모르겠습니다"는 시안 부품 그대로) */
.as-picked { display: flex; flex-direction: column; gap: 10px; }
.as-picked:empty { display: none; }
.as-picked__item { background: #fff; border: 1px solid var(--as-hairline); border-radius: 12px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.as-picked__head, .as-sym-item__head { display: flex; align-items: center; gap: 12px; }
.as-picked__img { width: 46px; height: 46px; flex-shrink: 0; border-radius: 8px; background: #fafafb; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.as-picked__img img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.as-picked__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.as-picked__no { font-size: 11.5px; font-weight: 600; color: var(--as-muted); }
.as-picked__name { font-size: 14px; font-weight: 600; color: var(--as-ink); line-height: 1.35; }
.as-picked__remove { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--as-hairline); background: #fff; color: var(--as-muted); font-size: 12px; cursor: pointer; }
.as-picked__remove:hover { border-color: #b6bac1; color: var(--as-ink); }
.as-picked__empty { padding: 18px; border: 1.5px dashed #dcdee2; border-radius: 12px; text-align: center; font-size: 12.5px; color: var(--as-muted); }
.as-picked__empty[hidden] { display: none; }
.as-picked .as-input:disabled { background: #f7f7f8; color: var(--as-muted); }

/* STEP 3 제품별 증상 — 한 개면 시안 그대로(머리 없음), 여러 개면 제품마다 카드 */
.as-sym-list { display: flex; flex-direction: column; gap: 20px; }
.as-sym-item { display: flex; flex-direction: column; gap: 20px; }
.as-sym-list:not(.is-multi) .as-sym-item__head { display: none; }
.as-sym-list.is-multi { gap: 14px; }
.as-sym-list.is-multi .as-sym-item { background: #fff; border: 1px solid var(--as-hairline); border-radius: 12px; padding: 16px 18px 20px; gap: 18px; }
.as-sym-list.is-multi .as-sym-item__head { padding-bottom: 14px; border-bottom: 1px solid var(--as-hairline); }

.as-hr { height: 1px; background: var(--as-hairline); }

.as-serial-table { background: #fff; border: 1px solid var(--as-hairline); border-radius: 12px; overflow: hidden; }
.as-serial-table__head { padding: 14px 18px; border-bottom: 1px solid var(--as-hairline); font-size: 12.5px; font-weight: 700; color: var(--as-ink); }
.as-serial-table__row { display: flex; gap: 14px; padding: 13px 18px; border-bottom: 1px solid #f0f0f1; font-size: 12.5px; align-items: flex-start; }
.as-serial-table__row:last-child { border-bottom: none; }
.as-serial-table__row span:first-child { flex: 0 0 132px; font-weight: 600; color: var(--as-ink); }
.as-serial-table__row span:last-child { flex: 1; color: #3d434b; line-height: 1.55; }
.as-serial-table__row.is-active { background: #eff7fd; box-shadow: inset 3px 0 0 #3d9bd4; }
.as-serial-table__row.is-active span:first-child { font-weight: 700; color: #1c5f87; }

.as-unknown-toggle { display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; cursor: pointer; }
.as-unknown-toggle span:last-child { font-size: 13.5px; color: #2b2f36; }
.as-unknown-toggle.is-checked .as-checkbox { background: var(--as-black); border-color: var(--as-black); }

.as-notice-inline { display: flex; gap: 11px; align-items: center; border-radius: 12px; padding: 17px 20px; }
.as-notice-inline[hidden] { display: none; }
.as-notice-inline--warn { background: #fff3e8; border: 1px solid #f2c89e; border-left: 3px solid #e06b1f; }
.as-notice-inline--warn .as-notice-inline__i { background: #e06b1f; }
.as-notice-inline--warn span:last-child { font-size: 13.5px; font-weight: 600; line-height: 1.7; color: #93430d; word-break: keep-all; }
.as-notice-inline--danger { background: #fdecea; border: 1px solid #f2c0ba; align-items: flex-start; padding: 13px 15px; border-radius: 10px; }
.as-notice-inline--danger .as-notice-inline__i--danger { background: #c0392b; width: 17px; height: 17px; font-size: 11.5px; margin-top: 1px; }
.as-notice-inline--danger span:last-child { font-size: 12.5px; line-height: 1.6; color: #c0392b; font-weight: 600; }
.as-notice-inline__i { flex-shrink: 0; width: 17px; height: 17px; border-radius: 4px; background: #e06b1f; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
.as-notice-inline__i--danger { border-radius: 50%; }

/* STEP 3 */
.as-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.as-chip { padding: 9px 15px; border-radius: 9px; cursor: pointer; font-family: var(--as-font); font-size: 13.5px; font-weight: 500; background: #fff; color: #3d434b; border: 1px solid var(--as-hairline); }
.as-chip.is-active { background: var(--as-black); color: #fff; border-color: var(--as-black); }

.as-drop-options { display: flex; gap: 8px; }
.as-drop-opt { display: inline-flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 10px; cursor: pointer; font-family: var(--as-font); font-size: 13.5px; font-weight: 500; background: #fff; color: #3d434b; border: 1.5px solid var(--as-hairline); }
.as-drop-opt__dot { width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid #c4c8cf; background: #fff; }
.as-drop-opt.is-active { font-weight: 600; color: var(--as-ink); background: #f7f7f8; border-color: var(--as-black); }
.as-drop-opt.is-active .as-drop-opt__dot { border: 5px solid var(--as-black); }

/* file tiles (증상 사진/구매 자료 — 실제 업로드로 동작, 시각 스타일만 디자인과 맞춤) */
.as-file-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; max-width: 460px; }
.as-file-tile { position: relative; aspect-ratio: 1; border-radius: 9px; background: #f8fafc; border: 1px solid var(--as-hairline); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.as-file-tile img { width: 100%; height: 100%; object-fit: cover; }
.as-file-tile__remove { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(15,16,18,0.72); border: none; color: #fff; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.as-file-add { aspect-ratio: 1; border-radius: 9px; border: 1.5px dashed #c4c8cf; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; color: var(--as-muted); font-family: var(--as-font); }
.as-file-add span { font-size: 10px; font-weight: 500; }

/* STEP 4 */
.as-purchase-row { display: flex; gap: 12px; }
.as-purchase-row__col { flex: 1; }
/* 시안: <div class="fu" style="margin-top:10px;"> — 빠져 있어서 구매처 셀렉트에 붙어 보였음 */
.as-store-name { margin-top: 10px; }

.as-datepicker { position: relative; }
.as-date-trigger { width: 100%; height: 46px; padding: 0 13px; gap: 8px; border: 1px solid var(--as-hairline); border-radius: 9px; background: #fff; display: flex; align-items: center; justify-content: space-between; font-family: var(--as-font); cursor: pointer; }
.as-date-trigger span { font-size: 13.5px; color: #9aa0a8; }
.as-date-trigger.has-value span { color: var(--as-ink); }
.as-date-trigger.is-open { border-color: var(--as-black); }
.as-date-popup { position: absolute; top: 52px; left: 0; z-index: 30; width: 288px; background: #fff; border: 1px solid var(--as-hairline); border-radius: 12px; box-shadow: 0 18px 40px -14px rgba(15,16,18,0.28); padding: 14px; }
.as-date-popup__nav { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.as-date-popup__nav button { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--as-hairline); border-radius: 8px; background: #fff; cursor: pointer; color: var(--as-ink); font-size: 15px; }
.as-date-popup__ym { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 6px; }
/* 연 · 월 선택(고객사 요청) — 옆의 ‹ › 버튼과 같은 30px 높이 · 테두리 */
.as-date-popup__sel { height: 30px; padding: 0 24px 0 10px; border: 1px solid var(--as-hairline); border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center; -webkit-appearance: none; appearance: none; font-family: var(--as-font); font-size: 13px; font-weight: 600; color: var(--as-ink); font-variant-numeric: tabular-nums; cursor: pointer; outline: none; }
.as-date-popup__sel:focus { border-color: var(--as-black); }
.as-date-popup__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.as-date-popup__dow span { text-align: center; font-size: 11px; font-weight: 600; padding: 5px 0; color: var(--as-muted); display: block; }
.as-date-popup__dow span:first-child { color: #c0392b; }
.as-date-popup__dow span:last-child { color: #1d4ed8; }
.as-date-popup__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.as-date-popup__grid button { height: 34px; border: none; border-radius: 7px; cursor: pointer; font-family: var(--as-font); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; background: transparent; color: #2b2f36; }
.as-date-popup__grid button.is-today { font-weight: 700; }
.as-date-popup__grid button.is-selected { background: var(--as-black); color: #fff; font-weight: 700; }
.as-date-popup__grid button.is-sun { color: #c0392b; }
.as-date-popup__grid button.is-sat { color: #1d4ed8; }
.as-date-popup__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--as-hairline); }
.as-date-popup__foot button { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--as-font); font-size: 12.5px; font-weight: 600; color: var(--as-muted); }
.as-date-popup__foot button:last-child { color: var(--as-ink); }

.as-zip-row { display: flex; gap: 8px; margin-bottom: 8px; }
.as-zip-row .as-input { flex: 1; }
.as-zip-btn { flex-shrink: 0; padding: 0 16px; height: 46px; border-radius: 9px; border: 1px solid var(--as-black); background: #fff; font-family: var(--as-font); font-size: 13px; font-weight: 600; color: var(--as-black); cursor: pointer; white-space: nowrap; }
.as-addr-col { display: flex; flex-direction: column; gap: 8px; }

.as-enclose-list { display: flex; flex-direction: column; gap: 8px; }
.as-enclose-row { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--as-hairline); border-radius: 10px; padding: 13px 15px; }
.as-enclose-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--as-gold); flex-shrink: 0; }
.as-enclose-label { font-size: 13.5px; color: var(--as-ink); font-weight: 500; }
.as-enclose-reason { margin-left: auto; font-size: 11.5px; color: var(--as-muted); font-variant-numeric: tabular-nums; }

.as-notice-card { background: #181d26; border-radius: 14px; padding: 24px 26px; }
.as-notice-card__title { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: #fff; margin-bottom: 18px; }
.as-notice-card__i { flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%; border: 1.5px solid var(--as-gold); color: var(--as-gold); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
.as-notice-card__lines { display: flex; flex-direction: column; gap: 13px; }
.as-notice-card__line { display: flex; gap: 11px; align-items: flex-start; }
.as-notice-card__line span { flex: 1; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.82); }
.as-notice-card__agree { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 20px; padding: 13px 15px; border-radius: 10px; cursor: pointer; font-family: var(--as-font); font-size: 13px; font-weight: 600; text-align: left; background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.16); }
.as-notice-card__agree.is-checked { background: rgba(184,135,59,0.16); color: #e3bd7f; border-color: rgba(184,135,59,0.55); }
.as-checkbox--dark { border-color: rgba(255,255,255,0.4); background: transparent; }
.as-notice-card__agree.is-checked .as-checkbox--dark { background: var(--as-gold); border-color: var(--as-gold); }

/* STEP 5 */
.as-privacy-box { background: #f4f7fd; border: 1px solid #d9e3f5; border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.as-privacy-item { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; user-select: none; }
.as-checkbox--blue { width: 20px; height: 20px; border-radius: 5px; margin-top: 1px; border-color: #adbdd6; }
.as-privacy-item.is-checked .as-checkbox--blue { background: #1d4ed8; border-color: #1d4ed8; }
.as-privacy-item__body { flex: 1; min-width: 0; }
.as-privacy-item__title { display: block; font-size: 13.5px; font-weight: 600; color: var(--as-ink); line-height: 1.45; }
.as-privacy-item__detail { display: block; font-size: 11.5px; color: #5a6b85; margin-top: 5px; line-height: 1.6; }

/* STEP 6 */
.as-summary-card { background: #fff; border: 1px solid var(--as-hairline); border-radius: 12px; overflow: hidden; }
.as-summary-card__head { padding: 15px 18px; border-bottom: 1px solid var(--as-hairline); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--as-muted); }
.as-summary-row { display: flex; gap: 16px; padding: 13px 18px; border-bottom: 1px solid #f0f0f1; align-items: flex-start; }
.as-summary-row:last-child { border-bottom: none; }
.as-summary-row span:first-child { width: 96px; flex-shrink: 0; font-size: 12.5px; color: var(--as-muted); }
.as-summary-row span:last-child { flex: 1; font-size: 13.5px; color: var(--as-ink); font-weight: 500; line-height: 1.55; }

.as-ship-box { background: var(--as-black); border-radius: 12px; padding: 22px; color: #fff; }
.as-ship-box__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--as-gold); }
.as-ship-box__addr { font-size: 15px; font-weight: 600; margin-top: 11px; line-height: 1.6; }
.as-ship-box__sub { font-size: 12.5px; color: rgba(255,255,255,0.55); margin-top: 8px; line-height: 1.6; }
.as-ship-box__hr { height: 1px; background: rgba(255,255,255,0.12); margin: 18px 0; }
.as-ship-box__cols { display: flex; gap: 28px; flex-wrap: wrap; }
.as-ship-box__label { font-size: 11px; color: rgba(255,255,255,0.45); }
.as-ship-box__value { font-size: 14px; font-weight: 600; margin-top: 3px; }
.as-ship-box__note { font-size: 11.5px; color: rgba(255,255,255,0.5); margin-top: 4px; line-height: 1.55; word-break: keep-all; }

.as-period-card { background: #fff; border: 1px solid var(--as-hairline); border-radius: 12px; padding: 20px 22px; }
.as-period-card__title { font-size: 13.5px; font-weight: 700; color: var(--as-ink); margin-bottom: 13px; }
.as-period-card__row { display: flex; gap: 9px; align-items: flex-start; margin-top: 9px; }
.as-period-card__row:first-of-type { margin-top: 0; }
.as-period-card__row span:first-child { flex-shrink: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--as-gold); margin-top: 8px; }
.as-period-card__row span:last-child { font-size: 13px; line-height: 1.6; color: #3d434b; }

/* 선택한 증상의 자가 점검 방법 (STEP 3 인라인 가이드) */
.as-selftip { display: flex; flex-direction: column; gap: 12px; }
.as-selftip[hidden] { display: none; }
.as-selftip__label { font-size: 13px; font-weight: 600; color: var(--as-ink); }
.as-selftip__card { background: #fff; border: 1px solid var(--as-hairline); border-radius: 12px; overflow: hidden; }
.as-selftip__card + .as-selftip__card { margin-top: 12px; }
.as-selftip__head { display: flex; align-items: center; gap: 9px; padding: 14px 18px; background: #fafafb; border-bottom: 1px solid var(--as-hairline); font-size: 13.5px; font-weight: 600; color: var(--as-ink); }
.as-selftip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--as-gold); flex-shrink: 0; }
.as-selftip__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.as-selftip__group { border: 1px solid; border-left-width: 3px; border-radius: 10px; padding: 14px 16px; }
.as-selftip__group-name { font-size: 12.5px; font-weight: 700; margin-bottom: 9px; }
.as-selftip__steps { display: flex; flex-direction: column; gap: 8px; }
.as-selftip__step { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.6; color: #3d434b; }
.as-selftip__num { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.as-selftip__videos { border: 1px solid #d9c7f0; border-left: 3px solid #7c4dbe; border-radius: 10px; padding: 14px 16px; }
.as-selftip__videos-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #5e3699; margin-bottom: 10px; }
.as-selftip__videos-grid { display: grid; gap: 11px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.as-selftip__embed { position: relative; aspect-ratio: 3 / 2; border-radius: 9px; overflow: hidden; background: #000; border: 1px solid var(--as-hairline); }
.as-selftip__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.as-selftip__link { position: relative; display: flex; aspect-ratio: 3 / 2; border-radius: 9px; border: 1px solid var(--as-hairline); background: var(--as-black); align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
.as-selftip__link span { font-size: 12px; font-weight: 600; color: #fff; }
.as-selftip__video-title { font-size: 11.5px; font-weight: 500; color: #3d434b; line-height: 1.45; margin-top: 7px; }

/* 카카오 우편번호 레이어 (새 창 방식은 팝업 차단에 걸려서 embed 사용) */
.as-postcode { position: fixed; inset: 0; z-index: 130; background: rgba(15,16,18,0.42); display: flex; align-items: center; justify-content: center; padding: 24px; }
.as-postcode[hidden] { display: none; }
.as-postcode__panel { width: 100%; max-width: 480px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 28px 64px -18px rgba(0,0,0,0.5); }
.as-postcode__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--as-hairline); font-size: 13.5px; font-weight: 700; color: var(--as-ink); }
.as-postcode__close { width: 28px; height: 28px; border: none; background: none; cursor: pointer; font-size: 15px; color: var(--as-muted); }
.as-postcode__embed { height: 460px; }

/* 안내 모달 (디자인의 toast) */
.as-modal { position: fixed; inset: 0; z-index: 120; background: rgba(15,16,18,0.42); display: flex; align-items: center; justify-content: center; padding: 24px; }
.as-modal[hidden] { display: none; }
.as-modal__card { width: 100%; max-width: 340px; background: #fff; border-radius: 16px; padding: 28px 26px 22px; text-align: center; box-shadow: 0 28px 64px -18px rgba(0,0,0,0.5); }
.as-modal__icon { width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; line-height: 1; animation: as-pop .38s cubic-bezier(.2,.7,.3,1) both; }
.as-modal__icon.is-warn { background: #fdecea; color: #c0392b; }
.as-modal__icon.is-ok { background: #eaf5ee; color: #046b30; }
.as-modal__text { font-size: 14.5px; font-weight: 600; color: var(--as-ink); line-height: 1.6; margin-top: 16px; word-break: keep-all; }
.as-modal__btn { width: 100%; height: 46px; margin-top: 22px; border-radius: 10px; border: none; background: var(--as-black); color: #fff; font-family: var(--as-font); font-size: 14px; font-weight: 700; cursor: pointer; }

/* 첨부파일 업로드 진행 — 시안에 없는 화면이라 알림 모달 카드 규격을 그대로 쓰고,
   색은 시안 스텝퍼의 완료 파랑(#1d4ed8)·빈 선 회색(#e6e6e8)을 가져옴 */
.as-upload__title { font-size: 14.5px; font-weight: 600; color: var(--as-ink); line-height: 1.6; word-break: keep-all; }
.as-upload__pct { margin-top: 12px; font-size: 30px; font-weight: 700; color: var(--as-ink); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.as-upload__bar { margin-top: 16px; height: 6px; border-radius: 999px; background: #e6e6e8; overflow: hidden; }
.as-upload__fill { width: 0; height: 100%; border-radius: inherit; background: #1d4ed8; transition: width .2s ease; }
.as-upload__size { margin-top: 9px; min-height: 17px; font-size: 12px; color: var(--as-muted); font-variant-numeric: tabular-nums; }
.as-upload__note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--as-hairline); font-size: 12px; line-height: 1.55; color: var(--as-muted); word-break: keep-all; }
/* 전송은 끝났고 서버 응답을 기다리는 동안 — 100%에서 멈춘 것처럼 보이지 않게 */
.as-upload.is-processing .as-upload__fill { background: linear-gradient(90deg, #1d4ed8 0%, #7c9cf2 50%, #1d4ed8 100%); background-size: 200% 100%; animation: as-upload-flow 1.1s linear infinite; }
@keyframes as-upload-flow { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
	.as-upload.is-processing .as-upload__fill { animation: none; }
}

.as-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.as-error { background: #fdecea; border: 1px solid #f3b9b2; color: #c0392b; border-radius: 8px; padding: 12px 14px; font-size: 13px; max-width: 620px; }

/* 하단 CTA */
/* 구분선은 화면 전체 폭 — 시안처럼 wrap 바깥에 두고 안쪽만 1120px로 제한한다. */
.as-cta { margin-top: 44px; border-top: 1px solid var(--as-hairline); background: #fff; padding: 24px 0 40px; }
.as-cta__inner { display: flex; gap: 9px; }
.as-steps { padding-bottom: 0; }
.as-prev-btn { flex: 1; min-width: 0; height: 54px; border-radius: 10px; border: 1px solid var(--as-hairline); background: #fff; color: #3d434b; font-family: var(--as-font); font-size: 15px; font-weight: 600; cursor: pointer; }
.as-next-btn { flex: 2; min-width: 0; height: 54px; border-radius: 10px; border: none; background: var(--as-black); color: #fff; font-family: var(--as-font); font-size: 15.5px; font-weight: 700; cursor: pointer; }
.as-next-btn:disabled, .as-prev-btn:disabled { opacity: .5; cursor: default; }

/* 완료 화면 */
.as-done { padding: 70px 0 60px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.as-done[hidden] { display: none; }
.as-done__icon { width: 82px; height: 82px; border-radius: 50%; background: var(--as-black); display: flex; align-items: center; justify-content: center; }
.as-done h2 { font-family: var(--as-font); font-weight: 600; font-size: 26px; color: var(--as-ink); margin: 24px 0 8px; letter-spacing: -0.01em; }
.as-done > p { font-size: 14px; color: var(--as-muted); line-height: 1.65; margin: 0 0 28px; }
.as-done__card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--as-hairline); border-radius: 12px; padding: 22px; text-align: left; }
.as-done__card-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--as-muted); }
.as-done__card-no { font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 600; color: var(--as-ink); margin-top: 5px; }
.as-done__card-hr { height: 1px; background: var(--as-hairline); margin: 16px 0; }
.as-done__card-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
.as-done__card-row:last-child { margin-bottom: 0; }
.as-done__card-row span:first-child { color: var(--as-muted); }
.as-done__card-row span:last-child { color: var(--as-ink); font-weight: 500; }
.as-done__actions { width: 100%; max-width: 420px; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.as-done__primary { width: 100%; height: 50px; border-radius: 10px; border: none; background: var(--as-black); color: #fff; font-family: var(--as-font); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.as-done__outline { width: 100%; height: 50px; border-radius: 10px; border: 1px solid var(--as-hairline); background: #fff; color: var(--as-ink); font-family: var(--as-font); font-size: 14.5px; font-weight: 600; cursor: pointer; }

/* 자가진단 (/self-check/) */
.as-self { padding: 0 0 80px; }
.as-self__head { padding: 34px 0 0; }
.as-self__title { font-family: var(--as-font); font-weight: 600; color: var(--as-ink); margin: 20px 0 0; letter-spacing: -0.015em; line-height: 1.25; font-size: 30px; }
.as-self__desc { font-size: 14px; line-height: 1.65; color: var(--as-muted); margin: 10px 0 0; max-width: 620px; }

.as-self__grid { display: grid; gap: 12px; margin-top: 26px; grid-template-columns: repeat(3, 1fr); }
.as-self__card {
	text-align: left; background: #fff; border: 1px solid var(--as-hairline); border-radius: 12px; padding: 20px;
	cursor: pointer; display: flex; flex-direction: column; gap: 8px; text-decoration: none;
	transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.as-self__card:hover { border-color: #b6bac1; }
.as-self__card-head { display: flex; align-items: center; gap: 10px; }
.as-self__card-icon { width: 32px; height: 32px; border-radius: 8px; background: #f7f7f8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--as-black); }
.as-self__card-title { font-size: 15px; font-weight: 600; color: var(--as-ink); }
.as-self__card-sub { font-size: 12.5px; color: var(--as-muted); line-height: 1.55; }
.as-self__card-link { font-size: 12px; font-weight: 600; color: var(--as-gold); margin-top: 2px; }

.as-self__cta-box { margin-top: 34px; background: var(--as-black); border-radius: 12px; padding: 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.as-self__cta-box--dark { padding: 22px; gap: 18px; }
.as-self__cta-title { font-size: 15px; font-weight: 600; color: #fff; }
.as-self__cta-sub { font-size: 12.5px; color: rgba(255,255,255,0.55); margin-top: 5px; }
.as-self__cta-sub2 { flex: 1; min-width: 200px; font-size: 13.5px; color: rgba(255,255,255,0.78); line-height: 1.6; }
.as-self__cta-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0 24px; height: 46px; border-radius: 9px; border: none; background: var(--as-gold); color: var(--as-black); font-family: var(--as-font); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; }
.as-self__cta-btn--sm { padding: 0 22px; height: 44px; font-size: 13.5px; }

.as-self__detail-title { font-family: var(--as-font); font-weight: 600; font-size: 22px; color: var(--as-ink); margin: 18px 0 22px; letter-spacing: -0.01em; }
.as-self__detail { margin-top: 0; max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.as-self__group { background: #fff; border: 1px solid var(--as-hairline); border-radius: 12px; padding: 20px 22px; }
.as-self__group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.as-self__group-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--as-gold); }
.as-self__group-head span:last-child { font-size: 14.5px; font-weight: 600; color: var(--as-ink); }
.as-self__group-steps { display: flex; flex-direction: column; gap: 11px; }
.as-self__step { display: flex; gap: 11px; align-items: flex-start; }
.as-self__step-n { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: #f2f2f3; color: #5a6069; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.as-self__step span:last-child { font-size: 13.5px; line-height: 1.6; color: #3d434b; }

.as-self__videos-box { background: #fff; border: 1px solid var(--as-hairline); border-radius: 12px; padding: 20px 22px; }
.as-self__videos-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--as-muted); margin-bottom: 14px; }
.as-self__videos-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.as-self__video-embed { position: relative; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--as-hairline); }
.as-self__video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.as-self__video-link { position: relative; display: flex; aspect-ratio: 3 / 2; border-radius: 10px; border: 1px solid var(--as-hairline); background: var(--as-black); align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.as-self__video-link span { font-size: 12.5px; font-weight: 600; color: #fff; }
.as-self__video-title { font-size: 12.5px; font-weight: 500; color: var(--as-ink); line-height: 1.45; margin-top: 9px; }

/* 접수 조회 (/status/) */
.as-status { padding: 0 0 80px; }
.as-status__head { padding: 34px 0 0; margin-bottom: 18px; }
.as-status__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--as-muted); background: #fff; border: 1px solid var(--as-hairline); padding: 5px 10px; border-radius: 7px; }

/* 직접 접속 조회 폼 — 시안에 없는 화면이라 결과 카드(.as-status__card)와 같은 틀에
   접수 폼의 입력칸·라벨, 알림 모달의 버튼 규격을 그대로 조합 */
.as-lookup { display: block; }
.as-lookup__fields { margin-top: 24px; display: flex; gap: 12px; }
.as-lookup__no { flex: 1.6; min-width: 0; }
.as-lookup__phone { flex: 1; min-width: 0; }
.as-lookup__btn { display: block; width: 100%; height: 46px; margin-top: 20px; border-radius: 10px; border: none; background: var(--as-black); color: #fff; font-family: var(--as-font); font-size: 14px; font-weight: 700; cursor: pointer; }

.as-status__card { background: #fff; border: 1px solid var(--as-hairline); border-radius: 14px; padding: 26px; max-width: 640px; }
.as-status__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
/* 접수번호 칩 + 제품 썸네일 — 시안은 번호가 흐린 13px 글씨였다(사용자 요청으로 눈에 띄게). 칩은 헤더와 같은 검정 */
.as-status__no-chip { display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 15px 7px 13px; border-radius: 999px; background: var(--as-black); }
.as-status__no-label { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.62); white-space: nowrap; }
.as-status__no { font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.06em; }
.as-status__prod { display: flex; align-items: center; gap: 16px; }
.as-status__thumb { width: 72px; height: 72px; flex-shrink: 0; border-radius: 12px; background: #f5f6f7; border: 1px solid var(--as-hairline); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.as-status__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.as-status__prod-text { min-width: 0; }
.as-status__pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 7px; white-space: nowrap; border: 1px solid; }
.as-status__product { font-family: var(--as-font); font-size: 20px; font-weight: 600; color: var(--as-ink); letter-spacing: -0.01em; }
.as-status__meta { font-size: 12.5px; color: var(--as-muted); margin-top: 4px; }
/* 여러 제품 접수 — 접수 정보 한 줄 아래에 제품마다 작은 썸네일 줄 */
.as-status__meta--top { margin: 0 0 12px; }
.as-status__prods { display: flex; flex-direction: column; gap: 10px; }
.as-status__prod--sm { gap: 13px; }
.as-status__prod--sm .as-status__thumb { width: 52px; height: 52px; border-radius: 10px; }
.as-status__prod--sm .as-status__product { font-size: 16px; }
.as-status__prod--sm .as-status__meta { margin-top: 2px; }
.as-status__fee-row--item { font-size: 12.5px; color: #8d6a2c; }
.as-status__fee-row--item span:last-child { font-weight: 600; }

.as-status__timeline { margin-top: 28px; }
.as-status__row { display: flex; gap: 15px; }
.as-status__rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.as-status__dot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-width: 2px; border-style: solid; }
.as-status__line { width: 2px; flex: 1; min-height: 20px; }
.as-status__body { padding-bottom: 22px; flex: 1; min-width: 0; }
.as-status__label { font-size: 14px; font-weight: 600; }
.as-status__note { font-size: 12.5px; color: var(--as-muted); margin-top: 3px; line-height: 1.55; }
.as-status__sub { display: flex; gap: 5px; margin-top: 5px; }
.as-status__sub span:first-child { flex-shrink: 0; font-size: 11.5px; color: #b6bac1; line-height: 1.6; }
.as-status__sub span:last-child { font-size: 11.5px; color: #8d939c; line-height: 1.6; }
.as-status__tags { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; }
.as-status__tag { font-size: 11.5px; font-weight: 600; color: #7a5b22; background: #fdf8ef; border: 1px solid #ecdcbf; border-radius: 6px; padding: 3px 9px; }
.as-status__fee-box { margin-top: 11px; background: #fdf8ef; border: 1px solid #ecdcbf; border-radius: 10px; padding: 14px 15px; }
.as-status__fee-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; color: #7a5b22; }
.as-status__fee-row span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.as-status__fee-note { font-size: 12px; color: #8d6a2c; line-height: 1.55; }
.as-status__track-box { margin-top: 11px; background: #fff; border: 1px solid var(--as-hairline); border-radius: 10px; padding: 14px 15px; }
.as-status__track-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.as-status__track-row:last-child { margin-bottom: 0; }
.as-status__track-row span:first-child { color: var(--as-muted); }
.as-status__track-row span:last-child { color: var(--as-ink); font-weight: 500; }

.as-status__notice { max-width: 640px; margin-top: 16px; display: flex; gap: 9px; align-items: flex-start; background: #fff; border: 1px solid var(--as-hairline); border-radius: 11px; padding: 15px 17px; color: var(--as-muted); }
.as-status__notice span { font-size: 12.5px; line-height: 1.6; color: var(--as-muted); }

@media (max-width: 720px) {
	.as-self__grid { grid-template-columns: 1fr; }
	.as-self__videos-grid { grid-template-columns: 1fr; }

	.as-wrap { padding: 0 20px; }
	.as-header__label { display: none; }
	.as-purchase-row { flex-direction: column; }
	.as-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-lookup__fields { flex-direction: column; }
	.as-status__thumb { width: 60px; height: 60px; }
	.as-status__product { font-size: 18px; }
}