/* 한지 풀이서 조판 — 풀이가 나가는 화면은 전부 이 껍데기를 쓴다.
 *
 * [2026-08-13 운영자] "누가 칙칙한 검은색을 좋아한다고. 뭐 편지지나 예쁜 질감의
 *                      메모지에 나와 줘야 기분이 좋지."
 * [2026-09-01 운영자] "사람들에게 전해주는 풀이서도 제대로 디자인을 해야해.
 *                      블랙 남색틱한 클로드식 PPT 디자인 말고, 고급 디자인된 글씨체와 페이지로."
 *
 * reading.html 안에만 있던 것을 여기로 옮긴다. 사주·이름 결과도 같은 종이 위에 앉히려면
 * 한 벌이어야 한다 — 사본을 만들면 또 갈린다(오늘 hourFromLabel 이 3벌로 갈려 사고가 났다).
 *
 * 쓰는 법: <link rel="stylesheet" href="/yeon/lib/yeon-hanji.css"> 뒤에
 *         결과 영역을 <div class="hanji"> 로 감싼다. 어두운 입력 화면은 그대로 둔다 —
 *         어둠에서 한지로 넘어가는 대비가 풀이를 더 살린다.
 */
/* ══ 한지 편지지 ══
   [2026-08-13 운영자] "누가 칙칙한 검은색을 좋아한다고. 뭐 편지지나 예쁜 질감의
    메모지에 나와 줘야 기분이 좋지."
   그래서 결과지는 어두운 화면이 아니라 **볕 든 한지** 위에 앉힌다.
   질감은 이미지 없이 그라디언트만으로 낸다(용량 0 · 어느 해상도에서도 또렷). */

/* [2026-09-01 수리] 규칙을 .hanji 안으로 가뒀다.
   가두기 전에 cheon.html 에 실었더니 클래스가 부딪혔다(실측):
     .soft  cheon 9곳 · .pil 기둥카드 2곳 · .wrap/.letter/.sec 각 1곳
   한지 색이 어두운 화면의 그 자리까지 덮어 톤이 뒤섞였다.
   조판을 나눠 쓰려면 남의 집 이름과 겹치지 않게 자기 울타리 안에 있어야 한다. */
:root{
  --hanji:#f7f1e3; --hanji-2:#efe6d2; --ink:#2a2016; --ink-soft:#5f5340;
  --gold:#a3823f; --gold-lite:#c9a55f; --line:rgba(163,130,63,.28);
  --seal:#9c2b23;
}
*{box-sizing:border-box}
/* [2026-09-01] body 가 아니라 .hanji 에 건다 — 어두운 입력 화면(cheon·name)에
   이 파일을 실어도 페이지 전체가 한지로 덮이지 않게. 결과 영역만 종이가 된다.
   reading.html 은 <body class="hanji"> 로 두면 이전과 똑같이 동작한다. */
.hanji{
  margin:0; color:var(--ink); font-family:'Gowun Batang','Nanum Myeongjo',serif;
  line-height:1.95; word-break:keep-all;
  background:
    radial-gradient(1200px 700px at 15% -10%, #fffdf6, transparent 60%),
    radial-gradient(900px 600px at 90% 110%, #f2e8d0, transparent 55%),
    linear-gradient(180deg,#f9f4e8,#efe5d0);
  background-attachment:fixed;
}
/* 한지 결 — 아주 옅은 사선/점 결을 두 겹으로 겹친다 */
.hanji body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(112deg, rgba(163,130,63,.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(  6deg, rgba(120,90,40,.035) 0 1px, transparent 1px 5px);
}
.hanji .wrap{max-width:760px;margin:0 auto;padding:0 18px 80px}

/* ── 상단 명반 (3D) ── */
.hanji .crown{position:relative;padding:26px 0 6px;text-align:center}
.hanji .crown h1{
  font-family:'Nanum Myeongjo',serif;font-weight:800;font-size:23px;letter-spacing:.02em;
  margin:0 0 2px;color:var(--ink)}
.hanji .crown .sub{font-size:12px;letter-spacing:.42em;color:var(--gold);margin:0 0 14px}
.hanji #myeongban{width:100%;height:min(46vh,340px);border-radius:16px;overflow:hidden;
  background:radial-gradient(60% 60% at 50% 40%,rgba(201,165,95,.16),transparent 70%)}
.hanji .crown .cap{font-size:11.5px;color:rgba(95,83,64,.62);margin-top:6px;letter-spacing:.06em}

/* ── 편지지 ── */
.hanji .letter{
  position:relative;background:linear-gradient(180deg,var(--hanji),var(--hanji-2));
  border:1px solid var(--line);border-radius:6px;padding:34px 30px 40px;margin-top:18px;
  box-shadow:0 22px 50px -28px rgba(80,60,25,.55), inset 0 1px 0 rgba(255,255,255,.7);
}
/* 편지지 접힌 자국 */
.hanji .letter::after{content:"";position:absolute;left:0;right:0;top:33%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(163,130,63,.22),transparent);pointer-events:none}
.hanji .sec{padding:20px 0;border-bottom:1px dashed rgba(163,130,63,.24)}
.hanji .sec:last-child{border-bottom:0}
.hanji .sec h2{
  font-family:'Nanum Myeongjo',serif;font-size:15.5px;font-weight:800;color:var(--gold);
  margin:0 0 10px;letter-spacing:.02em}
.hanji .sec p{margin:0;font-size:16.5px;color:var(--ink)}
.hanji .sec p + p{margin-top:12px}
/* [r14] 줄을 나눠 지은 글은 나눈 채로 보인다(일진 5줄).
   apply.html 이 이미 쓰던 pre-line 을 공용 자리로 올린 것 — 새 방식이 아니다. */
.hanji .sec p.ln{white-space:pre-line}
.hanji .soft{color:var(--ink-soft);font-size:15px}

/* 네 기둥 */
.hanji .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 12px}
.hanji .pil{border:1px solid var(--line);border-radius:8px;padding:12px 4px;text-align:center;
  background:rgba(255,255,255,.5)}
.hanji .pil em{display:block;font-style:normal;font-size:11px;color:var(--gold);letter-spacing:.1em}
.hanji .pil b{display:block;font-family:'Nanum Myeongjo',serif;font-size:26px;line-height:1.25;margin-top:4px}
.hanji .pil i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.hanji .pil.locked{border-style:dashed;opacity:.5}

/* 오행 막대 */
.hanji .oh{display:flex;gap:8px;margin:10px 0 4px}
.hanji .ohb{flex:1;border:1px solid var(--line);border-radius:8px;padding:9px 0;text-align:center;
  background:rgba(255,255,255,.45)}
.hanji .ohb b{display:block;font-size:19px;font-family:'Nanum Myeongjo',serif}
.hanji .ohb span{display:block;font-size:11px;color:var(--ink-soft)}
.hanji .ohb.zero{background:rgba(156,43,35,.06);border-color:rgba(156,43,35,.28)}
.hanji .ohb.zero b{color:var(--seal)}
.hanji .ohb.many{background:rgba(163,130,63,.1);border-color:rgba(163,130,63,.45)}

/* 성향 낙관(도장) */
.hanji .type{display:flex;align-items:center;gap:14px;margin:4px 0 8px}
.hanji .seal{flex:none;width:70px;height:70px;border-radius:8px;display:grid;place-items:center;
  border:2px solid var(--seal);color:var(--seal);font-family:'Nanum Myeongjo',serif;
  font-weight:800;font-size:15px;line-height:1.15;text-align:center;
  transform:rotate(-4deg);background:rgba(156,43,35,.05)}
/* 구성 명반 9궁 */
.hanji .g9{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:230px;margin:8px 0}
.hanji .g9 span{border:1px solid var(--line);border-radius:6px;padding:9px 0;text-align:center;
  font-family:'Nanum Myeongjo',serif;font-size:16px;background:rgba(255,255,255,.45)}
.hanji .g9 span.mid{border-color:var(--gold);background:rgba(163,130,63,.12);font-weight:700}


/* ══ 구역 구분 꾸밈 — 우리가 그린 문양 ══
   [2026-08-13 운영자] "예쁜 AI식 구문부호가 아닌 우리가 만든 디자인된 구문부호."
   ━━ ▶ ✅ 같은 것은 어디서나 쓰는 표시라 우리 것이 아니다. 단락마다 뜻에 맞는
   문양을 도형으로 그린다 — 이미지 0바이트, 어느 배율에서도 또렷하다. */
.hanji .sec{position:relative;padding:26px 0 20px;border-bottom:0}
.hanji .sec + .sec{border-top:1px solid rgba(163,130,63,.16)}
.hanji .sec .orn{position:absolute;top:-9px;left:0;background:linear-gradient(180deg,var(--hanji),var(--hanji-2));
  padding-right:12px;display:flex;align-items:center;gap:3px;height:18px}
.hanji .sec .orn i{display:block;background:var(--gold);opacity:.75}
/* 붓을 대는 자리 — 점 하나에서 선이 뻗는다 */
.hanji .orn.open i:nth-child(1){width:7px;height:7px;border-radius:50%}
.hanji .orn.open i:nth-child(2){width:26px;height:1.5px}
/* 물음 — 갈고리 둘 */
.hanji .orn.restate i{width:6px;height:11px;border-radius:0 0 6px 0;border-right:1.5px solid var(--gold);
  border-bottom:1.5px solid var(--gold);background:none}
/* 판 — 네 기둥 */
.hanji .orn.board i{width:2px;height:13px}
/* 다섯 기운 — 점 다섯 */
.hanji .orn.ohaeng i{width:5px;height:5px;border-radius:50%}
/* 낙관 — 사각 도장 */
.hanji .orn.type i{width:12px;height:12px;border:1.5px solid var(--seal);background:none;opacity:1}
/* 명반 — 아홉 칸 */
.hanji .orn.gusung i{width:4px;height:4px}
/* 풀이 — 인용 */
.hanji .orn.answer i:nth-child(1){width:3px;height:13px}
.hanji .orn.answer i:nth-child(2){width:3px;height:13px}
/* 괘 — 육효(양·음·양) */
.hanji .orn.jum i{width:16px;height:2px}
.hanji .orn.jum i:nth-child(2){width:7px;box-shadow:9px 0 0 var(--gold)}
/* 이르는 말 — 획 하나 */
.hanji .orn.advice i{width:22px;height:2px;border-radius:2px}
/* 맺음 — 매듭 */
.hanji .orn.close i{width:8px;height:8px;border:1.5px solid var(--gold);background:none;transform:rotate(45deg)}
/* 괘 이름 — 책에서 뽑은 자리라 도장처럼 앉힌다 */
.hanji .gwae{margin:2px 0 10px;font-family:'Nanum Myeongjo',serif;font-size:19px;color:var(--seal);
  letter-spacing:.04em}
.hanji .gwae b{display:inline-block;min-width:34px;height:34px;line-height:32px;text-align:center;
  border:1.5px solid var(--seal);border-radius:6px;font-size:15px;margin-right:8px}
/* 잠금 안내 */
.hanji .lock{border:1px dashed rgba(163,130,63,.5);border-radius:10px;padding:16px 18px;
  background:rgba(163,130,63,.06);margin-top:16px}
.hanji .lock b{color:var(--gold)}
.hanji .btn{display:inline-block;margin-top:12px;border-radius:999px;padding:11px 22px;
  font-weight:700;font-size:14px;text-decoration:none;color:#fffdf6;
  background:linear-gradient(180deg,var(--gold-lite),var(--gold))}
.hanji .foot{text-align:center;color:rgba(95,83,64,.55);font-size:11.5px;margin-top:26px;line-height:1.8}
.hanji .state{padding:60px 0;text-align:center;color:var(--ink-soft)}
@media (max-width:640px){
  .letter{padding:26px 18px 32px}
  .sec p{font-size:16px}
  .pil b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){#myeongban{height:0;overflow:hidden}}

/* ── 붓 자국 경계선 (2026-09-01) ─────────────────────────────────────
   [운영자] "큰 가로형 붓글씨 한 게 막대형으로 넣고 디자인하는 것도 예뻐 보일 듯해. 경계선으로."

   1차로 그렸더니 흐린 회색 막대가 나왔다 — 붓이 아니라 그림자로 보였다(실측 캡처).
   붓으로 보이려면 세 가지가 있어야 한다:
     ① 양 끝이 가늘어진다   — clip-path 로 눈(眼) 모양을 낸다. 획은 눌렀다 떼는 것이다
     ② 가운데가 가장 진하다 — 먹이 제일 많이 닿는 자리
     ③ 끝에 갈필(渴筆)     — 먹이 마르며 결이 갈라진다. 세로 줄무늬로 낸다
   이미지는 쓰지 않는다(이 파일 원칙 — 용량 0 · 어느 해상도에서도 또렷).
   맨 앞 구획 위에는 긋지 않는다(.sec + .sec) — 글이 시작하기 전에 줄부터 그으면
   종이가 아니라 표가 된다. */
.hanji .sec + .sec::before{
  /* [2026-09-01 2차] 그라디언트+clip-path 로 그린 획은 화면에서 '회색 타원' 으로 보였다.
     세 번 손봤지만 붓이 안 됐다 — 먹이 번지고 결이 갈라지는 것은 도형으로 안 된다.
     아래 큰 획에 쓰는 SVG 를 그대로 눌러 쓴다. 같은 붓이라야 한 사람이 쓴 글이 된다. */
  content:''; display:block;
  width:min(96%, 620px); height:30px; margin:6px auto 30px;
  background:url('/yeon/assets/ink-stroke.svg') no-repeat center/100% 100%;
  opacity:.62;
}
/* 낙관 구획 둘레는 짧게 — 도장 앞뒤는 여백이 살아야 한다 */
.hanji .sec.type + .sec::before, .hanji .sec + .sec.type::before{
  width:min(44%,158px); height:11px; opacity:.72
}

@media (max-width:420px){
  .hanji .sec + .sec::before{ width:98%; height:24px; margin-bottom:24px; opacity:.58 }
}

/* ══ 수묵 붓획 ══════════════════════════════════════════════════════
   [2026-09-01 운영자 참고안] "글 쓸 때 아래에 큰 획으로 디자인한 예야.
    고객용 설명서를 수묵화풍으로 매우 예쁘게 심미화풍 디자인을 하자."

   CSS 그라디언트로는 먹 번짐도 갈필도 안 나온다 — 두 번 해 보고 알았다.
   png 를 쓰면 해상도마다 흐려지고 용량이 붙는다.
   SVG 안에서 난류(feTurbulence)로 획 가장자리를 밀면 붓이 종이를 긁은 자리가 생긴다.
   어느 크기로 늘려도 또렷하고 파일은 2KB 다.

   ::after 는 편지지 접힌 자국이 이미 쓴다 — 뺏지 않고 ::before 로 들어간다. */
.hanji .letter{ padding-bottom:112px }
.hanji .letter::before{
  content:''; position:absolute; left:-3%; right:-3%; bottom:8px; height:112px;
  background:url('/yeon/assets/ink-stroke.svg') no-repeat center/100% 100%;
  opacity:.86; pointer-events:none; z-index:0;
}
/* 낙관 — 획 위에 도장을 찍는다. 이름이 있어야 글이 끝난 것이 된다 */
.hanji .seal{
  position:absolute; right:18px; bottom:38px; z-index:1;
  width:40px; height:40px; border:1.5px solid #9c3a2e; border-radius:3px;
  color:#9c3a2e; font-family:'Song Myung','Gowun Batang',serif; font-size:12.5px;
  line-height:1.06; letter-spacing:-.5px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  opacity:.84; transform:rotate(-2.5deg);
}
.hanji .sec{ position:relative; z-index:1 }
@media (max-width:640px){
  .hanji .letter{ padding-bottom:88px }
  .hanji .letter::before{ height:88px; bottom:6px }
  .hanji .seal{ width:34px; height:34px; font-size:11px; bottom:30px }
}

/* ── 먼저 보실 것 · 이어서 읽기 (2026-09-01) ─────────────────────────
   운영자 "왜 다 쓰냐고" — 열세 자리를 통째로 쏟지 않는다.
   요약을 앞에 두고, 각 자리는 두 문장만 편다. */
.hanji .sec.brief{
  background:rgba(163,130,63,.07); border:1px solid rgba(163,130,63,.22);
  border-radius:5px; padding:18px 18px 14px; margin-bottom:6px;
}
.hanji .sec.brief h2{ margin-bottom:12px }
.hanji .sec.brief p + p{ margin-top:8px }
.hanji .sec.brief b{ color:#7a5c1e; font-weight:800 }
.hanji details.more{ margin-top:10px }
.hanji details.more > summary{
  list-style:none; cursor:pointer; display:inline-block;
  font-size:13px; color:var(--gold); border-bottom:1px dashed rgba(163,130,63,.5);
  padding-bottom:1px;
}
.hanji details.more > summary::-webkit-details-marker{ display:none }
.hanji details.more > summary::after{ content:' +' }
.hanji details.more[open] > summary::after{ content:' −' }
.hanji details.more > p{ margin-top:10px }

/* 손님 성별 — 원장은 '남자의 경우 A이나 여자의 경우 B' 로 한 문장에 둘을 적는다.
   나눌 수 없으니 눈이 자기 자리에 먼저 가게만 한다(2026-09-02). */
.hanji b.mine{ color:#7a5c1e; font-weight:800;
  box-shadow:inset 0 -7px 0 rgba(163,130,63,.18) }