로 감싼다. 어두운 입력 화면은 그대로 둔다 — * 어둠에서 한지로 넘어가는 대비가 풀이를 더 살린다. */ /* ══ 한지 편지지 ══ [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 은 로 두면 이전과 똑같이 동작한다. */ .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} .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{ content:''; display:block; width:min(76%, 272px); height:15px; margin:4px auto 30px; background: /* ③ 갈필 — 끝자락에만 결이 갈라진다. 전체에 깔면 빗살이 된다(1차에 그렇게 나왔다). 세 줄만 성기게 놓아 '먹이 마르는 중' 만 보이게 한다. */ linear-gradient(90deg, transparent 76%, rgba(247,241,227,.55) 77.5%, transparent 79%), linear-gradient(90deg, transparent 83%, rgba(247,241,227,.5) 84.5%, transparent 86%), linear-gradient(90deg, transparent 89%, rgba(247,241,227,.45) 90.5%, transparent 92%), /* ② 몸통 — 가운데가 가장 짙다 */ linear-gradient(92deg, transparent 0%, rgba(42,32,22,.28) 5%, rgba(42,32,22,.88) 20%, rgba(42,32,22,.94) 46%, rgba(42,32,22,.72) 72%, rgba(42,32,22,.24) 93%, transparent 100%); /* ① 눌렀다 떼는 획 — 양 끝이 가늘다 */ clip-path: polygon(0% 50%, 5% 22%, 18% 8%, 46% 2%, 74% 9%, 90% 24%, 100% 50%, 91% 74%, 75% 91%, 47% 98%, 19% 90%, 5% 73%); transform: rotate(-.4deg); /* 손으로 그은 것이라 수평이 아니다 */ opacity:.9; } /* 낙관 구획 둘레는 짧게 — 도장 앞뒤는 여백이 살아야 한다 */ .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:min(84%,232px); height:12px; margin-bottom:24px } }