/* =========================
   FITLAB style.css (FULL REVISION)
   - 홈 리디자인
   - 업로드 2단계
   - 모달 현대화
   - 기존 기능 호환 유지
   - 업로드 / 체형측정 입력 UX 통일
========================= */

/* =========================
   Root / Theme
========================= */
:root{
  --bg:#f6f7f8;
  --card:#ffffff;
  --card2:#fbfbfc;
  --text:#0b0c0f;
  --muted:#6b7280;
  --muted2:#94a3b8;
  --line:#e5e7eb;
  --line-strong:#d7dce2;

  --orange:#ff5f2a;
  --orange2:#ff7446;
  --orange3:#fff2ec;

  --active:#ff3b30;

  --radius:12px;
  --radius-lg:18px;
  --radius-xl:24px;

  --shadow: 0 10px 30px rgba(15,23,42,.08);
  --shadow2: 0 4px 16px rgba(15,23,42,.06);
  --shadow3: 0 20px 60px rgba(15,23,42,.16);

  --w: 1120px;
  --header-h: 64px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top, rgba(255,95,42,.04), transparent 28%),
    var(--bg);
}

img{ max-width:100%; display:block; }
button, input, select, textarea{ outline:none; font:inherit; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  box-shadow: 0 0 0 4px rgba(255,95,42,.14);
  border-color: rgba(255,95,42,.45);
}

/* =========================
   Header
========================= */
.top{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.top_inner{
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 18px;
  height: var(--header-h);
  display:flex;
  align-items:center;
  gap:18px;
}

.brand{
  margin:0;
  font-weight: 1000;
  letter-spacing: .1px;
  font-size: 28px;
  line-height: 1;
  cursor:pointer;
  user-select:none;
  color: var(--orange);
}

.nav{
  display:flex;
  align-items:center;
  gap: 18px;
  min-width: 0;
  overflow:hidden;
}

.nav_btn{
  border:0;
  background:transparent;
  color:#111;
  font-weight:800;
  padding: 10px 2px;
  cursor:pointer;
  transition:.16s ease;
  white-space:nowrap;
  line-height:1;
  position:relative;
}

.nav_btn:hover{ color: var(--active); }
.nav_btn.is-active{ color: var(--active); }

.nav_btn.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-10px;
  height:3px;
  border-radius:999px;
  background: var(--active);
}

.nav_sep{ display:none; }

.auth{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
}

/* =========================
   Layout
========================= */
.wrap{
  max-width: var(--w);
  margin: 0 auto;
  padding: 18px 18px 64px;
}

.page{ display:none; }
.page.is-on{ display:block; }

.mt{ margin-top: 14px; }

/* =========================
   Buttons / Form / Common
========================= */
.row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:0;
}

.row.gap{
  gap:8px;
  flex-wrap:wrap;
}

.btn,
.btn_outline,
.btn_soft,
.btn_ghost{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor:pointer;
  transition: .16s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn{
  border:0;
  background: var(--orange);
  color:#fff;
  box-shadow: 0 10px 22px rgba(255,95,42,.16);
}
.btn:hover{ background: var(--orange2); }

.btn_outline{
  border:1px solid var(--line);
  background:#fff;
  color:#111;
  box-shadow:none;
}
.btn_outline:hover{
  border-color: rgba(255,95,42,.28);
  background: #fffaf8;
}

.btn_soft{
  border:1px solid rgba(255,95,42,.16);
  background: rgba(255,95,42,.10);
  color: var(--orange);
  box-shadow:none;
}
.btn_soft:hover{
  background: rgba(255,95,42,.16);
  border-color: rgba(255,95,42,.28);
}

.btn_ghost{
  border:1px solid transparent;
  background: rgba(15,23,42,.045);
  color: #111827;
  box-shadow:none;
}
.btn_ghost:hover{
  background: rgba(15,23,42,.075);
}

.btn.full,
.btn_outline.full,
.btn_soft.full,
.btn_ghost.full{
  width:100%;
}

.btn:disabled,
.btn_outline:disabled,
.btn_soft:disabled,
.btn_ghost:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}

.icon_btn{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(15,23,42,.04);
  color:#0f172a;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  transition:.16s ease;
}
.icon_btn:hover{
  background: rgba(15,23,42,.08);
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  line-height:1;
  border:1px solid var(--line);
  background: rgba(0,0,0,.02);
  white-space: nowrap;
}

.tiny{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.empty_note{
  padding: 0 16px 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  display: none;
}

.field .label{
  font-size:12px;
  color:var(--muted);
  display:block;
  margin-bottom:6px;
  font-weight:800;
}

.input,
.select,
.textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 11px 12px;
  font-size: 14px;
  background:#fff;
  color:var(--text);
  transition:.15s ease;
}

.input:hover,
.select:hover,
.textarea:hover{
  border-color: var(--line-strong);
}

.textarea{
  min-height: 110px;
  resize: vertical;
}

/* =========================
   Panel
========================= */
.panel{
  background: var(--card);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.panel_head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.88);
}

.panel_head.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.panel_title{
  font-weight:900;
  font-size:15px;
  line-height:1.2;
}

.panel_desc{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.panel_body{
  padding:16px;
}

.head_actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* =========================
   Home
========================= */
.hero{
  display:block;
}

.hero_card{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.service_grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.service_grid_top{
  margin-top: 2px;
}

.service_item{
  border:1px solid rgba(15,23,42,.06);
  background: linear-gradient(180deg, #ffffff, #fcfcfd);
  padding: 16px 10px;
  cursor:pointer;
  border-radius: 18px;
  transition:.16s ease;
  text-align:center;
  box-shadow: 0 4px 14px rgba(15,23,42,.04);
}
.service_item:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  border-color: rgba(255,95,42,.15);
}
.service_item:active{ transform: translateY(0); }

.hex{
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--orange);
  clip-path: polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%);
  box-shadow: 0 12px 24px rgba(255,95,42,.20);
}
.hex svg{
  width:28px;
  height:28px;
  fill:#fff;
}

.service_name{
  font-weight:900;
  font-size:14px;
  margin-top:2px;
}
.service_hint{
  margin-top:7px;
  font-size:12px;
  font-weight:800;
  color: rgba(0,0,0,.45);
}

/* 홈 비주얼 배너 */
.home_visual_banner{
  border-radius: 26px;
  overflow:hidden;
  border: 1px solid rgba(255,95,42,.10);
  background:
    linear-gradient(135deg, #ff6a37 0%, #ff5f2a 35%, #ff7a50 100%);
  box-shadow: 0 18px 40px rgba(255,95,42,.18);
}

.home_visual_inner{
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 18px;
  align-items:stretch;
  padding: 26px;
}

.home_visual_text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.home_visual_kicker{
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  color: rgba(255,255,255,.78);
}

.home_visual_title{
  margin:10px 0 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height:1.12;
  font-weight:1000;
  letter-spacing:-.03em;
  color:#fff;
}

.home_visual_desc{
  margin:14px 0 0;
  max-width: 540px;
  font-size:14px;
  line-height:1.7;
  color: rgba(255,255,255,.86);
}

.home_visual_text .row{
  margin-top: 18px;
}

.home_visual_text .btn{
  background:#fff;
  color:var(--orange);
  box-shadow:none;
}
.home_visual_text .btn:hover{
  background:#fff4ef;
}

.home_visual_text .btn_outline{
  border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.12);
  color:#fff;
}
.home_visual_text .btn_outline:hover{
  background: rgba(255,255,255,.18);
}

.home_visual_mock{
  min-height: 240px;
  border-radius: 22px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mock_card{
  position:absolute;
  width: 38%;
  min-width: 120px;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.60);
  box-shadow: 0 12px 24px rgba(15,23,42,.12);
}

.mock_card_a{
  left: 10%;
  bottom: 12%;
  transform: rotate(-12deg);
}
.mock_card_b{
  left: 31%;
  top: 12%;
  transform: rotate(2deg);
}
.mock_card_c{
  right: 10%;
  bottom: 10%;
  transform: rotate(14deg);
}

/* 기업 설명 */
.home_company_intro{
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.06);
  background: linear-gradient(180deg, #ffffff, #fbfbfc);
  padding: 22px;
  box-shadow: var(--shadow2);
}

.intro_head{
  max-width: 760px;
}

.section_eyebrow{
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  color: var(--orange);
}

.section_title{
  margin:8px 0 0;
  font-size: clamp(22px, 3vw, 30px);
  line-height:1.18;
  font-weight:1000;
  letter-spacing:-.03em;
}

.section_desc{
  margin:10px 0 0;
  color: var(--muted);
  font-size:14px;
  line-height:1.7;
}

.intro_grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.intro_card{
  border:1px solid rgba(15,23,42,.06);
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 4px 14px rgba(15,23,42,.04);
}

.intro_icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,95,42,.10);
  color: var(--orange);
  font-weight:1000;
  font-size:14px;
}

.intro_card_title{
  margin-top: 12px;
  font-weight: 900;
  font-size: 15px;
}

.intro_card_desc{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

/* =========================
   Upload - 2 Step Flow
========================= */
.upload_flow_panel .panel_body{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.upload_steps{
  display:flex;
  align-items:center;
  gap:12px;
}

.upload_step{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--muted2);
}

.upload_step.is-active{
  color: var(--text);
}

.upload_step_no{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  font-size: 13px;
  border: 1px solid var(--line);
  background: #fff;
}

.upload_step.is-active .upload_step_no{
  background: var(--orange);
  border-color: var(--orange);
  color:#fff;
  box-shadow: 0 8px 18px rgba(255,95,42,.16);
}

.upload_step_text{
  font-size:13px;
  font-weight:900;
}

.upload_step_line{
  flex: 0 0 46px;
  height:1px;
  background: var(--line);
}

.upload_stage{
  display:none;
}
.upload_stage.is-on{
  display:block;
}

.upload_stage_layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
  align-items:start;
}

.upload_stage_left,
.upload_stage_right{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.upload_box input[type="file"]{ display:none; }

/* -------------------------
   업로드 이미지 입력 영역
   - 기존 깨짐 문제 해결용
   - 이미지 / 빈상태를 absolute 레이어로 겹쳐서 관리
------------------------- */
.preview{
  width:100%;
  height: 320px;
  border-radius: 18px;
  border: 1px dashed rgba(255,95,42,.40);
  background:
    linear-gradient(180deg, rgba(255,95,42,.045), rgba(255,95,42,.03));
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:.16s ease;
}

.preview.is-over{
  border-color: rgba(255,95,42,.85);
  background: rgba(255,95,42,.06);
}

/* 업로드 실제 이미지 레이어 */
#upload_preview{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  display:none;
  background:#fff;
  z-index:1;
}

/* 업로드 빈 상태 레이어 */
.preview_empty{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: var(--muted);
  padding: 16px;
  user-select:none;
  pointer-events:none;
}

.preview_empty_small{
  min-height: 180px;
}

.empty_icon{
  width:52px;
  height:52px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 10px;
  font-size: 24px;
  font-weight: 900;
  color: var(--orange);
  background: rgba(255,95,42,.12);
  border: 1px solid rgba(255,95,42,.20);
}

.empty_title{
  font-weight:900;
  color: var(--text);
  margin-bottom:4px;
}

.empty_sub{
  font-size:12px;
  color: var(--muted);
}

.form_block{
  border:1px solid rgba(15,23,42,.06);
  border-radius: 18px;
  background:#fff;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(15,23,42,.04);
}

.form_block_title{
  font-size:14px;
  font-weight:1000;
  margin-bottom: 12px;
}

.upload_notice{
  border:1px solid rgba(255,95,42,.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,95,42,.08), rgba(255,95,42,.04));
  padding: 16px;
}

.upload_notice_title{
  font-size:14px;
  font-weight:1000;
  color: var(--orange);
}

.upload_notice_desc{
  margin-top: 8px;
  font-size:13px;
  line-height:1.65;
  color: #7c2d12;
}

.upload_actions{
  justify-content:flex-end;
}

/* 최종 확인 */
.upload_confirm_wrap{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
  align-items:start;
}

.upload_confirm_preview,
.upload_confirm_meta{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.upload_confirm_preview_head{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.upload_confirm_title{
  font-weight:1000;
  font-size:16px;
}

.upload_confirm_desc{
  font-size:13px;
  color: var(--muted);
}

/* 최종 확인 이미지도 레이어 구조로 맞춤 */
.upload_confirm_imagebox{
  position:relative;
  border:1px solid rgba(15,23,42,.06);
  border-radius: 20px;
  background:#fff;
  min-height: 360px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 18px rgba(15,23,42,.04);
}

#confirm_preview{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  display:none;
  z-index:1;
}

.confirm_card{
  border:1px solid rgba(15,23,42,.06);
  border-radius: 18px;
  background:#fff;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(15,23,42,.04);
}

.confirm_card.accent{
  border-color: rgba(255,95,42,.14);
  background: linear-gradient(180deg, #fff8f5, #fffdfc);
}

.confirm_card_title{
  font-size:14px;
  font-weight:1000;
}

.confirm_card_desc{
  margin-top:8px;
  font-size:13px;
  line-height:1.65;
  color: var(--muted);
}

.confirm_list{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.confirm_item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.confirm_item:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.confirm_key{
  flex: 0 0 72px;
  font-size:12px;
  font-weight:800;
  color: var(--muted);
}

.confirm_val{
  flex:1;
  text-align:right;
  font-size:14px;
  font-weight:800;
  color: var(--text);
}
.confirm_val.multiline{
  white-space: pre-wrap;
  word-break: break-word;
}

/* =========================
   Outfit / Closet
========================= */
.outfit_row{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap: 16px;
  align-items:start;
}

.left_stack,
.right_stack{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

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

.slot_sq{
  position:relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:#fff;
  padding: 12px;
  min-height: 118px;
  cursor:pointer;
  transition:.15s ease;
  overflow:hidden;
}
.slot_sq:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
}
.slot_sq.has{
  border-color: rgba(255,95,42,.28);
  background: rgba(255,95,42,.03);
}
.slot_k{
  font-weight:900;
  font-size:13px;
  color: var(--text);
}
.slot_v{
  margin-top:18px;
  font-size:12px;
  color: var(--muted);
}
.slot_img{
  display:none;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: 16px;
  pointer-events:none;
}

.body_inline{
  padding: 14px;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(0,0,0,.015));
}
.body_title{
  font-weight:1000;
  font-size:13px;
  color: var(--muted);
  margin-bottom: 10px;
}
.body_form{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.score_radar_wrap{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.score_block,
.radar_block{
  padding: 14px;
  border:1px solid rgba(15,23,42,.06);
  border-radius: 18px;
  background:#fff;
  box-shadow: 0 4px 14px rgba(15,23,42,.04);
}

.score_title{
  font-weight:900;
  color: var(--muted);
  font-size:13px;
}

.score_big{
  margin-top: 8px;
  font-weight:1000;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -.03em;
}

.score_unit{
  font-size:22px;
  color: var(--muted);
  margin-left: 4px;
}

.radar_title{
  font-weight:1000;
  margin-bottom: 8px;
}

.radar_block canvas{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 420 / 340;
}

.panel_in canvas,
.modal_section canvas{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 520 / 320;
}

.closet_tools .select{ width: 140px; }
.closet_tools .input{ width: 200px; }

/* =========================
   Closet Cards
========================= */
.grid{
  padding: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.item{
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 16px;
  background: #fff;
  display:flex;
  gap: 12px;
  padding: 12px;
  cursor:pointer;
  transition: .15s ease;
  box-shadow: 0 4px 12px rgba(15,23,42,.03);
}
.item:hover{
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  transform: translateY(-1px);
}
.item:focus-visible{
  box-shadow: 0 0 0 4px rgba(255,95,42,.14);
  border-color: rgba(255,95,42,.45);
}

.thumb{
  width: 86px;
  height: 86px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.06);
  background: rgba(0,0,0,.02);
  flex: 0 0 auto;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.meta{
  flex:1;
  min-width:0;
}

.name_row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.name{
  font-weight:900;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.kind_badge_big{
  font-weight:900;
  color: var(--orange);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,95,42,.22);
  background: rgba(255,95,42,.08);
  flex: 0 0 auto;
}

.add_btn{
  border: 1px solid rgba(255,95,42,.26);
  background: rgba(255,95,42,.08);
  color: var(--orange);
  font-weight: 900;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  cursor:pointer;
  transition:.15s ease;
}
.add_btn:hover{
  background: rgba(255,95,42,.14);
}

.mini_stats{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}

.pill{
  display:flex;
  gap:6px;
  align-items:center;
  padding: 6px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.02);
  font-size:12px;
}

.pill b{
  font-weight:900;
  color: var(--orange);
}

/* =========================
   Modal - New Structure
========================= */
.modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.is-on{
  display:flex;
}

.modal_dim{
  position:absolute;
  inset:0;
  background: rgba(15,23,42,.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal_box{
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-height: calc(100vh - 48px);
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.60);
  border-radius: 24px;
  box-shadow:
    0 24px 80px rgba(15,23,42,.20),
    0 8px 24px rgba(15,23,42,.10);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  animation: modalPop .18s ease-out;
}

@keyframes modalPop{
  from{
    opacity:0;
    transform: translateY(14px) scale(.985);
  }
  to{
    opacity:1;
    transform: translateY(0) scale(1);
  }
}

.modal_head{
  position: sticky;
  top: 0;
  z-index: 3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 18px 22px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.modal_head_modern{
  padding: 18px 22px;
}

.modal_head_left{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.modal_eyebrow{
  font-size:11px;
  letter-spacing:.14em;
  font-weight:900;
  color: var(--orange);
}

.modal_title_wrap{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.modal_title{
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -.02em;
  color: var(--text);
}

.modal_head_actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.modal_shell{
  flex:1 1 auto;
  overflow:auto;
  padding: 20px;
  display:grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: 20px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.82), rgba(248,250,252,.96));
}

.modal_visual_panel,
.modal_info_panel{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.modal_visual_card,
.modal_section{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.88);
  box-shadow:
    0 8px 24px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.modal_visual_actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.modal_visual_actions .btn,
.modal_visual_actions .btn_ghost,
.modal_visual_actions .btn_outline,
.modal_visual_actions .btn_soft{
  flex:1 1 0;
  min-width:120px;
}

.imgbox{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.8), rgba(248,250,252,.95));
  border: 1px solid rgba(15,23,42,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 10px 30px rgba(15,23,42,.06);
}

.imgbox.modern img,
.imgbox img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,95,42,.18);
  background: linear-gradient(180deg, rgba(255,95,42,.12), rgba(255,95,42,.07));
  color: var(--orange);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

.panel_in{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.88);
  box-shadow:
    0 8px 24px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.panel_in_title{
  margin:0 0 12px;
  font-size:14px;
  font-weight:1000;
  letter-spacing:-.02em;
  color:var(--text);
}

.panel_in_sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.modal_section_head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 12px;
  flex-wrap:wrap;
}

.edit_grid{
  display:grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(120px, .7fr);
  gap:10px;
  margin-bottom:12px;
}
.edit_grid.modern{
  margin-bottom: 12px;
}

.modal_stats_grid{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: 14px;
}

.modal_recommend_grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

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

.stat_num{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
  padding:10px 12px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  font-size:13px;
  color:var(--text);
}

.stat_num span{
  color: var(--muted);
  font-weight: 700;
}
.stat_num b{
  font-weight: 900;
  color: var(--orange);
  font-size: 13px;
}

.mini_list{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

.mini_list.modern .item,
.mini_list .item{
  margin:0;
  padding:12px;
  gap:12px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96));
  box-shadow:
    0 6px 18px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.mini_list .item:hover{
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
  border-color: rgba(255,95,42,.18);
}

.mini_list .thumb{
  width:72px;
  height:72px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.06);
  background: rgba(15,23,42,.03);
  flex-shrink:0;
}

.mini_list .thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.mini_list .name{
  font-size:14px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--text);
}

.mini_list .meta{
  font-size:12px;
  color:var(--muted);
}

.mini_list .add_btn{
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
}

/* =========================
   Crop Modal
========================= */
.crop_box{
  width: min(1040px, 100%);
}

.crop_body{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  padding: 18px;
  overflow:auto;
}

.crop_stage{
  min-height: 460px;
  border-radius: 20px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  background: #f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
}

.crop_stage img{
  display:block;
  max-width:100%;
}

.crop_tools{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.tool_group{
  border:1px solid rgba(15,23,42,.06);
  border-radius:18px;
  background:#fff;
  padding:14px;
  box-shadow: 0 4px 14px rgba(15,23,42,.04);
}

.tool_group_title{
  font-size:13px;
  font-weight:1000;
  margin-bottom:10px;
}

/* =========================
   Body Analysis Layout Upgrade
========================= */

.body_analysis_layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap:18px;
  align-items:start;
}

.body_analysis_left,
.body_analysis_right{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

.analysis_view_wrap{
  width:100%;
}

.analysis_view{
  position:relative;
  width:100%;
  min-height:420px;
  background:
    linear-gradient(180deg, rgba(255,95,42,.08), rgba(255,95,42,.03));
  border:1px dashed rgba(255,95,42,.32);
  border-radius:20px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}

.analysis_view.is-over{
  border-color: rgba(255,95,42,.85);
  background: rgba(255,95,42,.08);
}

#body_canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:1;
}

#analysis_placeholder{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  color:var(--muted);
  user-select:none;
}

.body_analysis_actions{
  margin-top:12px;
  display:flex;
  gap:10px;
}

.body_analysis_actions .btn{
  flex:1 1 0;
}

.body_info_card,
.body_status_card{
  border:1px solid rgba(15,23,42,.06);
  border-radius:18px;
  background:#fff;
  padding:16px;
  box-shadow: 0 6px 18px rgba(15,23,42,.04);
}

.body_info_title,
.body_status_title{
  font-size:14px;
  font-weight:1000;
  margin-bottom:10px;
}

.body_info_list{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

.body_status_text{
  font-size:14px;
  color:var(--text);
  font-weight:700;
  line-height:1.6;
}

.result_card{
  width:100%;
  max-width:none;
}

@media (max-width: 980px){
  .body_analysis_layout{
    grid-template-columns:1fr;
  }
}
/* =========================
   Body Analysis
   - 업로드와 비슷한 입력 경험을 주도록 구조 보강
========================= */
.body_analysis_container{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:center;
}

.analysis_view_wrap{
  width:100%;
  max-width:500px;
}

/* 체형 이미지 입력 박스
   - 업로드 preview와 비슷한 레이어 구조 */
.analysis_view{
  position:relative;
  width:100%;
  max-width:500px;
  min-height:400px;
  background:
    linear-gradient(180deg, rgba(255,95,42,.08), rgba(255,95,42,.03));
  border: 1px dashed rgba(255,95,42,.32);
  border-radius: 18px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.16s ease;
}

/* 드래그 오버 표시 */
.analysis_view.is-over{
  border-color: rgba(255,95,42,.85);
  background: rgba(255,95,42,.08);
}

/* 체형 캔버스 레이어 */
#body_canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:1;
}

/* 체형 placeholder 레이어 */
#analysis_placeholder{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  color:#888;
  padding:16px;
  user-select:none;
}

/* 체형 결과 카드 */
.result_card{
  width:100%;
  max-width:500px;
  background:#fff;
  padding:20px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.06);
}

.result_header h4{
  margin:0;
  font-size:18px;
}

.result_details{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:14px;
  color:var(--text);
}

.flex{ display:flex; }
.flex-1{ flex:1 1 0; }
.gap-2{ gap:8px; }
.bg-gray-100{ background:#f1f5f9; }
.p-2{ padding:10px; }
.rounded{ border-radius:12px; }
.font-bold{ font-weight:900; }
.text-orange-500{ color: var(--orange); }

/* 체형 분석 로딩 레이어 */
.loader_overlay{
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.82);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:20;
}

.hidden{ display:none !important; }

.spinner{
  width:40px;
  height:40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--orange);
  border-radius:50%;
  animation: spin 1s linear infinite;
  margin-bottom:10px;
}
@keyframes spin{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

/* =========================
   Responsive
========================= */
@media (max-width: 980px){
  .service_grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .home_visual_inner{
    grid-template-columns: 1fr;
  }

  .intro_grid{
    grid-template-columns: 1fr;
  }

  .upload_stage_layout,
  .upload_confirm_wrap,
  .outfit_row,
  .modal_shell,
  .crop_body,
  .modal_stats_grid,
  .modal_recommend_grid{
    grid-template-columns: 1fr;
  }

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

  .closet_tools .select,
  .closet_tools .input{
    width: 100%;
  }
}

@media (max-width: 720px){
  .top_inner{
    height:auto;
    padding:10px 14px;
    flex-wrap:wrap;
    gap:10px;
  }

  .brand{
    font-size:22px;
  }

  .nav{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:6px;
  }
  .nav::-webkit-scrollbar{ display:none; }

  .nav_btn.is-active::after{
    bottom:-8px;
  }

  .wrap{
    padding: 14px 14px 56px;
  }

  .service_grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview{
    height: 240px;
  }

  .upload_steps{
    gap:8px;
  }

  .upload_step_text{
    font-size:12px;
  }

  .upload_step_line{
    flex-basis: 22px;
  }

  .modal{
    padding: 14px;
  }

  .modal_box{
    width:100%;
    max-height: calc(100vh - 28px);
    border-radius: 20px;
  }

  .modal_head{
    padding: 14px 16px;
  }

  .modal_title{
    font-size:16px;
  }

  .modal_shell{
    padding: 16px;
    gap: 16px;
  }

  .panel_in,
  .modal_section,
  .modal_visual_card{
    padding: 14px;
    border-radius: 16px;
  }

  .imgbox{
    border-radius: 16px;
  }

  .mini_list .thumb{
    width:64px;
    height:64px;
    border-radius:12px;
  }

  .stat_numbers{
    grid-template-columns: 1fr;
  }

  .crop_stage{
    min-height: 280px;
  }
}

@media (max-width: 540px){
  .service_grid{
    grid-template-columns: 1fr;
  }

  .score_big{
    font-size: 46px;
  }

  .edit_grid{
    grid-template-columns: 1fr;
  }

  .confirm_item{
    flex-direction:column;
    gap:6px;
  }

  .confirm_key,
  .confirm_val{
    text-align:left;
    flex: 0 0 auto;
  }

  .home_visual_title{
    font-size: 28px;
  }

  .home_visual_inner{
    padding: 20px;
  }

  .home_company_intro{
    padding: 18px;
  }
}