/* 공통 테마: 색, 글꼴, 콜라주 재료(종이, 물감, 액자, 리본).
   재료는 모두 실제 이미지 소스를 가공한 것이다. 출처는 docs/credits.md.
   금지 목록은 CLAUDE.md 참고. 둥근 모서리, 유리 효과, 장식용 그라데이션을 쓰지 않는다. */

/* 글꼴은 모두 앱 안에 담는다 (인터넷 없이도 같은 글꼴로, assets/fonts, 출처는 docs/credits.md) */

/* 본문: Wanted Sans Variable (OFL) */
@font-face { font-family: 'Wanted Sans Variable'; font-style: normal; font-weight: 400 1000; font-display: swap; src: url('../assets/fonts/WantedSansVariable.woff2') format('woff2-variations'), url('../assets/fonts/WantedSansVariable.woff2') format('woff2'); }

/* 영문 제목·이름: Cormorant Garamond, 필기체: La Belle Aurore (둘 다 OFL, Google Fonts에서 라틴 글자만) */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../assets/fonts/CormorantGaramond-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../assets/fonts/CormorantGaramond-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('../assets/fonts/CormorantGaramond-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('../assets/fonts/CormorantGaramond-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'La Belle Aurore'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/LaBelleAurore-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'La Belle Aurore'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/LaBelleAurore-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 제목, 이름: 마루 부리 (네이버, SIL OFL 1.1) */
/* 마루 부리는 글꼴 안의 다듬기(힌팅) 정보를 뺀 판을 쓴다 (오너 결정, 비교 시안 B): 윈도우가 그 정보대로 작은 글씨의 획을 화소 격자에 붙여
   획이 굵어졌다 가늘어졌다 했다. 글자 모양은 같다. 원본은 docs/originals/fonts/ */
@font-face { font-family: 'MaruBuri'; src: url('../assets/fonts/MaruBuri-Regular-nohint.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'MaruBuri'; src: url('../assets/fonts/MaruBuri-SemiBold-nohint.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'MaruBuri'; src: url('../assets/fonts/MaruBuri-Bold-nohint.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* 옛 인쇄물 장식 ❧: 오너가 고른 모나12의 픽셀 글자 한 자만 뽑아 쓴다 (원본 docs/originals/fonts/Mona12.ttf, SIL OFL 1.1).
   게임 글꼴에 이 글자가 없어 기기마다 다른 모양으로 나오던 것을 어디서나 같은 모양으로 */
@font-face { font-family: 'Fleuron'; src: url('../assets/fonts/mona12-fleuron.woff2') format('woff2'); unicode-range: U+2767; font-display: block; }

/* 손글씨: 인천교육자람체 (인천광역시교육청). 오너가 준 원본 파일 그대로 쓴다(파일 수정은 교육청 사전 허가가 필요해 변환하거나 줄이지 않는다) */
@font-face { font-family: 'IceJaram'; src: url('../assets/fonts/IceJaram-Regular.ttf') format('truetype'); font-display: swap; }

:root {
  --ink: #161816;          /* 먹색 바탕 */
  --ink-raised: #222622;   /* 바탕 위 어두운 종이 */
  --silver: #b8bbb5;
  --silver-dim: #80857f;
  --paper: #dedcd5;        /* 회백색 종이 (질감 이미지의 평균색) */
  --paper-shade: #cac7bf;
  --paper-ink: #1d1f1c;    /* 종이 위 글씨 */
  --paper-ink-soft: #565a53;
  --green: #22603a;        /* 유일한 포인트 색 */
  --green-ink: #2a6b41;

  /* 한 글자열 안에서 숫자, 영문, 한글의 글꼴이 섞이지 않게: 한글이 들어갈 수 있는 곳은 모두 마루 부리,
     Cormorant는 영문만 들어가는 이름과 표제에만 쓴다 */
  --font-display: 'MaruBuri', serif;                         /* 제목, 표, 버튼 (한글·숫자·영문 모두) */
  --font-latin: 'Fleuron', 'Cormorant Garamond', serif;                 /* 영문만: 인물 이름, 게임 제목, Position, No. */
  --font-ko-serif: 'MaruBuri', serif;                        /* 한글 제목·이름·지문 */
  --font-hand: 'IceJaram', 'La Belle Aurore', cursive;
  --font-body: 'Wanted Sans Variable', 'Wanted Sans', system-ui, sans-serif;

  --gutter: clamp(16px, 3vw, 40px);
}

* { box-sizing: border-box; }

/* 누르다가 글자가 끌려 골라지지 않게 한다 (적는 칸은 그대로, 오너 결정. 오른쪽 클릭과 개발자 도구는 js/ui/guard.js) */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }

/* 사진과 장식은 끌어서 옮기거나 길게 눌러 저장할 수 없게 한다 */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 스크롤은 되지만 스크롤바는 어디에도 보이지 않게 한다 */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

html, body { margin: 0; }
/* 글자의 기준 크기. 화면의 글자는 거의 모두 rem이라 이것만 바꾸면 함께 커진다.
   --text-scale: 서류철의 글자 크기(js/ui/prefs.js). 넓은 PC 창에서 저절로 키우던 것(--screen-scale)은 뺐다:
   글자 크기 설정이 생겼고, 저절로 커지면 배치가 깨졌다 (오너 결정) */
html { font-size: calc(16px * var(--text-scale, 1)); }
/* 누를 때 안드로이드가 칠하는 하늘색 덮개를 없앤다 (누른 느낌은 각 단추의 움직임으로 준다) */
html { -webkit-tap-highlight-color: transparent; }
/* 휴대폰 브라우저가 글자 덩어리마다 크기를 제멋대로 키우지 않게 (오너 지적: 상단 줄의 '도시로 나간다'와 '서류철' 크기가 달랐다) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  background-color: var(--ink);
  /* 긁힘 + 실제 종이 스캔을 먹색으로 바꾼 질감 + 가장자리 어둡게 */
  background-image:
    url('../assets/svg/scratches.svg'),
    radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0, 0, 0, .6) 100%),
    url('../assets/img/paper-dark.webp');
  background-size: 1200px auto, 100% 100%, 640px 640px;
  background-attachment: fixed;
  color: var(--silver);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: -.03em;    /* 본문(Wanted Sans)은 살짝 좁게 */
  word-break: keep-all;      /* 한국어는 단어 중간에서 줄을 바꾸지 않는다 */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 종이 ---------- */

/* 종이 그림자는 부드럽게 퍼지는 것 하나만. 전에는 3px 아래로 번짐 없이 찍은 그림자(종이 두께)를 더 얹었는데,
   밝은 종이 위에서는 아래에 두꺼운 회색 줄처럼 보였다 (오너 지적: 이름표, 고르는 칸 목록 등) */
.paper-wrap { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }
/* 종이의 뒤층이 그림자를 대신 지면 감싼 칸에서는 뺀다 (글자에 필터가 걸리지 않게, js/ui/torn.js). 종이 말고 함께 든 것(테이프 등)은 따로 그림자를 진다 */
.paper-wrap.paper-wrap--inner { filter: none; }
.paper-wrap.paper-wrap--inner > :not([data-torn-back="1"]):not(.tag-dark) { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }
/* 종이 위에 얹은 어두운 이름표(대사창의 말하는 사람 등)에는 그림자를 드리우지 않는다 (오너 지적: 그림자가 너무 컸다) */

/* 19세기 종이 스캔(Met 824307)에서 만든 이음새 없는 질감 */
.paper {
  position: relative;
  background: var(--paper) url('../assets/img/paper-light.webp') 0 0 / 520px 520px;
  color: var(--paper-ink);
}

/* 어두운 종이 띠 (레퍼런스의 연도, 신상 태그) */
.tag-dark {
  display: inline-block;
  padding: .45em 1.1em;
  background: var(--ink-raised) url('../assets/img/paper-dark.webp') 0 0 / 400px 400px;
  border: 1px solid var(--silver-dim);
  color: var(--silver);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .02em;
  white-space: nowrap;
}

.tag-dark .sep { margin: 0 .55em; color: var(--silver-dim); }

/* 반투명 종이 테이프: 오목하게 파인 양 끝 없이 반듯한 직사각형에 종이 결 (오너 결정) */
.tape {
  position: absolute;
  width: 92px;
  height: 26px;
  background: url('../assets/img/paper-light.webp') 0 0 / 300px 300px;
  opacity: .7;
}

/* 초록 물감 라벨: 오너가 만든 물감 획에 반 고흐 그림의 실제 물감(Met 436535)을 55% 씌운 3종을 번갈아 쓴다 (tools/blend_paint.py) */
.brush {
  display: inline-grid;
  place-items: center;
  min-width: 9.5em;
  padding: .75em 1.8em .8em;
  background: url('../assets/img/label-1.webp') center / 100% 100% no-repeat;
  color: #f6f3ea;
  text-shadow: 0 0 8px rgba(0, 0, 0, .55);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.brush:nth-of-type(3n + 2) { background-image: url('../assets/img/label-2.webp'); }
.brush:nth-of-type(3n + 3) { background-image: url('../assets/img/label-3.webp'); }

/* 필기체 메모 */
.hand {
  font-family: var(--font-hand);
  -webkit-text-stroke: .3px currentColor;   /* 획이 가는 글꼴이라 작은 글씨에서도 읽히게 살짝 굵힌다 */
  letter-spacing: normal;
  color: var(--green-ink);
  line-height: 1.15;
}

/* 이름 아래 넓게 벌린 한글 */
.ko-spaced {
  font-family: var(--font-ko-serif);
  font-weight: 600;
  letter-spacing: .5em;
}

/* ---------- 이름 배너: 천사가 펼쳐 든 두루마리. 오너가 보정한 이미지 그대로 (docs/originals/owner/name-banner.png) ---------- */

.ribbon {
  container-type: inline-size;
  position: relative;
  --angel-offset: 4.6%;   /* 천사가 이미지 가운데보다 이만큼 오른쪽에 있다. 액자 가운데에 맞출 때 쓴다 */
  aspect-ratio: 969 / 562;
  background: url('../assets/img/name-banner.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
  color: var(--paper-ink);
}

/* 천사 아래 두루마리 앞면 */
.ribbon__text {
  position: absolute;
  left: 20%; right: 18%;
  top: 46%; height: 25%;
  display: grid;
  place-content: center;
  text-align: center;
}

.ribbon__name {
  margin: 0;
  font-family: var(--font-latin);
  font-size: 8cqw;
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.035em;   /* 레퍼런스처럼 글자 사이를 좁게 */
  color: #3b3d3a;            /* 새까맣지 않은 판화 잉크색 */
  white-space: nowrap;
}

.ribbon__ko { margin: .35em 0 0; font-size: 2.6cqw; line-height: 1; color: #3b3d3a; }

/* ---------- 은빛 액자: 1735년경 로코코 액자 사진(Met 209073), 오너가 배경을 따고 보정 ---------- */

.frame {
  position: relative;
  aspect-ratio: 1102 / 1480;
}

.frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url('../assets/img/frame-cadre.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
  pointer-events: none;
}

/* 안쪽은 액자 구멍보다 살짝 크게 잡아 가장자리가 액자 밑으로 숨게 한다 */
.frame__inner {
  position: absolute;
  inset: 14% 13.5% 9.8% 13.5%;
  overflow: hidden;
  background: #2b312c url('../assets/img/paper-dark.webp') 0 0 / 300px 300px;
  background-blend-mode: screen;
}

.frame__inner img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 86%;
  transform: translateX(-50%);
}
/* 끼운 그림(내 인물의 초상 등): 액자 안을 꽉 채운다 */
.frame__inner img.is-photo { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }
img.is-photo { object-fit: cover; object-position: center top; }
/* 초상 색 맞추기 (오너 결정, 시안 C): 디지털 그림이 먹색 화면에서 붕 뜨지 않게 채도를 조금 낮추고 옅은 세피아를 더한다.
   큰 액자(.frame__inner)는 안쪽 가장자리를 살짝 눌러 그림이 액자 안에 앉게 한다 */
/* 큰 액자는 그림이 아니라 액자 안쪽 칸에 건다: 인물 화면의 초상은 나타나는 움직임(css/motion.css의 portrait-in)이 그림의 filter를 덮어쓴다 */
.frame__inner:has(> img.is-photo, > img[src*="silhouettes/"]) { filter: saturate(.8) contrast(.94) sepia(.1) brightness(.97); }
:not(.frame__inner) > img.is-photo, :not(.frame__inner) > img[src*="silhouettes/"] { filter: saturate(.8) contrast(.94) sepia(.1) brightness(.97); }
.frame__inner::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 22px 6px rgba(18, 20, 18, .55); }
/* 기본 초상(assets/silhouettes, 그림이 없는 인물과 초상을 끼우지 않은 내 인물): 끼운 그림처럼 꽉 채운다 (오너 결정).
   화면마다 작은 사진 칸의 규칙보다 앞서도록 body를 붙였다 */
.frame__inner img[src*="silhouettes/"] { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
body img[src*="silhouettes/"] { object-fit: cover; object-position: center top; }

/* 밀랍 봉인 버튼 (대화의 '건넨다', 인물 만들기의 '봉인' 등)
   밀랍 사진(assets/img/wax-seal.webp)을 깔고, 글자는 가운데 둥근 홈 안에. 크기는 width로만 정한다 */
.seal {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0 0 0 3px;   /* 밀랍 홈이 살짝 오른쪽에 있어 글자를 맞춘다 */
  border: 0;
  background: url('../assets/img/wax-seal.webp') center / contain no-repeat;
  color: #e9e6dc;
  font-family: var(--font-ko-serif);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(0, 0, 0, .55);
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, .45));
  cursor: pointer;
}

.seal[hidden] { display: none; }

/* 동판화 장식 스티커 (Openclipart CC0, 오너가 채움과 테두리를 보정. docs/credits.md) */
.deco {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, .5));
}

/* 손으로 그은 눈금(.tally): 획 모양과 결은 쇠라 그림의 콩테 획(관계 눈금 표시와 같은 재료)을 가면으로 쓰고,
   색은 각 화면이 정한 배경색을 그대로 쓴다. 기울기와 높낮이 차이는 화면마다 둔 그대로 */
.tally i:not(.cross) {
  width: 5px;
  -webkit-mask: url('../assets/img/meter-mark.webp') center / 100% 100% no-repeat;
  mask: url('../assets/img/meter-mark.webp') center / 100% 100% no-repeat;
}
.tally i:not(.cross):nth-child(3n) { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; scale: -1 1; }

/* 화면 낭독기 전용 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible { outline: 2px dashed var(--green-ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* 숫자 칸의 위아래 화살표는 숨긴다 (종이 위 밑줄 칸과 어울리지 않는다) */
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }


/* 찢은 종이의 뒤층 (js/ui/torn.js의 moveToBack): 바탕과 찢긴 테두리 필터를 글자 뒤 층에만 둔다 (글자가 바뀌어도 테두리를 다시 그리지 않게, 발열 줄이기) */
.torn-back { isolation: isolate; }
.torn-back::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--torn-radius, 0);
  background-color: var(--torn-bg-color);
  background-image: var(--torn-bg-image);
  background-size: var(--torn-bg-size);
  background-position: var(--torn-bg-position);
  background-repeat: var(--torn-bg-repeat);
  background-origin: var(--torn-bg-origin);
  background-clip: var(--torn-bg-clip);
  background-attachment: var(--torn-bg-attachment);
  background-blend-mode: var(--torn-bg-blend-mode);
  filter: var(--torn-filter);
  pointer-events: none;
}
/* 스크롤하는 찢은 종이의 뒤층 (js/ui/torn.js의 scrollBack): 보이는 칸에 맞춰 스크롤을 따라 옮긴다 */
.torn-host { isolation: isolate; }
.torn-host > .torn-layer { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; pointer-events: none; will-change: transform; }

/* 항목 이름 바로 아래 문단은 붙인다: 여백을 따로 정하지 않은 문단은 브라우저 기본 여백(위아래 1em)이 들어가
   이름과 내용이 혼자 멀리 떨어졌다 (오너 지적: 정리 종이, 인물 쪽지 등 여러 곳). 이름 쪽의 아래 여백만 남긴다 */
:is([class*="__label"], .whois__known) + p { margin-top: 0; }

/* ---------- 고르는 칸(select)의 펼친 목록 (PC, js/ui/select.js가 그린다) ----------
   모바일은 기기의 고르기 화면. PC의 흰 바탕에 회색 줄 목록 대신 종이 목록 (오너 지적). 닫힌 칸은 원래 모습 그대로 */
.select-list {
  position: fixed;
  z-index: 90;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  background: var(--paper) url('../assets/img/paper-light.webp') 0 0 / 300px 300px;
  color: var(--paper-ink);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
  scrollbar-width: thin;
  scrollbar-color: rgba(29, 31, 28, .35) transparent;
  animation: ink-in .15s ease-out both;
}
.select-list__opt { scroll-snap-align: start; box-sizing: border-box; height: 1.9rem; padding: 0 14px; font-family: var(--font-body); font-size: .9rem; line-height: 1.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.select-list__opt.is-active { background: rgba(29, 31, 28, .1); }
.select-list__opt[aria-selected='true'] { font-weight: 700; }
.select-list__opt[aria-disabled='true'] { color: var(--paper-ink-soft); cursor: default; }