/* simple-flow.css — 무드코디 단순 화면 레이어
   범위: body.simple-flow 전용. 기존 css/메타/동작/텍스트(i18n)는 건드리지 않음.
   외부 폰트·라이브러리 없음. 텍스트 교체는 HTML/JS(토니) 담당. */

body.simple-flow {
  --sf-ink: #111111;
  --sf-sub: #6b6b6b;
  --sf-line: #e4e4e4;
  --sf-bg: #ffffff;
  --sf-soft: #f6f6f4;
  --sf-lime: #c6f432;
  --sf-gap: clamp(20px, 4vw, 48px);
  margin: 0;
  background: var(--sf-bg);
  color: var(--sf-ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* hidden 속성 숨김 우선 보장 */
body.simple-flow [hidden],
body.simple-flow #resultColumn[hidden] {
  display: none !important;
}

/* ---------- 상단 메뉴 ---------- */
body.simple-flow .header.wrap.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px var(--sf-gap);
  background: var(--sf-bg);
  border-bottom: 1px solid var(--sf-line);
  box-shadow: none;
}

body.simple-flow .app-header .brand {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sf-ink);
  text-decoration: none;
  white-space: nowrap;
}

body.simple-flow .app-header .private-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--sf-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--sf-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

body.simple-flow .app-header .private-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sf-lime);
  flex: 0 0 auto;
}

body.simple-flow .app-header .text-btn {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--sf-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

body.simple-flow .app-header .text-btn:hover,
body.simple-flow .app-header .text-btn:focus-visible {
  border-bottom-color: var(--sf-ink);
}

/* ---------- 히어로 ---------- */
body.simple-flow .hero.simple-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: 30px var(--sf-gap);
  background: none;
  min-height: 0;
  text-align: left;
}

body.simple-flow .simple-hero .hero-copy h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--sf-ink);
}

body.simple-flow .simple-hero .hero-desc {
  margin: 0;
  max-width: 34em;
  font-size: 15px;
  color: var(--sf-sub);
}

/* 입력 탭과 중복되는 CTA 숨김 */
body.simple-flow .simple-hero .hero-cta {
  display: none !important;
}

body.simple-flow .simple-hero .micro-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--sf-sub);
}

/* ---------- 스튜디오 ---------- */
body.simple-flow .studio {
  padding: 0 var(--sf-gap) 64px;
  background: none;
}

body.simple-flow .studio .studio-head {
  max-width: 720px;
  margin: 0 auto 16px;
  padding: 0;
}

/* 중복 설명 숨김 (단계 안내 .step-note 는 유지) */
body.simple-flow .studio .studio-head > p:not(.step-note),
body.simple-flow .studio .studio-head > h2 + p:not(.step-note) {
  display: none;
}

body.simple-flow .studio .step-note {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-sub);
}

body.simple-flow .studio .studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  max-width: 720px;
  margin: 0 auto;
}

body.simple-flow .studio-grid > * {
  min-width: 0;
}

body.simple-flow .input-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

body.simple-flow .input-column .panel-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sf-ink);
}

body.simple-flow .input-column .dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 200px;
  padding: 28px 20px;
  border: 1px dashed #bdbdbd;
  border-radius: 0;
  background: var(--sf-soft);
  color: var(--sf-ink);
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.simple-flow .input-column .dropzone:hover,
body.simple-flow .input-column .dropzone:focus-within,
body.simple-flow .input-column .dropzone.dragover,
body.simple-flow .input-column .dropzone.is-dragover {
  border-color: var(--sf-ink);
  background: #fbfbf9;
}

body.simple-flow .input-column .upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.simple-flow .input-column .upload-actions > * {
  flex: 1 1 140px;
}

body.simple-flow .input-column .photo-meta {
  font-size: 12px;
  color: var(--sf-sub);
}

/* 개인정보·동의 안내는 숨기지 않음, 정돈만 */
body.simple-flow .input-column .privacy-near-upload {
  padding: 10px 12px;
  border-left: 2px solid var(--sf-lime);
  background: var(--sf-soft);
  font-size: 12px;
  line-height: 1.6;
  color: #333333;
}

body.simple-flow .input-column .consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sf-ink);
}

body.simple-flow .input-column .consent-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--sf-ink);
}

/* 주 행동 버튼: 흑백 + 라임 포인트 */
body.simple-flow .input-column .analyze {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: 1px solid var(--sf-ink);
  border-radius: 0;
  background: var(--sf-ink);
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body.simple-flow .input-column .analyze:hover:not(:disabled),
body.simple-flow .input-column .analyze:focus-visible {
  background: var(--sf-lime);
  color: var(--sf-ink);
}

body.simple-flow .input-column .analyze:disabled {
  background: #d6d6d6;
  border-color: #d6d6d6;
  color: #7a7a7a;
  cursor: not-allowed;
}

body.simple-flow .input-column .demo-link {
  align-self: center;
  font-size: 13px;
  color: var(--sf-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.simple-flow .input-column .demo-link:hover {
  color: var(--sf-ink);
}

/* ---------- 결과 ---------- */
body.simple-flow .result-column {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* 빈 상태 화보 숨김 */
body.simple-flow .result-column #resultEmpty {
  display: none !important;
}

/* 결과 내용 자체는 숨기지 않음. 비어 있을 때만 접음 */
body.simple-flow .result-column #resultContent:empty {
  display: none;
}

body.simple-flow .result-column #resultContent {
  padding-top: 24px;
  border-top: 1px solid var(--sf-ink);
}

/* ---------- 접힘 영역 (사진첩/근거/설정) ---------- */
body.simple-flow details.explore,
body.simple-flow details.method,
body.simple-flow details.simple-settings {
  max-width: 720px;
  margin: 0 auto;
  border-top: 1px solid var(--sf-line);
}

body.simple-flow details.explore:last-of-type,
body.simple-flow details.method:last-of-type,
body.simple-flow details.simple-settings:last-of-type {
  border-bottom: 1px solid var(--sf-line);
}

body.simple-flow details.explore > summary,
body.simple-flow details.method > summary,
body.simple-flow details.simple-settings > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sf-ink);
  cursor: pointer;
}

body.simple-flow details.explore > summary::-webkit-details-marker,
body.simple-flow details.method > summary::-webkit-details-marker,
body.simple-flow details.simple-settings > summary::-webkit-details-marker {
  display: none;
}

body.simple-flow details.explore > summary::after,
body.simple-flow details.method > summary::after,
body.simple-flow details.simple-settings > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

body.simple-flow details.explore[open] > summary::after,
body.simple-flow details.method[open] > summary::after,
body.simple-flow details.simple-settings[open] > summary::after {
  content: "\2212";
}

body.simple-flow details.explore > summary:focus-visible,
body.simple-flow details.method > summary:focus-visible,
body.simple-flow details.simple-settings > summary:focus-visible {
  outline: 2px solid var(--sf-lime);
  outline-offset: 2px;
}

body.simple-flow details.explore[open],
body.simple-flow details.method[open],
body.simple-flow details.simple-settings[open] {
  padding-bottom: 20px;
}

body.simple-flow .simple-settings {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--sf-gap);
}

/* ---------- 반응형 ---------- */
@media (max-width: 600px) {
  body.simple-flow {
    --sf-gap: 20px;
  }

  body.simple-flow .header.wrap.app-header {
    padding: 14px var(--sf-gap);
  }

  body.simple-flow .hero.simple-hero {
    padding: 24px var(--sf-gap) 20px;
  }

  body.simple-flow .studio .studio-grid {
    gap: 24px;
  }

  body.simple-flow .input-column .dropzone {
    min-height: 160px;
  }
}

@media (max-width: 390px) {
  body.simple-flow {
    --sf-gap: 16px;
  }

  body.simple-flow .header.wrap.app-header {
    gap: 6px 12px;
  }

  body.simple-flow .app-header .brand {
    font-size: 14px;
    letter-spacing: 0.12em;
  }

  body.simple-flow .app-header .text-btn {
    font-size: 12px;
  }

  body.simple-flow .simple-hero .hero-copy h1 {
    font-size: 24px;
  }

  body.simple-flow .simple-hero .hero-desc {
    font-size: 14px;
  }

  body.simple-flow .input-column .upload-actions > * {
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.simple-flow * {
    transition: none !important;
  }
}

/* Tony integration: remove repeated introductory labels, preserve task controls. */
body.simple-flow .private-pill,body.simple-flow .brand-mark,body.simple-flow .brand-en,body.simple-flow .hero .eyebrow,body.simple-flow .hero .micro-note,body.simple-flow .studio-head,body.simple-flow .panel-label,body.simple-flow .guide-strip{display:none!important}
body.simple-flow .simple-hero .hero-copy h1{font-size:clamp(25px,4vw,38px);line-height:1.3;margin-bottom:12px}
body.simple-flow .hero{padding:24px 0 18px!important;margin-bottom:0!important}
body.simple-flow .studio{margin-top:0!important;padding-top:0!important}
body.simple-flow .dropzone small{font-size:11px}
body.simple-flow .app-header .brand{letter-spacing:-.5px;font-size:20px}
body.simple-flow .header.wrap.app-header{position:relative;top:auto}

body.simple-flow{--bg:#fff;--paper:#fff;--ink:#161616;--muted:#666;--line:#e5e5e5;--purple:#171717;--pale:#f5f5f2;--sage:#f6f6f3;--lime:#d9ff96;--lime-soft:#f2f6ed;--lime-ink:#1c2712}
body.simple-flow .header.wrap.app-header{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:8px 16px!important;padding:16px!important;min-height:0!important;height:auto!important}
body.simple-flow .app-header>*{width:auto!important;max-width:none!important;min-width:0!important;flex:0 0 auto!important;margin:0!important;grid-column:auto!important}
body.simple-flow .app-header .brand{margin-right:auto!important}
body.simple-flow .app-header>a.text-btn,body.simple-flow .app-header>#clearAllPhotos,body.simple-flow .app-header>#openAbout{background:transparent!important;border:0!important;padding:5px 0!important;font-size:11px!important;color:#444!important;box-shadow:none!important}
body.simple-flow .first-visit{display:none!important}
body.simple-flow .tabs{background:#f5f5f3!important;border-color:#e4e4e4!important}
body.simple-flow .tabs button{font-size:13px!important;padding:13px 8px!important;color:#666!important;white-space:nowrap}
body.simple-flow .tabs button[aria-selected=true]{background:#171717!important;color:white!important;border-color:#171717!important}
body.simple-flow .simple-hero h1>span{background:none!important;color:#171717!important}
body.simple-flow .dropzone{border-radius:12px!important;box-shadow:none!important}
body.simple-flow .demo-link{background:transparent!important;color:#444!important;border:0!important;box-shadow:none!important}
body.simple-flow .studio-grid{padding:0!important;box-shadow:none!important;border:0!important;background:white!important}
body.simple-flow .input-column{padding:0!important;border:0!important;background:white!important}
body.simple-flow .result-column{background:white!important}
body.simple-flow .upload-actions{display:flex!important;gap:10px!important}body.simple-flow .upload-actions>*{flex:1 1 0!important;width:auto!important;min-width:0!important}body.simple-flow .btn.dark,body.simple-flow .btn.primary{background:#171717!important;border-color:#171717!important;color:white!important}body.simple-flow .btn.light{background:#f6f6f3!important;border-color:#deded8!important;color:#333!important}body.simple-flow .dropzone{min-height:240px!important;padding:22px 16px!important}body.simple-flow .dropzone .upload-icon{width:40px!important;height:40px!important;margin-bottom:12px!important;background:transparent!important}body.simple-flow .upload-actions{margin-top:16px!important}body.simple-flow .upload-actions button{font-size:13px!important}

/* 2026-11-01 루크: 토니 검토 반영 — 모바일 헤더 2줄 grid 복원(코디 사진첩 높이·사용방법 잘림), 비활성 분석 버튼 회색 */
@media(max-width:800px){
 body.simple-flow .header.wrap.app-header{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:auto auto!important;gap:8px!important;padding:12px 16px!important;align-items:center!important}
 body.simple-flow .app-header>.brand{grid-column:1/3!important;grid-row:1!important;justify-self:start!important;margin:0!important;min-height:44px}
 body.simple-flow .app-header>.lang-toggle{grid-column:3!important;grid-row:1!important;justify-self:end!important;margin:0!important}
 body.simple-flow .app-header>a.text-btn{grid-column:1!important;grid-row:2!important}
 body.simple-flow .app-header>#clearAllPhotos{grid-column:2!important;grid-row:2!important}
 body.simple-flow .app-header>#openAbout{grid-column:3!important;grid-row:2!important}
 body.simple-flow .app-header>a.text-btn,body.simple-flow .app-header>#clearAllPhotos,body.simple-flow .app-header>#openAbout{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;max-width:none!important;min-height:44px!important;height:100%!important;padding:8px 4px!important;border:1px solid #e3e3df!important;border-radius:9px!important;background:#f6f6f3!important;color:#333!important;font-size:12px!important;line-height:1.3!important;white-space:normal!important;text-align:center!important;word-break:keep-all}
}
body.simple-flow .input-column .analyze:disabled,body.simple-flow .btn.primary:disabled{background:#d6d6d6!important;border-color:#d6d6d6!important;color:#666!important;cursor:not-allowed!important}