/* =========================================================
   Duovly — Safety Center design layer (SafetyCenter.html 목업)
   tokens.css 변수만 사용. letter-spacing 0. .safety-screen 스코프.
   ========================================================= */

.safety-screen {
  background: linear-gradient(180deg, #F7FAFF 0%, var(--warm-white) 50%, #FFFFFF 100%);
  padding: 0 18px 96px;
  letter-spacing: 0;
}

/* ---- header ---- */
.safety-screen .sc-hd { display: flex; align-items: center; gap: 13px; padding: 8px 0 14px; }
.sc-hd__btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 6px 14px rgba(16,32,51,.06);
  display: grid; place-items: center; color: var(--ink-900); cursor: pointer; flex-shrink: 0;
}
.sc-hd__btn:active { transform: scale(.94); }
.sc-hd__tt { flex: 1 1 auto; min-width: 0; }
.sc-hd__t { font-size: 24px; font-weight: 950; color: var(--ink-900); }
.sc-hd__s { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--ink-500); margin-top: 3px; }
.sc-hd__sh { background: linear-gradient(160deg, #1F3A63, #16294A); border-color: transparent; }

/* ---- hero shield card ---- */
.sc-hero {
  position: relative; overflow: hidden; border-radius: 22px; min-height: 158px;
  padding: 20px; box-sizing: border-box;
  background: linear-gradient(120deg, #E8F7F4 0%, #EAF6FF 60%, #F2FAFF 100%);
  border: 1px solid rgba(24,199,184,.2);
  box-shadow: 0 14px 30px rgba(24,103,140,.12);
}
.sc-hero__scene { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 188px; height: 130px; z-index: 0; }
.sc-hero__scene img { width: 100%; height: 100%; object-fit: contain; }
.sc-hero__k { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--fw-heavy); color: var(--mint-700); position: relative; z-index: 1; }
.sc-hero__t { font-size: 27px; font-weight: 950; color: var(--ink-900); margin: 9px 0 4px; position: relative; z-index: 1; }
.sc-hero__t span { color: var(--mint-500); }
.sc-hero__sub { font-size: 13.5px; font-weight: var(--fw-bold); color: var(--ink-700); position: relative; z-index: 1; }
.sc-hero__sub b { color: var(--ink-900); }
.sc-hero__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; padding: 12px 18px;
  border-radius: 14px; border: none; cursor: pointer; position: relative; z-index: 1;
  background: linear-gradient(110deg, var(--coral-500), var(--rose-500) 55%, #F2A65C);
  color: #fff; font-size: 15px; font-weight: 900; box-shadow: 0 10px 22px rgba(255,111,107,.3);
}
.sc-hero__cta:active { transform: scale(.97); }

/* ---- target line (신고 대상 prefill) ---- */
.sc-target { margin-top: 14px; font-size: 13px; font-weight: var(--fw-bold); color: var(--ink-500); }
.sc-target b { color: var(--coral-600); }

/* ---- report-type grid 2x2 ---- */
.sc-rep { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.sc-rc {
  display: flex; align-items: center; gap: 9px; padding: 13px 11px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 18px rgba(16,32,51,.05);
  cursor: pointer; text-align: left;
}
.sc-rc:active { transform: scale(.98); }
.sc-rc.on { border-color: var(--coral-400); background: var(--coral-50); box-shadow: 0 8px 18px rgba(255,122,107,.14); }
.sc-rc__ic { width: 40px; height: 40px; flex-shrink: 0; }
.sc-rc__ic img { width: 100%; height: 100%; object-fit: contain; }
.sc-rc__tt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sc-rc__t { font-size: 14px; font-weight: 900; color: var(--ink-900); white-space: nowrap; }
.sc-rc__d { font-size: 10.5px; font-weight: var(--fw-semibold); color: var(--ink-400); margin-top: 3px; line-height: 1.35; }
.sc-rc__a { color: var(--ink-400); flex-shrink: 0; display: inline-flex; }

/* ---- section titles ---- */
.sc-sect { font-size: 17px; font-weight: 900; color: var(--ink-900); margin: 22px 0 12px; }
.sc-sect__more { float: right; font-size: 12px; font-weight: var(--fw-bold); color: var(--ink-400); }

/* ---- reason chips ---- */
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chip {
  padding: 9px 14px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: var(--fw-heavy);
  color: var(--ink-500); background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.sc-chip:active { transform: scale(.97); }
.sc-chip.on { color: var(--coral-500); border-color: var(--coral-400); background: #FFF1EE; }

/* ---- evidence ---- */
.sc-ev { display: grid; grid-template-columns: 132px 1fr; gap: 12px; margin-top: 16px; }
.sc-ev__lbl { grid-column: 1 / -1; font-size: 13px; font-weight: var(--fw-heavy); color: var(--ink-700); }
.sc-ev__lbl span { color: var(--ink-400); font-weight: var(--fw-bold); }
.sc-ev__up {
  border: 1.5px dashed #C9D2DE; border-radius: 14px; background: #FBFCFE;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 16px 8px; cursor: pointer; color: var(--ink-500);
}
.sc-ev__up b { font-size: 12.5px; font-weight: var(--fw-heavy); color: var(--ink-700); }
.sc-ev__up span { font-size: 11px; color: var(--ink-400); font-weight: var(--fw-semibold); }
.sc-ev__ta { position: relative; }
.sc-ev__ta textarea {
  width: 100%; box-sizing: border-box; min-height: 92px; resize: vertical;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 14px; font: var(--fw-medium) 13.5px var(--font-sans); color: var(--ink-900); letter-spacing: 0;
}
.sc-ev__ta textarea::placeholder { color: var(--ink-400); }
.sc-ev__ta textarea:focus { outline: none; border-color: var(--coral-300); }
.sc-ev__cnt { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: var(--ink-400); font-weight: var(--fw-bold); pointer-events: none; }

/* ---- submit ---- */
.sc-submit {
  width: 100%; margin-top: 18px; min-height: 52px; border: none; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--coral-500), var(--rose-500));
  color: #fff; font-size: 15px; font-weight: 900; cursor: pointer;
  box-shadow: var(--sh-cta), inset 0 1px 0 rgba(255,255,255,.35);
}
.sc-submit:active { transform: scale(.99); }

/* ---- safety tools ---- */
.sc-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sc-tool {
  padding: 13px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 8px 18px rgba(16,32,51,.05); cursor: pointer; text-align: left;
  display: flex; flex-direction: column;
}
.sc-tool:active { transform: scale(.98); }
.sc-tool__top { display: flex; align-items: center; justify-content: space-between; color: var(--ink-400); }
.sc-tool__ic { width: 38px; height: 38px; }
.sc-tool__ic img { width: 100%; height: 100%; object-fit: contain; }
.sc-tool__v { font-size: 17px; font-weight: 900; color: var(--ink-900); margin-top: 11px; }
.sc-tool__v span { font-size: 12px; font-weight: var(--fw-bold); color: var(--ink-400); }
.sc-tool__l { font-size: 11.5px; font-weight: var(--fw-bold); color: var(--ink-400); margin-top: 2px; }

/* ---- recent report timeline ---- */
.sc-stcard { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; box-shadow: 0 8px 18px rgba(16,32,51,.05); }
.sc-st__head { display: flex; align-items: center; gap: 8px; }
.sc-st__id { font-size: 15px; font-weight: 900; color: var(--ink-900); }
.sc-st__badge { font-size: 11px; font-weight: var(--fw-heavy); color: #3B6FD9; background: var(--pale-blue); padding: 3px 9px; border-radius: var(--r-pill); }
.sc-st__meta { font-size: 12px; color: var(--ink-400); font-weight: var(--fw-semibold); margin-top: 5px; line-height: 1.5; }
.sc-st__tl { display: flex; align-items: flex-start; margin-top: 16px; }
.sc-st__node { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
.sc-st__dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; z-index: 1; color: #fff; }
.sc-st__dot.nd-done { background: #2F7AE5; }
.sc-st__dot.nd-cur { background: var(--surface); border: 2px solid var(--ink-500); color: var(--ink-500); }
.sc-st__dot.nd-wait { background: var(--surface); border: 2px solid var(--border); color: var(--ink-400); }
.sc-st__node:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.sc-st__node--done:not(:last-child)::after { background: #2F7AE5; }
.sc-st__lt { font-size: 12.5px; font-weight: 850; }
.sc-st__lt.cur { color: var(--ink-900); }
.sc-st__lt.wait { color: var(--ink-400); }
.sc-st__ld { font-size: 10.5px; font-weight: var(--fw-semibold); color: var(--ink-400); text-align: center; }

/* ---- notice banner ---- */
.sc-mon { display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--pale-blue); border: 1px solid rgba(91,141,239,.16); }
.sc-mon__ic { width: 38px; height: 38px; flex-shrink: 0; }
.sc-mon__ic img { width: 100%; height: 100%; object-fit: contain; }
.sc-mon__tx { flex: 1 1 auto; font-size: 12.5px; font-weight: var(--fw-bold); color: var(--ink-700); line-height: 1.5; }
.sc-mon__tx b { color: var(--coral-500); }
.sc-mon__btn { flex-shrink: 0; font-size: 12px; font-weight: var(--fw-heavy); color: var(--ink-700); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 8px 12px; cursor: pointer; }