/* The painting carries the scene; the panel stays readable without dimming it. */
#start{isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);
  gap:40px;align-items:center;justify-items:stretch;padding:40px clamp(28px,5vw,104px);
  background:#0b1420;overflow-y:auto;overflow-x:hidden}
#start::after{position:fixed;z-index:-1;background:linear-gradient(90deg,transparent 25%,#08101920 50%,#081019b3 100%),linear-gradient(0deg,#060e18eb,transparent 36%)}
#start .login-art{position:fixed;inset:0;z-index:-2;pointer-events:none}
#start .login-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:40% center;image-rendering:auto}
/* R205(C2-2) — 카드가 화면보다 길면(1366×768·1280×800) 격자 줄이 화면 밖까지 늘어나 바닥에 붙은 대표 문구가 글자 중간에서
   잘렸다(h1 바닥 823 > 768). 화면 바닥 위 5vh 에 붙어 있다가(sticky) 끝까지 내리면 제자리로 간다. 글자 크기도 높이에 묶는다. */
#start .login-legend{align-self:end;position:sticky;bottom:5vh;margin-bottom:5vh;max-width:660px;text-shadow:0 2px 18px #02060c}
#start .login-genre{display:block;color:#ead6a5;font-size:var(--ui-note);letter-spacing:.18em;margin-bottom:20px}
/* R153(C14) — 제목만 세리프(Georgia·바탕)라 다른 게임처럼 보였다. 로고·게임 안과 같은 도트 글꼴로 */
#start .login-legend h1{font-family:Galmuri14,Galmuri11,monospace;font-size:clamp(30px,min(3.9vw,7vh),62px);font-weight:400;line-height:1.3;letter-spacing:0;color:#fff5db}
#start .login-legend p{color:#e1e3df;font-size:var(--ui-body);line-height:1.9;margin-top:22px;word-break:keep-all}
#start .wrap{width:100%;max-width:440px;margin-block:auto;padding:30px 26px 20px;
  background:linear-gradient(155deg,#111d29f2,#0c151fee);border:1px solid #ad986461;
  box-shadow:0 24px 70px #0008,inset 0 1px #e9d5a81a;backdrop-filter:blur(10px)}
#start .logo .ko{font-size:56px;letter-spacing:.15em;text-indent:.15em;color:#ead5a0}
#start .logo .en{color:#b9a880;letter-spacing:.5em;text-indent:.5em}
#start .rule{margin:20px auto 16px;background:linear-gradient(90deg,transparent,#bda97973,transparent)}
#start .tag{margin-bottom:22px;line-height:1.6}
#start .tag b.hook{font-size:var(--ui-body);color:#ebdfc2;line-height:1.6;margin-bottom:7px}
#start .tag .sm{font-size:var(--ui-note);color:#adb9bd}
#start .login-field{display:block;text-align:left;margin:0 0 7px;color:#d6d5c9;font-size:var(--ui-note)}
#start #nm{background:#060d15a6;border-color:#62707880;padding:12px;min-height:48px;font-size:var(--ui-body)}
#start #nm:focus{border-color:#dec58a;outline:2px solid #dec58a44;outline-offset:2px}
#start .klass{gap:7px;margin:12px 0 18px}
#start .klass button{min-width:0;padding:12px 4px;font-size:var(--ui-body);background:#15222bbb;border-color:#5c676d80;color:#d2d8d7}
#start .klass button.on{background:linear-gradient(145deg,#55472bd9,#282f29);color:#fff0ca;border-color:#ccb177}
#start .klass small{font-size:var(--ui-note);line-height:1.65;color:#b1bdc0;margin-top:6px;word-break:keep-all;overflow-wrap:anywhere}
#start .klass button.on small{color:#dfd2ad}
#start #go{min-height:54px;letter-spacing:.08em;text-indent:.08em;font-size:var(--ui-title);border:1px solid #ebd29a;
  background:linear-gradient(115deg,#dfc68e,#b99c62);color:#16202a;box-shadow:0 5px 20px #d4aa4920}
#start #go:hover:not(:disabled){background:linear-gradient(115deg,#eddaa9,#d0b377);color:#101920}
#start .reading-link{background:#14202bb3;border-color:#58636980;color:#ddd9c9}
#start .reading-link small{color:#abb8be}
#start .seo-intro{font-size:var(--ui-note);color:#b4bdbd;max-width:none}
#start .seo-intro summary{font-size:var(--ui-note);color:#adb8ba;min-height:44px;padding:10px 0}
#start .seo-intro[open]{max-height:none;overflow:visible}
#start .seo-intro p{line-height:1.7}
#start .credit{font-size:var(--ui-note);color:#b2ab99;line-height:1.5}
#start .credit a{color:#b2ab99}
#start #err{color:#eeaca0}
@media(max-width:1023px){
  #start{grid-template-columns:minmax(0,440px);justify-content:center;gap:0;padding:28px 20px;
    padding-top:max(28px,env(safe-area-inset-top,0px));padding-bottom:max(28px,env(safe-area-inset-bottom,0px))}
  #start .login-art img{object-position:35% center}
  #start::after{background:linear-gradient(0deg,#081019ee 0%,#08101940 65%,#08101922)}
  #start .login-legend{display:none}
  #start .wrap{margin-block:auto;background:linear-gradient(155deg,#111d29e8,#0c151ff2)}
}
@media(max-width:600px){
  #start{display:flex;flex-direction:column;justify-content:flex-start;padding:0 14px 14px;
    padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
  #start .login-art{position:absolute;height:440px}
  #start .login-art img{object-position:28% center}
  #start::after{position:absolute;background:linear-gradient(0deg,#081019 0%,#081019 32%,transparent 82%)}
  #start .login-legend{display:block;align-self:stretch;flex-shrink:0;margin:0;padding:calc(34px + env(safe-area-inset-top,0px)) 12px 24px;min-height:192px}
  #start .login-genre{letter-spacing:.08em;margin-bottom:12px}
  #start .login-legend h1{font-size:30px;line-height:1.3}
  #start .login-legend p{display:none}
  #start .wrap{flex-shrink:0;margin:0 auto;padding:24px 18px 12px;background:linear-gradient(155deg,#111d29ed,#0c151ff5)}
  #start .logo .ko{font-size:42px}
}
/* R153(C14) — 위 600px 절이 index.html 의 짧은 화면 접기(max-height:860)를 이기고 제목 칸을 min-height 192px 로
   되살렸다. 360×640 에서 그 192px 때문에 「게임 시작」(sticky)이 직업 설명을 63px 덮었다. 짧은 폰 화면에서는
   제목 칸을 내용 높이로 줄이고 글자·그림을 작게 — 이름 입력·직업·시작 버튼이 한 화면에 들어온다(io 기준선). */
@media(max-width:600px) and (max-height:860px){
  #start .login-art{height:300px}
  #start .login-legend{min-height:0;padding:calc(14px + env(safe-area-inset-top,0px)) 12px 12px}
  #start .login-genre{margin-bottom:6px}
  #start .login-legend h1{font-size:22px;margin-bottom:0}
  #start .wrap{padding-top:16px}
  #start .logo .ko{font-size:34px}
}
@media(max-width:600px) and (max-height:700px){
  #start .login-legend h1{font-size:19px}
  #start .klass{margin:8px 0 10px}
  #start .klass button{padding:8px 3px}
}
@media(prefers-reduced-motion:reduce){#page-loading i{animation:none}}
/* R205(레드팀 P2-6·C2-1, DESIGN 14.405) — 가로로 든 휴대폰(짧은 가로 화면, landscape-hint 와 같은 문턱 520px). 이름·직업·게임 시작이
   스크롤 없이 한 화면에 들어와야 한다.
   묶음 AA(DESIGN 14.431) — 전에는 카드가 화면 폭 780px 를 다 덮어 대표 그림은 위쪽 띠로만 보이고 표어(h1)는 숨었다. 이제 왼쪽은 그림과
   표어, 오른쪽은 좁은 카드(로고 한 줄 → 이름 → 직업 → 게임 시작)다. 선택 사항(계정 연결·읽을거리)은 카드 안에서 그 아래로 이어진다. */
@media (orientation:landscape) and (max-height:520px){
  #start{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);justify-content:stretch;align-items:start;gap:18px;
    padding:10px max(14px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));
    padding-top:max(10px,env(safe-area-inset-top,0px))}
  #start .login-art{position:fixed;height:auto;inset:0}
  #start .login-art img{object-position:30% 100%}
  #start::after{position:fixed;background:linear-gradient(90deg,transparent 30%,#08101966 58%,#081019c7 100%),linear-gradient(0deg,#060e18d9,transparent 45%)}
  #start .login-legend{display:block;position:sticky;top:0;align-self:end;margin:0;padding:0 0 6px;min-height:0;max-width:none}
  #start .login-genre{display:none}
  #start .login-legend h1{font-size:clamp(18px,5.4vh,22px);line-height:1.3;margin:0}
  #start .login-legend p{display:block;font-size:var(--ui-note);line-height:1.6;margin-top:6px}
  #start .wrap{max-width:380px;width:100%;margin:0;display:block;padding:10px 14px 8px}
  #start .logo{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-bottom:2px}
  #start .logo .ko{font-size:26px;display:inline}
  #start .logo .en{display:inline;margin:0;letter-spacing:.3em;text-indent:0}
  #start .rule{margin:6px auto 6px}
  #start .tag{margin-bottom:6px;line-height:1.4}
  #start .tag b.hook{font-size:var(--ui-note);margin-bottom:0}
  #start .login-field{margin-bottom:3px}
  #start #nm{min-height:40px;padding:7px 12px}
  #start .klass{margin:6px 0 8px}
  #start .klass button{padding:6px 3px;line-height:1.35;font-size:var(--ui-note)}
  #start .klass small{margin-top:2px;line-height:1.35}
  #start #go{position:sticky;bottom:6px;min-height:46px;box-shadow:0 5px 20px #000a}
  #start .start-more{margin-top:10px}
}
/* 묶음 AA(DESIGN 14.431) — 넓고 낮은 화면(1280×720·1366×768). index.html 의 짧은 화면 접기(max-height:860)를 위 `#start …` 규칙들이
   특이성으로 이겨 카드가 786px 로 화면 아래가 잘렸다(크레딧 「만들었다」). 같은 문턱에서 카드 안 간격만 줄여 한 화면에 들어온다. */
@media (min-width:1024px) and (max-height:860px){
  /* 표어는 모험가들의 발 아래(그림의 어두운 언덕)에 둔다 — 인물 위에 글자를 얹지 않는다 */
  #start .login-legend{bottom:3vh;margin-bottom:3vh}
  #start .login-genre{margin-bottom:10px}
  #start .login-legend h1{font-size:clamp(28px,5.2vh,44px)}
  #start .wrap{padding:20px 24px 12px}
  #start .logo .ko{font-size:46px}
  #start .rule{margin:12px auto 10px}
  #start .tag{margin-bottom:12px}
  #start .klass{margin:10px 0 12px}
  #start .klass button{padding:9px 4px}
  #start .klass small{line-height:1.5;margin-top:4px}
  #start #go{min-height:50px}
  #start .seo-intro summary{min-height:36px;padding:6px 0}
  #start .credit{margin-top:4px}
}
/* 묶음 AA(DESIGN 14.431) — 돌아온 사람의 캐릭터 선택: 큰 [이어하기] 가 맨 위, 삭제는 「캐릭터 삭제…」 뒤에 */
#start #resumechar{display:block;width:100%;min-height:54px;margin:0 0 14px;padding:10px 12px;font-size:var(--ui-title);border:1px solid #ebd29a;
  background:linear-gradient(115deg,#dfc68e,#b99c62);color:#16202a}
#start #resumechar small{display:block;font-size:var(--ui-note);color:#3a3222;margin-top:2px}
#start #delmode{display:block;margin:10px auto 0;background:transparent;border:0;border-bottom:1px solid #5a4d3a;padding:4px 2px;
  color:#a89a80;font-size:var(--ui-note)}
#start .slot .del[hidden]{display:none}

/* 묶음 Y(DESIGN 14.429, G5) — 세계 결산 카드(world-recap.js). 오류 칸(#err, 붉은 글)이 아니라 선택 화면 맨 위의 안내 카드 */
#start .world-recap{margin:0 0 10px;padding:10px 12px;border:1px solid #b08a4a;border-radius:8px;background:rgba(40,30,18,.92);
  color:#e9dfc8;text-align:left;font-size:var(--ui-note,13px);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
#start .world-recap[hidden]{display:none}
#start .world-recap .wr-title{display:block;color:#f0d26b;font-size:1.08em;margin-bottom:4px}
#start .world-recap p{margin:4px 0}
#start .world-recap .wr-carry{color:#bfe0a6}
#start .world-recap .wr-rule{color:#b9ad95}
#start .world-recap .wr-row{display:flex;gap:6px;margin-top:8px}
#start .world-recap .wr-row button{flex:1;min-height:40px}
/* 「유니지 2.0」 로고 타이포그래피 (사용자 지시 2026-10-01: "유니지 2.0 << 이라고 멋있게 타이포그라피 하면 좀 낫잖아", DESIGN 14.445).
   글자는 원화의 금빛 갑옷처럼 위→아래로 밝은 금에서 짙은 청동으로 내려가는 금속 칠, 「2.0」은 원화의 불타는 하늘과 같은 불씨 빛 인장.
   2.0 은 .ko 안에 있어 화면별 .ko 글자 크기 규칙(56·46·42·34·26px)을 그대로 따라 비율이 유지된다 — 짧은 화면에서도 숨지 않는다. */
#start .logo .ko{display:inline-flex;align-items:flex-end;justify-content:center;gap:.16em;text-indent:0;letter-spacing:0;
  color:#ecd49b;text-shadow:none}
#start .logo .ko-t{letter-spacing:.1em;padding-left:.1em;
  background:linear-gradient(180deg,#fff8e0 0%,#f8de9e 28%,#dcae58 52%,#ab7a31 72%,#704b1c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(.03em 0 0 #2b1d08) drop-shadow(-.03em 0 0 #2b1d08) drop-shadow(0 .03em 0 #2b1d08)
    drop-shadow(0 .07em 0 #1a1105) drop-shadow(0 .12em .2em #000b) drop-shadow(0 0 .35em #f0bf6233)}
#start .logo .ver{font-family:Galmuri11,Galmuri14,monospace;font-weight:700;font-size:.68em;line-height:.9;letter-spacing:.02em;
  margin-bottom:.07em;transform:skewX(-8deg);
  background:linear-gradient(180deg,#fff0bd 0%,#ffc76b 34%,#ff7f2a 62%,#c2321a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(.04em 0 0 #2a0a05) drop-shadow(-.04em 0 0 #2a0a05) drop-shadow(0 .05em 0 #2a0a05)
    drop-shadow(0 .1em 0 #140503) drop-shadow(0 0 .4em #ff6a2088)}
#start .logo .en{letter-spacing:.62em;text-indent:.62em}
#start .logo .en::before,#start .logo .en::after{content:"";display:inline-block;width:2.4em;height:1px;vertical-align:middle;
  background:linear-gradient(90deg,transparent,#c9a76acc)}
#start .logo .en::before{margin-right:.9em}
#start .logo .en::after{margin-left:.3em;background:linear-gradient(90deg,#c9a76acc,transparent)}