:root {
  color-scheme:light;
  font-family:"Inter","Malgun Gothic",system-ui,sans-serif;
  --ink:#19263d;
  --muted:#526075;
  --paper:#f8f7f3;
  --line:#d6dae0;
  --blue:#243e62;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; color:var(--ink); background:var(--paper); }
.natori-web {
  display:grid;
  grid-template-columns:minmax(300px,42%) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
  min-height:0;
  height:100dvh;
}
.natori-web-header {
  grid-column:1/-1; display:flex; align-items:center; justify-content:space-between;
  padding:15px clamp(18px,4vw,60px); border-bottom:1px solid var(--line);
}
.natori-web-header h1 { margin:0; font-size:23px; letter-spacing:-.06em; }
.natori-web-header h1 span { margin-left:10px; color:var(--muted); font-size:11px; letter-spacing:.12em; font-weight:500; }
.natori-web-chat {
  grid-area:2/2; display:flex; flex-direction:column; min-width:0; min-height:0;
  width:min(100%,850px); margin-inline:auto; gap:8px;
  padding:clamp(14px,4vw,58px) clamp(16px,5vw,78px) 16px;
}
.natori-web-log {
  flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:17px;
  min-height:0; overflow:auto; overscroll-behavior:contain; padding:4px 6px 16px 0;
}
.natori-web-log p {
  flex:none; max-width:min(90%,64ch); margin:0; padding:5px 0;
  font-size:15px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere;
}
.natori-web-log p[data-role=assistant]::before {
  content:"나토리"; display:block; margin-bottom:3px; color:var(--muted); font-size:12px; font-weight:700;
}
.natori-web-log p[data-role=user] { align-self:flex-end; background:#e7ecf3; padding:9px 14px; border-radius:12px 12px 3px 12px; }
.natori-web-intro { display:none; }
.natori-web-log:empty { display:none; }
.natori-web-log:empty + .natori-web-intro {
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-bottom:12px;
}
.natori-web-intro h2 { margin:0 0 24px; font-size:clamp(29px,4.2vw,58px); line-height:1.1; letter-spacing:-.08em; }
.natori-web-prompts { display:flex; flex-wrap:wrap; gap:7px 16px; }
.natori-web-prompts button {
  border:0; border-bottom:1px solid var(--line); background:none; color:var(--blue);
  padding:5px 0; text-align:left; cursor:pointer; font:inherit; font-size:13px;
}
.natori-web-prompts button:hover { border-color:var(--blue); }
.natori-web-form {
  display:flex; align-items:center; gap:8px; padding:6px 6px 6px 15px;
  border:1px solid #b8c1cc; border-radius:8px; background:#fff;
}
.natori-web-form:focus-within { border-color:var(--blue); }
.natori-web-form input { flex:1; width:0; min-width:0; border:0; outline:0; font:inherit; color:inherit; background:none; padding:8px 0; }
.natori-web-form button,.natori-web-status button {
  font:inherit; font-size:13px; border:0; border-radius:5px;
  padding:10px 12px; background:var(--blue); color:white; cursor:pointer;
}
.natori-web button:disabled { opacity:.55; cursor:default; }
.natori-web-chat-footer { display:flex; align-items:center; gap:8px; min-height:25px; }
.natori-web-status { margin:0; color:var(--muted); font-size:12px; }
.natori-web-clear {
  margin-left:auto; padding:4px 0; border:0; background:none; color:var(--muted);
  font:inherit; font-size:12px; white-space:nowrap; cursor:pointer;
}
.natori-web-clear:hover { text-decoration:underline; }
.natori-web-stage {
  grid-area:2/1; position:relative; container-type:size; min-width:0; min-height:0; overflow:hidden;
  border-right:1px solid #c6d2de; background:#e4ebf3;
}
.natori-web-stage::before {
  content:""; position:absolute; inset:8% 12%; border:1px solid #c2d0df;
  border-radius:50% 50% 2px 2px;
}
.natori-web-stage img,.natori-web-stage video {
  display:block; width:100%; height:100%; object-fit:contain; object-position:center top;
  transform-origin:center 40%;
  transform:translate(var(--drag-x,0px),var(--drag-y,0px)) rotate(var(--drag-angle,0deg));
  transition:transform 260ms cubic-bezier(.2,.8,.25,1);
}
.natori-web-stage video { position:absolute; inset:0; visibility:hidden; }
.natori-web-stage[data-playing] video { visibility:visible; }
.natori-web-stage[data-playing] img { visibility:hidden; }
.natori-web-stage .natori-web-dizzy { position:absolute; inset:0; visibility:hidden; }
.natori-web-stage[data-dizzy] .natori-web-dizzy { visibility:visible; }
.natori-web-stage[data-dizzy] :is(.natori-web-still,.natori-web-idle) { visibility:hidden; }

.natori-web-stage .natori-web-expression { position:absolute; inset:0; visibility:hidden; }
.natori-web-stage[data-expression]:not([data-dizzy]) :is(.natori-web-still,.natori-web-idle) { visibility:hidden; }
.natori-web-stage[data-expression="happy"]:not([data-dizzy]) [data-pose="happy"],
.natori-web-stage[data-expression="thinking"]:not([data-dizzy]) [data-pose="thinking"],
.natori-web-stage[data-expression="concerned"]:not([data-dizzy]) [data-pose="concerned"] { visibility:visible; }
@media (prefers-reduced-motion:no-preference) {
  .natori-web-stage[data-expression="happy"] [data-pose="happy"] { animation:natori-lift .48s ease-out; }
  .natori-web-stage[data-expression="thinking"] [data-pose="thinking"] { animation:natori-tilt .65s ease-in-out; }
  .natori-web-stage[data-expression="concerned"] [data-pose="concerned"] { animation:natori-settle .55s ease-out; }
}
@keyframes natori-lift { 45% { translate:0 -7px; } }
@keyframes natori-tilt { 50% { rotate:-2deg; } }
@keyframes natori-settle { 45% { translate:0 4px; } }
.natori-web-stage[data-dragging] :is(img,video) { transition:none; }
.natori-web-stage .natori-web-touch {
  position:absolute; inset-block-start:0; inset-inline-start:50%;
  width:min(100cqw,49.77cqh); height:min(100cqh,200.93cqw);
  padding:0; transform:translateX(-50%); border:0; border-radius:18px;
  background:transparent; cursor:grab; touch-action:pan-y; user-select:none;
}
.natori-web-stage .natori-web-touch:active { cursor:grabbing; }
.natori-web-stage .natori-web-touch:focus:not(:focus-visible) { outline:none; }
@media (prefers-reduced-motion:reduce) {
  .natori-web-stage :is(img,video) { transition:none; }
}
.natori-web-caption {
  position:absolute; z-index:1; inset-inline:8px; top:min(52cqh,104.5cqw); margin:0; transform:translateY(-50%);
  padding:0 5px; text-align:center; color:white; font-size:clamp(19px,1.4vw,26px); line-height:1.35;
  font-weight:900; word-break:keep-all; overflow-wrap:anywhere; pointer-events:none;
  paint-order:stroke fill; -webkit-text-stroke:2px #10131b;
  text-shadow:0 2px 3px #000a;
}
.natori-web-caption[hidden] { display:none; }
.natori-web-stage img,.natori-web-stage video { object-position:center; }
.natori-web-stage .natori-web-touch { inset-block-start:50%; transform:translate(-50%,-50%); }
.natori-web-caption { top:65%; }
@media (max-width:720px) {
  .natori-web { grid-template-columns:minmax(0,1fr); grid-template-rows:auto min(34dvh,270px) minmax(0,1fr); }
  .natori-web-stage { grid-area:2/1; border-right:0; border-bottom:1px solid #c6d2de; }
  .natori-web-stage::before { inset:8% 18% 0; }
  .natori-web-chat { grid-area:3/1; padding:10px 16px 10px; }
  .natori-web-intro h2 { margin-bottom:12px; }
  .natori-web-caption { font-size:16px; }
}