:root {
  --ink:#232323;
  --muted:#747b85;
  --line:#d7dce3;
  --soft:#f3f5f7;
  --blue:#2f66c9;
  --blue-soft:#edf3ff;
  --green:#21875b;
  --green-soft:#eaf7f0;
  --orange:#a76a12;
  --orange-soft:#fff4dd;
  --red:#c44b4b;
  --phone-w:430px;
  --phone-h:920px;
}
* { box-sizing:border-box; }
body {
  margin:0;
  background:#fafafa;
  color:var(--ink);
  font-family:"Malgun Gothic","Apple SD Gothic Neo",Arial,sans-serif;
}
a { color:inherit; text-decoration:none; }
.board { position:relative; width:1460px; min-height:1190px; padding:46px 62px; }
.title { font-size:32px; font-weight:800; }
.subtitle { margin-top:6px; color:#929292; font-size:14px; }
.rule { width:1330px; height:1px; margin-top:19px; background:#c4c4c4; }
.phone-wrap { position:absolute; left:110px; top:158px; width:var(--phone-w); }
.phone {
  position:relative;
  width:var(--phone-w);
  height:var(--phone-h);
  border:3px solid var(--ink);
  border-radius:28px;
  background:#fff;
  overflow:hidden;
}
.notch {
  position:absolute; z-index:5; top:7px; left:174px;
  width:82px; height:13px; border:1px solid var(--ink); border-radius:8px; background:#fff;
}
.appbar {
  position:absolute; z-index:4; left:0; right:0; top:0; height:78px;
  padding:30px 18px 12px; border-bottom:1px solid var(--line); background:#fff;
  display:grid; grid-template-columns:36px 1fr 36px; gap:8px; align-items:center;
}
.icon-button {
  width:36px; height:36px; border:1px solid var(--line); border-radius:8px; background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800;
}
.app-title { text-align:center; font-size:16px; font-weight:800; line-height:18px; }
.app-subtitle { color:var(--muted); font-size:10px; font-weight:400; }
.content {
  position:absolute; left:18px; right:18px; top:92px; bottom:130px;
  overflow-y:auto; padding:0 0 18px;
}
.step-label { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.4px; }
.screen-title { margin-top:5px; font-size:18px; font-weight:800; }
.screen-copy { margin-top:7px; color:#555; font-size:12px; line-height:18px; }
.bubble {
  max-width:88%; margin-top:12px; padding:10px 11px; border-radius:12px;
  font-size:12px; line-height:17px;
}
.bubble.user { margin-left:auto; background:var(--ink); color:#fff; border-bottom-right-radius:4px; }
.bubble.ai { background:var(--soft); border:1px solid var(--line); border-bottom-left-radius:4px; }
.card { margin-top:12px; border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden; }
.card-head { padding:10px 11px; border-bottom:1px solid var(--line); font-size:12px; font-weight:800; }
.card-body { padding:4px 11px 8px; }
.row { display:grid; grid-template-columns:116px 1fr; gap:9px; padding:8px 0; border-top:1px solid #eceff3; font-size:11px; line-height:16px; }
.row:first-child { border-top:0; }
.row b { color:#666; }
.row span { font-weight:700; }
.list { margin:0; padding:4px 0 4px 18px; color:#454545; font-size:11px; line-height:18px; }
.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:10px; }
.metric { min-height:58px; border:1px solid var(--line); border-radius:8px; background:var(--soft); padding:8px; font-size:10px; color:#666; }
.metric b { display:block; margin-top:5px; color:var(--ink); font-size:13px; }
.notice { margin-top:12px; border:1px solid #bed2ed; border-radius:8px; background:var(--blue-soft); padding:10px; color:#244d83; font-size:11px; line-height:17px; font-weight:700; }
.warning { margin-top:12px; border:1px solid #e2bf72; border-radius:8px; background:var(--orange-soft); padding:10px; color:#714b0f; font-size:11px; line-height:17px; }
.success { margin-top:14px; border:1px solid #b9ddca; border-radius:8px; background:var(--green-soft); padding:14px; text-align:center; }
.success-mark { width:54px; height:54px; margin:0 auto 9px; border:2px solid var(--green); border-radius:50%; color:var(--green); display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; }
.success b { display:block; font-size:15px; }
.success span { display:block; margin-top:5px; color:#4d6759; font-size:11px; line-height:16px; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.button { min-height:38px; border:1px solid #aaa; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; padding:7px 9px; text-align:center; font-size:11px; font-weight:800; }
.button.dark { border-color:var(--ink); background:var(--ink); color:#fff; }
.button.blue { border-color:var(--blue); background:var(--blue); color:#fff; }
.button.green { border-color:var(--green); background:var(--green); color:#fff; }
.button.full { grid-column:1 / -1; }
.composer {
  position:absolute; z-index:3; left:0; right:0; bottom:61px; min-height:66px;
  padding:10px 12px; border-top:1px solid var(--line); background:#fff;
  display:grid; grid-template-columns:36px 1fr 36px; gap:8px; align-items:center;
}
.message-input { height:40px; border:1px solid #c9c9c9; border-radius:10px; color:#aaa; font-size:11px; display:flex; align-items:center; padding-left:12px; }
.bottom-nav {
  position:absolute; z-index:3; left:0; right:0; bottom:0; height:61px;
  border-top:1px solid var(--line); background:#fff; display:grid; grid-template-columns:repeat(5,1fr);
  align-items:center; text-align:center; font-size:9px; color:var(--muted);
}
.nav-item { display:grid; gap:4px; justify-items:center; }
.nav-icon { width:20px; height:16px; border:1px solid currentColor; border-radius:4px; }
.nav-item.active { color:var(--blue); font-weight:800; }
.caption { margin-top:16px; text-align:center; color:var(--muted); font-size:13px; font-weight:800; }
.panel { position:absolute; left:620px; top:180px; width:700px; border:2px solid var(--ink); border-radius:10px; background:#fff; padding:20px; }
.panel h2 { margin:0 0 13px; font-size:19px; }
.panel-row { display:grid; grid-template-columns:150px 1fr; gap:12px; padding:11px 0; border-top:1px solid #e7e7e7; font-size:12px; line-height:18px; }
.panel-row:first-of-type { border-top:0; }
.panel-row b { color:#555; }
.panel-flow { margin-top:16px; border:1px solid var(--line); border-radius:8px; background:var(--soft); padding:13px; font-size:12px; line-height:19px; }
@media (max-width:800px) {
  .board { width:100%; min-height:1120px; padding:24px 14px; }
  .title { font-size:22px; }
  .subtitle { font-size:12px; }
  .rule { width:100%; }
  .phone-wrap { position:relative; left:auto; top:auto; margin:28px auto 0; }
  .panel { position:relative; left:auto; top:auto; width:min(100%,430px); margin:24px auto; }
}