/* AI 셰익스피어 — 양피지와 잉크
   키오스크는 인터넷 없이 돌아가므로 본문 명조는 앱에 내장한다(OFL, assets/fonts). */

@font-face{font-family:"Nanum Myeongjo KR";src:url("assets/fonts/NanumMyeongjo-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Nanum Myeongjo KR";src:url("assets/fonts/NanumMyeongjo-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:block}

:root{
  color-scheme:light;

  --paper:#F6F1E6;          /* 양피지 바탕 */
  --paper-2:#FFFCF5;        /* 입력칸·지면 등 떠 있는 면 */
  --ink:#1C1A17;            /* 본문 먹빛 */
  --ink-2:#4E473C;          /* 보조 텍스트 */
  --ink-3:#8B8273;          /* 힌트 */
  --rule:#E3DAC7;           /* 옅은 괘선 */
  --rule-2:#CEC2A9;         /* 진한 괘선 */
  --wine:#75283A;           /* 강조 — 버튼 */
  --wine-2:#8B3348;
  --wine-ink:#571C2A;
  --gold:#A98443;           /* 장식 — 선, 별 */
  --gold-2:#CBAC6A;
  --danger:#9B2226;

  --serif:"Nanum Myeongjo KR",Batang,"Apple SD Gothic Neo",serif;
  --sans:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;

  font-family:var(--sans);
  color:var(--ink);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  min-height:100vh;
  /* 위쪽에서 빛이 떨어지는 듯한 아주 옅은 결. 종이 느낌을 준다. */
  background:radial-gradient(120% 70% at 50% -12%,#FFFDF8 0%,rgba(255,253,248,0) 62%),var(--paper);
  background-attachment:fixed;
  /* 한글은 어절 단위로 끊어야 읽힌다. 긴 영문·숫자 덩어리만 예외로 강제 줄바꿈한다. */
  word-break:keep-all;
  overflow-wrap:break-word;
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin-top:0}

/* ---------------------------------------------------------------- 제목 · 로고 */

.brand{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  margin:0 auto;cursor:pointer;-webkit-user-select:none;user-select:none;
}
.brand-mark{display:block;width:clamp(44px,6vh,60px);height:auto;color:var(--ink)}
.q-blade{fill:currentColor}
.q-vane,.q-shaft{fill:none;stroke-linecap:round}
.q-vane{stroke:var(--paper-2);stroke-width:2.2}
.q-shaft{stroke:currentColor;stroke-width:3.4}
.q-nib{fill:currentColor}
.q-bit{fill:var(--gold)}
.q-trace{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;opacity:.75}

.brand-name{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(22px,3.4vh,30px);letter-spacing:.16em;text-indent:.16em;
  line-height:1.1;color:var(--ink);
}
.brand-rule{display:flex;align-items:center;gap:9px;color:var(--gold);width:clamp(150px,26vh,210px)}
.brand-rule::before,.brand-rule::after{content:"";flex:1;height:1px;background:currentColor;opacity:.5}
.brand-rule i{font-style:normal;font-size:8px;line-height:1;transform:translateY(-1px)}
.brand-tag{
  margin:2px 0 0;font-family:var(--serif);color:var(--ink-2);
  font-size:clamp(14px,1.9vh,17px);letter-spacing:.05em;text-align:center;
}

.credit{display:flex;flex-direction:column;align-items:center;gap:14px;margin:auto auto 0}
.credit::before{content:"";width:clamp(90px,16vh,130px);height:1px;background:var(--rule-2)}
.footer{display:block;width:min(150px,32vw);max-height:70px;object-fit:contain;opacity:.85}

/* ---------------------------------------------------------------- 화면 뼈대 */

.screen{width:min(760px,92vw);min-height:100vh;margin:auto;padding:clamp(20px,4vh,48px) 0;display:flex;flex-direction:column}
.form{display:grid;gap:18px;width:min(600px,100%);margin:clamp(22px,5vh,52px) auto}
.compact{max-width:460px}
.settings{width:min(680px,100%)}
.login{justify-content:center}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------------------------------------------------------------- 입력 */

.field{display:grid;gap:9px;font-family:var(--serif);font-weight:700;letter-spacing:.05em;color:var(--ink)}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--sans);font-weight:400;letter-spacing:normal;
  border:1px solid var(--rule-2);border-radius:3px;background:var(--paper-2);
  padding:14px 15px;outline:none;
  box-shadow:inset 0 1px 2px rgba(28,26,23,.04);
  transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--wine);box-shadow:0 0 0 3px rgba(117,40,58,.13)}
.field textarea{min-height:180px;resize:vertical;line-height:1.7}
.hint{font-family:var(--sans);font-size:13px;color:var(--ink-3);font-weight:400;letter-spacing:normal}

.button{
  font-family:var(--serif);font-weight:700;letter-spacing:.22em;text-indent:.22em;
  border:1px solid var(--wine-ink);border-radius:3px;
  background:var(--wine);color:#FDF7EC;padding:15px 20px;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 22px -16px rgba(87,28,42,.9);
  transition:background .15s,transform .06s;
}
.button:active{background:var(--wine-ink);transform:translateY(1px)}
.button.secondary{
  background:transparent;color:var(--ink);border-color:var(--rule-2);
  font-family:var(--sans);letter-spacing:normal;text-indent:0;box-shadow:none;
}
.button.secondary:active{background:rgba(28,26,23,.05)}
.button:disabled{opacity:.4;cursor:not-allowed;transform:none}
.message{min-height:22px;color:var(--danger);font-size:14px}

/* ---------------------------------------------------------------- 생성 중 */

.loading{align-items:center;justify-content:center;text-align:center;gap:18px}
.loading h1{font-family:var(--serif);font-weight:700;font-size:clamp(20px,3vh,26px);letter-spacing:.03em;line-height:1.5}
.loading p{color:var(--ink-2);font-family:var(--serif);letter-spacing:.08em}
.loader{position:relative;width:52px;height:52px;margin:0 auto 22px}
.loader::before,.loader::after{content:"";position:absolute;border-radius:50%}
.loader::before{inset:0;border:1px solid var(--rule-2);border-top-color:var(--gold);border-right-color:var(--gold-2);animation:spin 1.6s cubic-bezier(.55,.15,.45,.85) infinite}
.loader::after{inset:38%;background:var(--wine);animation:ink 1.6s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ink{0%,100%{transform:scale(.7);opacity:.45}50%{transform:scale(1);opacity:1}}

/* ---------------------------------------------------------------- 결과 희곡 */

.result{width:min(760px,92vw);margin:auto;padding:38px 0 80px;display:flex;flex-direction:column}
.result .brand{margin-bottom:26px}
.result h1{font-family:var(--serif);font-weight:700;text-align:center;font-size:clamp(26px,4vw,40px);letter-spacing:.04em;line-height:1.3;margin-bottom:10px}
.meta{text-align:center;font-family:var(--serif);color:var(--gold);letter-spacing:.14em;text-indent:.14em;font-size:14px;margin-bottom:26px}

.script{
  font-family:var(--serif);font-size:18px;line-height:1.85;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;
  padding:32px 34px;
  box-shadow:0 1px 2px rgba(28,26,23,.04),0 22px 44px -30px rgba(28,26,23,.45);
}
.script p{margin:0 0 14px}
.script p:last-child{margin-bottom:0}
.script h2{font-family:var(--serif);font-weight:700;font-size:1.15em;letter-spacing:.1em;text-align:center;margin:0 0 14px}
.script b{font-weight:700}
.script hr{border:0;height:1px;background:var(--rule);margin:22px 0}
.direction{font-style:italic;color:var(--ink-2)}
.center{text-align:center}
.colophon{text-align:center;color:var(--ink-2);font-size:.92em;line-height:1.7}
.colophon .sig{font-family:var(--serif);letter-spacing:.2em;text-indent:.2em;color:var(--gold);margin-bottom:8px}

/* 출력과 "처음으로" 를 한 덩어리로 띄운다. 위치 지정은 컨테이너가 맡는다. */
.result-actions{position:fixed;right:24px;top:20px;z-index:2;display:flex;gap:10px}
.restart{white-space:nowrap}

/* ---------------------------------------------------------------- 설문 · 감사 */

.survey{align-items:center;justify-content:center;text-align:center}
.thanks{animation:reveal .7s ease both}
.thanks h1{font-family:var(--serif);font-weight:700;letter-spacing:.03em;line-height:1.45}
.thanks p{color:var(--ink-2);line-height:1.7}
@keyframes reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.stars{display:flex;gap:10px;justify-content:center;margin:26px 0}
.star{border:0;background:none;font-size:42px;line-height:1;padding:6px;color:var(--gold-2);transition:color .12s,transform .08s}
.star:active{color:var(--wine);transform:scale(.92)}
.star:disabled{opacity:.5}

/* ---------------------------------------------------------------- 관리자 */

.admin{width:min(1180px,94vw);margin:auto;padding:28px 0}
.admin-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
.admin-head h1{font-family:var(--serif);font-weight:700;letter-spacing:.04em;font-size:24px;margin:0}
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--rule-2);margin-bottom:22px}
.tab{border:0;background:none;padding:12px 14px;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.active{border-color:var(--wine);color:var(--ink);font-weight:700}
.toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:18px}
.toolbar .field{font-size:13px}
.table-wrap{overflow:auto;max-height:64vh;border:1px solid var(--rule-2);border-radius:3px;background:var(--paper-2)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
th{position:sticky;top:0;background:#EFE8DA;font-family:var(--serif);letter-spacing:.04em}
tr:last-child td{border-bottom:0}
td.long{min-width:260px;white-space:pre-wrap}
.pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:14px;font-size:14px;color:var(--ink-2)}
.pager .button{padding:9px 16px}

/* ---------------------------------------------------------------- 온스크린 키보드 */

body.kb-open{padding-bottom:min(46vh,420px)}
.kb{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;flex-direction:column;gap:8px;padding:10px clamp(8px,2vw,24px) max(10px,env(safe-area-inset-bottom));background:#EDE5D6;border-top:1px solid var(--rule-2);box-shadow:0 -8px 28px rgba(28,26,23,.14);touch-action:manipulation;-webkit-user-select:none;user-select:none}
body.kb-open .kb{display:flex}
.kb-row{display:flex;justify-content:center;gap:6px}
.kb-key{flex:1 1 0;min-width:0;max-width:96px;min-height:clamp(46px,7.2vh,64px);border:1px solid var(--rule-2);border-radius:6px;background:var(--paper-2);color:var(--ink);font-size:clamp(17px,2.2vh,22px);font-weight:600;line-height:1;box-shadow:0 1px 0 #C6B99F}
.kb-key:active{background:#E4DAC6}
.kb-wide{flex:1.5 1 0;max-width:132px;font-size:clamp(13px,1.6vh,16px)}
.kb-space{flex:4 1 0;max-width:none;font-size:clamp(13px,1.6vh,16px)}
.kb-on{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.kb-done{background:var(--wine);color:#FDF7EC;border-color:var(--wine-ink)}
.kb-controls{margin-top:2px}

/* ---------------------------------------------------------------- 좁은 창 */

@media(max-width:640px){
  .screen{width:min(90vw,520px)}
  .result-actions{position:sticky;margin:12px 12px 0 auto;top:12px;width:fit-content}
  .script{font-size:16px;padding:22px 20px}
  .admin-head{align-items:flex-start;flex-direction:column}
  .tabs{overflow:auto}
  .star{font-size:34px}
}

/* 개발용 가로 창처럼 세로가 짧을 때는 여백을 줄인다. */
@media(min-width:1000px) and (max-height:720px){
  .screen{padding:16px 0}
  .brand-mark{width:40px}
  .brand-tag{display:none}
  .footer{max-height:44px}
  .credit{gap:10px}
  .form{margin:18px auto;gap:12px}
  .field textarea{min-height:110px}
}

/* ---------------------------------------------------------------- 27인치 세로 키오스크
   1080×1920, 화소 밀도 0.311mm/px. 가로 데스크톱 기준 px 는 물리적으로 17% 작아지므로
   세로 화면에서만 키운다. 개발용 가로 창(1600×900)에는 적용되지 않는다. */

/* ── 예시 이야기 ──
   빈 칸 앞에서 멈추는 관람객을 위한 보조 장치다. 주 동선(입력 버튼)보다
   약하게 보여야 하므로 채움 없이 테두리만 쓴다. */
.samples{display:grid;gap:12px;justify-items:center;margin-top:2px}
.samples-label{font-family:var(--sans);font-size:14px;color:var(--ink-3);letter-spacing:.02em}
.samples-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sample{
  font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.02em;
  color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--rule-2);border-radius:999px;
  padding:11px 20px;cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.sample:hover{border-color:var(--gold-2);color:var(--ink)}
.sample:active{background:var(--wine);border-color:var(--wine);color:var(--paper-2)}

@media(orientation:portrait) and (min-width:900px){
  .screen{width:min(940px,90vw);padding:60px 0;gap:20px}
  /* 세로 1920px 에서 폼을 위에 붙이면 아래 절반이 비고 입력칸이 눈높이보다 높아진다.
     위아래 auto 마진으로 남는 공간을 나눠 손이 닿는 높이로 내린다. */
  .form{width:min(900px,100%);gap:30px;margin:auto}

  /* 27인치 세로 화면 — 손가락으로 누를 수 있는 크기로 키운다. */
  .samples{gap:18px;margin-top:6px}
  .samples-label{font-size:24px}
  .samples-list{gap:16px}
  .sample{font-size:28px;padding:20px 32px}

  .brand{gap:20px}
  .brand-mark{width:104px}
  .brand-name{font-size:60px;letter-spacing:.18em;text-indent:.18em}
  .brand-rule{width:420px;gap:16px}
  .brand-rule i{font-size:14px}
  .brand-tag{font-size:28px;margin-top:6px}
  .credit{gap:26px}
  .credit::before{width:220px}
  .footer{width:min(240px,28vw);max-height:100px}

  .field{gap:14px;font-size:32px}
  .field input,.field select{padding:26px 22px;border-radius:5px}
  .field textarea{min-height:340px;padding:26px 22px;border-radius:5px;resize:none}
  .button{padding:30px 26px;font-size:34px;border-radius:5px}
  .message{min-height:34px;font-size:26px}
  .hint{font-size:24px}
  h1{font-size:44px}

  .loading{gap:34px}
  .loading h1{font-size:42px}
  .loading p{font-size:30px}
  .loader{width:108px;height:108px;margin-bottom:44px}
  .loader::before{border-width:2px}

  .result{width:min(940px,90vw);padding:56px 0 330px}
  .result .brand{margin-bottom:44px}
  .result h1{font-size:54px;margin-bottom:14px}
  .meta{font-size:26px;margin-bottom:40px}
  .script{font-size:27px;line-height:1.8;padding:46px 44px;border-radius:5px}
  .script p{margin:0 0 18px}
  .script hr{margin:30px 0}
  /* 세로 화면에서 오른쪽 위는 바닥에서 1.9m 근처라 손이 닿지 않는다. 아래 고정 막대로 내린다. */
  /* 세로 화면에서는 아래쪽에 나란히 둔다. 출력이 주 동선이므로 넓게 잡는다. */
  .result-actions{left:50%;right:auto;top:auto;bottom:48px;transform:translateX(-50%);
    width:min(700px,86vw);display:grid;grid-template-columns:1.8fr 1fr;gap:16px}
  .print{padding:32px 30px;font-size:36px;box-shadow:0 14px 40px -18px rgba(87,28,42,.75)}
  .restart{padding:32px 20px;font-size:30px;background:var(--paper-2)}
  /* 본문 위에 버튼만 덩그러니 뜨면 어색하다. 바닥으로 종이색이 스며드는 띠를 깔아준다.
     버튼(z-index:2)보다 아래에 있어야 하므로 버튼의 자식이 아니라 별도 층으로 둔다. */
  .result::after{content:"";position:fixed;left:0;right:0;bottom:0;height:300px;z-index:1;pointer-events:none;background:linear-gradient(to top,var(--paper) 62%,rgba(246,241,230,0))}

  .thanks{margin:auto}
  .thanks h1{font-size:44px}
  .thanks p{font-size:30px;line-height:1.7}
  .stars{gap:18px;margin:48px 0}
  .star{font-size:92px;padding:8px}

  /* 관리자 화면도 손가락으로 다뤄야 한다. 표는 가로 스크롤로 넘긴다. */
  .admin{width:min(1010px,96vw);padding:32px 0}
  .admin-head h1{font-size:34px}
  .admin-head .button{padding:18px 20px;font-size:22px}
  .tab{padding:20px 18px;font-size:26px}
  .toolbar{gap:14px}
  .toolbar .field{font-size:22px;gap:8px}
  .toolbar .field input{padding:16px 14px;font-size:24px}
  .toolbar .button{padding:18px 22px;font-size:24px}
  .table-wrap{max-height:62vh}
  table{font-size:20px}
  th,td{padding:14px}
  th:first-child,td:first-child{white-space:nowrap}
  td.long{min-width:190px}
  .pager{margin-top:20px;font-size:22px}
  .pager .button{padding:16px 22px;font-size:22px}
  .settings{width:100%}
  .compact{max-width:100%}

  /* 키 100px ≈ 31mm. 4줄이라 키보드 전체가 약 470px 를 차지한다. */
  .kb{gap:12px;padding:16px 20px max(16px,env(safe-area-inset-bottom))}
  .kb-row{gap:10px}
  .kb-key{max-width:none;min-height:100px;font-size:40px;border-radius:10px}
  .kb-wide,.kb-space{font-size:26px}
  body.kb-open{padding-bottom:540px}
}