:root {
  --blue:#3182f6;
  --blue-pressed:#1b64da;
  --ink:#171b22;
  --sub:#6b7684;
  --line:#e5e8eb;
  --soft:#f2f4f6;
  --soft-blue:#eef6ff;
  --white:#fff;
  --radius:24px;
}

* { box-sizing:border-box; }
html { background:var(--white); }
body {
  min-width:320px;
  margin:0;
  color:var(--ink);
  background:var(--white);
  font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",Arial,sans-serif;
  letter-spacing:-.035em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible { outline:3px solid rgba(49,130,246,.3); outline-offset:3px; }
.app-shell { min-height:100vh; overflow:hidden; }
.screen { width:min(calc(100% - 40px), 760px); margin:0 auto; }
.screen[hidden] { display:none; }
.eyebrow { margin:0 0 14px; color:var(--blue); font-size:14px; font-weight:750; line-height:1.35; }
.screen h1 { max-width:760px; margin:0; font-size:clamp(38px,5.2vw,60px); font-weight:760; line-height:1.17; letter-spacing:-.07em; }
.screen h1 strong { color:var(--blue); font-weight:780; }
.screen-description,.hero-copy>p:last-child { margin:19px 0 0; color:var(--sub); font-size:17px; line-height:1.65; }

#start:not([hidden]) {
  min-height:100vh;
  padding:72px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero-copy { max-width:620px; }
.business-search {
  width:min(100%, 680px);
  margin-top:42px;
  padding:22px;
  border:1px solid #eef0f2;
  border-radius:var(--radius);
  background:var(--soft);
}
.business-search label,.contact-form label:not(.consent-row),.manual-store label { display:block; margin:0 0 10px; font-size:15px; font-weight:720; }
.contact-form label:not(.consent-row) em { margin-left:4px; color:var(--blue); font-size:13px; font-style:normal; font-weight:760; }
.business-search label { text-align:center; }
.search-row,.manual-input-row { display:flex; gap:10px; }
input {
  width:100%;
  min-width:0;
  height:60px;
  border:1px solid #dfe4ea;
  border-radius:16px;
  padding:0 18px;
  color:var(--ink);
  background:var(--white);
  font-size:17px;
  font-weight:520;
  outline:0;
}
input::placeholder { color:#aab1b8; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(49,130,246,.13); }
.button {
  min-height:60px;
  border:0;
  border-radius:16px;
  padding:0 24px;
  font-size:17px;
  font-weight:760;
  white-space:nowrap;
  transition:transform .15s ease,background .15s ease;
}
.button:active { transform:scale(.98); }
.button-primary { color:var(--white); background:var(--blue); }
.button-primary:hover { background:var(--blue-pressed); }
.button-secondary { color:var(--blue); background:#e8f3ff; }
.button-full { width:100%; margin-top:28px; }

.flow-screen { max-width:680px; padding:72px 0 96px; text-align:center; }
.back-button,.restart-button {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  margin:0 0 40px;
  padding:0 4px;
  border:0;
  color:var(--sub);
  background:transparent;
  font-size:15px;
  font-weight:700;
}
.back-button:hover,.restart-button:hover { color:var(--blue); }
.flow-screen .screen-description { max-width:460px; margin:18px auto 30px; }
.search-status { min-height:25px; margin:0 0 12px; color:var(--sub); font-size:14px; text-align:left; }
.search-status .pulse-dot { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--blue); }
.candidate-list { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--white); text-align:left; box-shadow:0 8px 24px rgba(25,31,40,.025); }
.candidate-card {
  display:grid;
  width:100%;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  padding:22px 22px;
  border:0;
  border-bottom:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  text-align:left;
  transition:background .15s ease;
}
.candidate-card:last-child { border-bottom:0; }
.candidate-card:hover { background:#f7fbff; }
.candidate-card:active { background:#edf6ff; }
.candidate-info h2 { margin:0 0 7px; font-size:19px; font-weight:760; letter-spacing:-.045em; }
.candidate-info p { margin:0; color:var(--sub); font-size:14px; line-height:1.55; }
.candidate-source { display:inline-block; margin:0 0 8px!important; color:var(--blue)!important; font-size:12px!important; font-weight:780; letter-spacing:-.02em; }
.candidate-select { padding:11px 13px; border-radius:12px; color:var(--blue); background:var(--soft-blue); font-size:14px; font-weight:760; white-space:nowrap; }
.empty-result { padding:36px 22px; color:var(--sub); line-height:1.65; text-align:center; }
.empty-result strong { display:block; margin-bottom:5px; color:var(--ink); font-size:17px; }
.alternative-heading { margin:30px 0 14px; text-align:left; }.alternative-heading span { color:var(--ink); font-size:17px; font-weight:760; }.alternative-heading p { margin:5px 0 0; color:var(--sub); font-size:14px; line-height:1.5; }
.manual-store { margin-top:10px; padding:20px 22px 22px; border:1px solid var(--line); border-radius:20px; background:var(--white); text-align:left; box-shadow:0 6px 18px rgba(25,31,40,.025); transition:border-color .15s ease, box-shadow .15s ease; }.manual-store:focus-within { border-color:#b9d8ff; box-shadow:0 8px 22px rgba(49,130,246,.08); }
.manual-store-title { display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }.manual-store-icon { display:grid; flex:0 0 auto; width:36px; height:36px; place-items:center; border-radius:12px; color:var(--blue); background:var(--soft-blue); font-size:21px; line-height:1; }.manual-store-icon.website-icon { color:#5e7187; background:#f0f4f7; }
.manual-store label { margin:0 0 3px; font-size:16px; }.manual-store-title p { margin:0; color:var(--sub); font-size:14px; line-height:1.5; }
.manual-input-row input,.manual-input-row .button { min-height:52px; height:52px; font-size:15px; }

.selected-store { display:inline-block; max-width:100%; margin:20px auto 24px; padding:10px 14px; overflow-wrap:anywhere; border-radius:12px; color:#4b5969; background:var(--soft); font-size:15px; line-height:1.45; }
.contact-form { padding:28px; border:1px solid var(--line); border-radius:22px; background:var(--white); text-align:left; box-shadow:0 8px 24px rgba(25,31,40,.025); }
.contact-form input { margin:0 0 22px; }
.consent-row { display:flex!important; gap:10px; align-items:flex-start; color:var(--sub); font-size:14px; line-height:1.55; }
.consent-row input { flex:0 0 auto; width:19px; height:19px; margin:1px 0 0; accent-color:var(--blue); }
.consent-row em { margin-left:4px; color:var(--blue); font-style:normal; font-weight:760; }
.privacy-detail-button { flex:0 0 auto; margin:-2px 0 0 auto; padding:3px 0; border:0; color:var(--blue); background:transparent; font-size:14px; font-weight:740; text-decoration:underline; text-underline-offset:3px; }
.privacy-dialog { width:min(calc(100% - 40px), 540px); max-height:min(720px, calc(100svh - 48px)); padding:0; border:0; border-radius:24px; box-shadow:0 24px 60px rgba(25,31,40,.24); }
.privacy-dialog::backdrop { background:rgba(25,31,40,.48); backdrop-filter:blur(2px); }
.privacy-dialog-content { padding:28px; overflow:auto; }
.privacy-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }
.privacy-dialog h2 { margin:0; font-size:23px; font-weight:760; letter-spacing:-.055em; }
.privacy-close-button { display:grid; flex:0 0 auto; width:36px; height:36px; place-items:center; padding:0; border:0; border-radius:50%; color:var(--sub); background:var(--soft); font-size:25px; line-height:1; }
.privacy-dialog dl { display:grid; grid-template-columns:94px 1fr; gap:16px 12px; margin:0; color:var(--sub); font-size:14px; line-height:1.6; }
.privacy-dialog dt { color:var(--ink); font-weight:750; }.privacy-dialog dd { margin:0; }
.privacy-confirm-button { width:100%; margin-top:28px; }

.loading-screen { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 0; text-align:center; }
.loading-screen>p:last-child { margin:20px 0 0; color:var(--sub); font-size:17px; }
.loading-symbol { width:64px; height:64px; margin-bottom:32px; border:6px solid #e8f3ff; border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.results-screen { max-width:760px; padding:72px 0 96px; text-align:center; }
.results-header { margin-bottom:34px; }
.restart-button { margin:20px 0 0; color:var(--blue); }
.score-card { padding:30px; border-radius:24px; color:var(--white); background:var(--blue); text-align:left; box-shadow:0 14px 28px rgba(49,130,246,.16); }
.score-card>p:first-child { margin:0 0 11px; font-size:15px; font-weight:720; }
.score-line { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-height:48px; }
.score-line #result-status { font-size:34px; font-weight:780; line-height:1; letter-spacing:-.065em; }
.score-state { padding:7px 10px; border-radius:99px; background:rgba(255,255,255,.18); font-size:13px; font-weight:700; }
.score-copy { max-width:560px; margin:13px 0 0; color:#e6f2ff; font-size:15px; line-height:1.6; }
.priority-section { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:16px; padding:30px; border-radius:24px; background:var(--soft-blue); text-align:left; }
.section-title h2 { margin:0; font-size:29px; font-weight:760; line-height:1.25; letter-spacing:-.06em; }
.priority-section>p { align-self:end; margin:0; color:var(--sub); font-size:15px; line-height:1.7; }
.channel-section { margin-top:68px; }
.channel-section .section-title { margin-bottom:20px; }
.channel-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left; }
.channel-card { display:grid; grid-template-columns:42px 1fr; align-items:center; gap:12px; padding:19px; border:1px solid var(--line); border-radius:18px; background:var(--white); }
.channel-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:14px; color:var(--blue); background:var(--soft-blue); font-size:21px; }
.channel-card h3,.channel-card p { margin:0; }.channel-card h3 { font-size:16px; }.channel-card p { margin-top:4px; color:var(--sub); font-size:13px; }

.analysis-overview { padding:30px; border-radius:24px; color:var(--white); background:var(--blue); text-align:left; box-shadow:0 14px 28px rgba(49,130,246,.16); }.analysis-overview .eyebrow { color:#dcecff; }.analysis-overview h2 { margin:0; font-size:31px; letter-spacing:-.06em; }.analysis-overview>p:last-child { margin:12px 0 0; color:#e6f2ff; font-size:15px; line-height:1.6; }
.search-plan { display:grid; grid-template-columns:.95fr 1.05fr; gap:28px; margin-top:16px; padding:28px 30px; border:1px solid #dcecff; border-radius:24px; background:#f7fbff; text-align:left; }.search-plan h2 { margin:0; font-size:25px; letter-spacing:-.055em; }.search-plan p { color:var(--sub); line-height:1.6; }.query-groups { display:grid; gap:18px; }.query-groups>div>strong { font-size:14px; }.query-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }.query-chips span { padding:7px 10px; border-radius:10px; color:#326db8; background:#e8f3ff; font-size:13px; font-weight:720; }.query-chips .empty-chip { color:var(--sub); background:var(--soft); }.source-note { grid-column:1 / -1; margin:0!important; font-size:13px; }
.actual-channel-section { margin-top:54px; }.analysis-channel-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; text-align:left; }.analysis-channel-card { min-height:255px; padding:22px; border:1px solid var(--line); border-radius:20px; background:var(--white); }.channel-card-head { display:flex; gap:12px; align-items:flex-start; }.channel-mark { display:grid; flex:0 0 auto; width:38px; height:38px; place-items:center; border-radius:12px; color:var(--blue); background:var(--soft-blue); font-size:17px; font-weight:850; }.instagram-mark { color:#d84187; background:#fff0f6; }.youtube-mark { color:#e13f3f; background:#fff0f0; }.home-mark { color:#547189; background:#eff5f8; }.channel-card-head h3 { margin:0; font-size:18px; letter-spacing:-.045em; }.channel-card-head p { margin:4px 0 0; color:var(--sub); font-size:14px; line-height:1.45; }.analysis-channel-card>p { margin:17px 0 0; color:#485768; font-size:14px; line-height:1.6; }.channel-note { margin:13px 0 0!important; color:var(--sub)!important; font-size:12px!important; }.result-action,.external-links a { display:inline-block; margin-top:13px; color:var(--blue); font-size:14px; font-weight:740; text-decoration:none; }.result-action:hover,.external-links a:hover { text-decoration:underline; }.external-links { display:grid; gap:2px; margin-top:13px; }.check-list { display:grid; gap:8px; margin:17px 0 0; padding:0; list-style:none; }.check-list li { color:var(--sub); font-size:14px; }.check-list li span { display:inline-grid; width:18px; height:18px; place-items:center; margin-right:7px; border-radius:50%; font-size:11px; font-weight:800; }.check-list .passed span { color:#16835d; background:#e4f7ee; }.check-list .missing span { color:#b56b11; background:#fff4df; }

@media (max-width:640px) {
  .screen { width:min(calc(100% - 32px),560px); }
  .eyebrow { margin-bottom:12px; font-size:13px; }
  .screen h1 { font-size:clamp(34px,10vw,46px); line-height:1.19; }
  .screen-description,.hero-copy>p:last-child { font-size:16px; line-height:1.6; }
  #start:not([hidden]) { min-height:100svh; padding:48px 0; }
  .business-search { margin-top:32px; padding:16px; border-radius:20px; }
  .search-row,.manual-input-row { flex-direction:column; }
  input,.button { min-height:58px; height:58px; font-size:16px; }
  .button { width:100%; }
  .flow-screen,.results-screen { min-height:100svh; padding:36px 0 54px; }
  .back-button { margin-bottom:28px; }
  .flow-screen .screen-description { margin-bottom:24px; }
  .candidate-card { grid-template-columns:1fr; gap:14px; padding:20px; }
  .candidate-select { width:100%; text-align:center; }
  .candidate-info h2 { font-size:18px; }
  .alternative-heading { margin-top:26px; }.manual-store { padding:18px; }.manual-store-title { margin-bottom:14px; }
  .manual-input-row input,.manual-input-row .button { min-height:54px; height:54px; }
  .contact-form { padding:21px 18px; }
  .privacy-detail-button { width:auto; }
  .privacy-dialog { width:min(calc(100% - 28px), 540px); border-radius:20px; }
  .privacy-dialog-content { padding:24px 20px; }
  .privacy-dialog dl { grid-template-columns:1fr; gap:5px; }
  .privacy-dialog dd { margin-bottom:10px; }
  .loading-screen { min-height:100svh; }
  .results-header { margin-bottom:26px; }
  .score-card,.priority-section { padding:24px 21px; border-radius:21px; }
  .priority-section { grid-template-columns:1fr; gap:16px; }
  .channel-section { margin-top:52px; }
  .channel-grid { grid-template-columns:1fr; }
  .analysis-overview { padding:24px 21px; border-radius:21px; }.analysis-overview h2 { font-size:27px; }.search-plan { grid-template-columns:1fr; gap:20px; padding:24px 21px; border-radius:21px; }.source-note { grid-column:auto; }.analysis-channel-grid { grid-template-columns:1fr; }.analysis-channel-card { min-height:0; padding:20px; }
}