/* 이름 변환기 — 한국 전통 문서 느낌 (쪽빛·한지·먹·인주)
   하나의 기억 요소: 결과를 족자처럼 세로쓰기로 보여준다. 나머지는 조용하게. */
:root{
  --jjok:#1d2b4f;      /* 쪽빛: 머리·제목·족자 축 */
  --hanji:#fbfaf6;     /* 한지: 바탕 */
  --paper:#ffffff;
  --meok:#20201e;      /* 먹: 본문 */
  --stone:#6f6b63;     /* 보조 글 */
  --inju:#b3362c;      /* 인주: 도장·주요 버튼만 */
  --line:#ddd8cc;
  --serif:"Gowun Batang","Noto Serif KR",serif;
  --sans:"Gowun Dodum","Noto Sans KR",system-ui,sans-serif;
  --hanja:"Noto Serif KR","Gowun Batang",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hanji);color:var(--meok);font-family:var(--sans);font-size:17px;line-height:1.75}
a{color:var(--jjok);text-underline-offset:3px}
a:hover{color:var(--inju)}
:focus-visible{outline:2px solid var(--inju);outline-offset:2px}
.wrap{max-width:720px;margin:0 auto;padding:0 20px}

/* 머리: 쪽빛 띠 */
.top{background:var(--jjok);color:var(--hanji)}
.top .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--hanji);text-decoration:none;font-family:var(--serif);font-weight:700;font-size:1.05rem}
.brand:hover{color:#fff}
.seal{display:inline-grid;place-items:center;width:28px;height:28px;background:var(--inju);color:#fff;border-radius:4px;font-family:var(--hanja);font-weight:900;font-size:16px;line-height:1}
.top nav a{color:#c9cfdf;text-decoration:none;margin-left:18px;font-size:.95rem}
.top nav a[aria-current="page"]{color:#fff;border-bottom:1px solid var(--inju)}
.top nav a:hover{color:#fff}
.hero{padding:26px 0 34px}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,5.2vw,2.5rem);line-height:1.3;margin:0 0 10px;color:#fff;letter-spacing:-.01em}
.hero .lead{color:#c9cfdf;margin:0 0 22px;max-width:34em}
.hero .lead b{color:#fff}
#nh-form{display:flex;gap:0;background:var(--paper);border-radius:6px;padding:6px;max-width:560px}
#nh-name{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1.1rem;padding:10px 12px;color:var(--meok)}
#nh-name:focus{outline:none}
#nh-form:focus-within{box-shadow:0 0 0 3px rgba(179,54,44,.45)}
#nh-form button{border:0;background:var(--inju);color:#fff;font:inherit;font-weight:700;padding:0 22px;border-radius:4px;cursor:pointer;min-height:46px}
#nh-form button:hover{background:#9c2c23}
.nh-hint{margin:10px 0 0;color:#ffd9a8;font-size:.92rem}

/* 결과: 족자 */
.result{padding:34px 0 8px}
.scroll{position:relative;margin:0 auto;max-width:420px;background:var(--paper);padding:38px 24px 28px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.scroll::before,.scroll::after{content:"";position:absolute;left:-14px;right:-14px;height:12px;background:var(--jjok);border-radius:6px}
.scroll::before{top:-6px}.scroll::after{bottom:-6px}
#nh-big{writing-mode:vertical-rl;text-orientation:upright;margin:0 auto;font-family:var(--serif);font-weight:700;font-size:clamp(2.3rem,10vw,3.2rem);line-height:1.45;letter-spacing:.06em;display:block;width:max-content;max-width:100%}
[data-target="ja"] #nh-big{font-family:"Noto Serif JP","Noto Sans JP",var(--serif)}
#nh-read{text-align:center;color:var(--stone);margin:20px 0 6px;letter-spacing:.02em}
#nh-parts{list-style:none;margin:10px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:4px 18px;font-size:.95rem}
#nh-parts li{display:flex;justify-content:space-between;gap:10px}
#nh-parts span{color:var(--stone)}
#nh-parts b{font-family:var(--serif)}
.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:22px 0 0}
.actions button{font:inherit;font-size:.95rem;background:transparent;color:var(--jjok);border:1px solid var(--jjok);border-radius:4px;padding:9px 16px;cursor:pointer}
.actions button:hover{background:var(--jjok);color:#fff}
.basis{font-size:.85rem;color:var(--stone);max-width:36em;margin:22px auto 0;text-align:center}

/* 재미용: 뜻이 같은 한국 이름 */
.fun{margin:44px 0 0;padding:26px 0 0;border-top:1px solid var(--line)}
.fun-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fun-head h2{margin:0}
.stamp{display:inline-block;border:1.5px solid var(--inju);color:var(--inju);font-size:.78rem;padding:0 7px;border-radius:3px;transform:rotate(-4deg);font-weight:700}
.seg{display:flex;gap:22px;margin:14px 0 6px}
.seg button{font:inherit;background:none;border:0;padding:4px 0;color:var(--stone);cursor:pointer;border-bottom:2px solid transparent}
.seg button[aria-pressed="true"]{color:var(--meok);border-bottom-color:var(--inju);font-weight:700}
.fun-why{color:var(--stone);margin:6px 0 12px;font-size:.95rem}
.opts{display:grid;border-top:1px solid var(--line)}
.opt{display:grid;grid-template-columns:5.6em 1fr;column-gap:16px;align-items:center;text-align:left;font:inherit;color:var(--meok);background:transparent;border:0;border-bottom:1px solid var(--line);padding:14px 4px;cursor:pointer}
.opt:hover{background:#f3f1ea}
.opt[aria-pressed="true"]{background:var(--paper);box-shadow:inset 3px 0 0 var(--inju)}
.opt-hz{grid-row:span 3;font-family:var(--hanja);font-weight:900;font-size:1.7rem;text-align:center;letter-spacing:.04em}
.opt-ko{font-family:var(--serif);font-weight:700}
.opt-ko small{font-family:var(--sans);font-weight:400;color:var(--stone);margin-left:8px;font-size:.9em}
.opt-mean{font-size:.92rem;color:#5b4a2a}
.opt-luck{font-size:.82rem;color:var(--stone)}
.cert{display:block;width:100%;max-width:420px;margin:24px auto 0;border:1px solid var(--line)}
.fun-note{font-size:.85rem;color:var(--stone);margin:16px 0 0}
#nh-fun-name{font-family:var(--hanja);font-weight:900;font-size:2rem;margin-top:10px}
#nh-fun-sub{color:var(--stone)}#nh-fun-read{font-weight:700}

/* 본문 */
.cross{display:block;margin:34px 0 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--serif);font-weight:700;text-decoration:none}
section{margin:48px 0 0}
h2{font-family:var(--serif);font-weight:700;font-size:1.35rem;line-height:1.4;margin:0 0 12px;color:var(--jjok)}
ol,ul{padding-left:1.3em}li{margin:4px 0}
table{width:100%;border-collapse:collapse;font-size:.97rem}
th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line)}
th{font-weight:700;color:var(--stone);font-size:.88rem}
td.big{font-family:var(--serif);font-weight:700;font-size:1.1rem}
details{border-bottom:1px solid var(--line);padding:12px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;font-weight:700}
details p{margin:8px 0 0;color:#3e3c38}
.names{line-height:2.2}
.names a{white-space:nowrap;margin-right:16px}
.names span{font-family:var(--serif);color:var(--stone);margin-left:4px}

/* 이름별 페이지 */
.crumb{font-size:.88rem;color:#c9cfdf;margin:4px 0 8px}
.crumb a{color:#c9cfdf;margin-left:0!important}
.fun-grid + .cross{margin-top:28px}
.cross + section{margin-top:40px}
.syl{max-width:340px;margin:18px auto 0}
.syl td,.syl th{text-align:center}
.fun-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid var(--line)}
.card{padding:16px 6px;border-bottom:1px solid var(--line)}
.card .who{font-size:.82rem;color:var(--stone)}
.card .fun-name{font-family:var(--hanja);font-weight:900;font-size:1.8rem;line-height:1.3}
.card .fun-sub{color:var(--stone);font-size:.92rem}
.card .fun-mean{color:#5b4a2a;font-size:.92rem}
form.go{display:flex;gap:8px;max-width:520px}
form.go input{flex:1;min-width:0;font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:4px;background:var(--paper)}
form.go button{border:0;background:var(--inju);color:#fff;font:inherit;font-weight:700;padding:0 18px;border-radius:4px;cursor:pointer}

/* 바닥 */
footer.foot{margin:64px 0 0;background:var(--jjok);color:#c9cfdf;font-size:.88rem}
footer.foot .wrap{padding-top:26px;padding-bottom:30px}
footer.foot a{color:#fff;margin-right:18px}
footer.foot p{margin:10px 0 0}
.prose p,.prose li{max-width:38em}
@media (max-width:520px){
  body{font-size:16px}
  #nh-form button{padding:0 16px}
  .top nav a{margin-left:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 첫 화면 */
.home-form{display:flex;background:var(--paper);border-radius:6px;padding:6px;max-width:560px}
.home-form input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1.1rem;padding:10px 12px;color:var(--meok)}
.home-form input:focus{outline:none}
.home-form:focus-within{box-shadow:0 0 0 3px rgba(179,54,44,.45)}
.home-form button{border:0;background:var(--inju);color:#fff;font:inherit;font-weight:700;padding:0 18px;border-radius:4px;cursor:pointer;min-height:46px;white-space:nowrap}
.home-alt{margin:14px 0 0}.home-alt a{color:#c9cfdf}
.pair{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:36px}
.pair-item{display:block;padding:22px 16px 22px 0;text-decoration:none;color:var(--meok);border-bottom:1px solid var(--line)}
.pair-item + .pair-item{padding-left:20px;border-left:1px solid var(--line)}
.pair-big{display:block;font-family:var(--serif);font-weight:700;font-size:2.4rem;line-height:1.2;color:var(--jjok)}
.pair-item[href*="jepang"] .pair-big{font-family:"Noto Serif JP",var(--serif)}
.pair-t{display:block;font-family:var(--serif);font-weight:700;font-size:1.15rem;margin-top:8px}
.pair-d{display:block;color:var(--stone);font-size:.95rem;margin-top:4px}
.pair-item:hover .pair-t{color:var(--inju)}
@media (max-width:520px){.pair{grid-template-columns:1fr}.pair-item + .pair-item{padding-left:0;border-left:0}.home-form button{padding:0 12px}}

/* 고객센터 */
.qna-form{display:grid;gap:14px;max-width:560px}
.qna-form label{display:grid;gap:6px;font-weight:700;font-size:.95rem}
.qna-form input,.qna-form textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--meok)}
.qna-form textarea{resize:vertical}
.qna-form button,.qna-open button{justify-self:start;border:0;background:var(--inju);color:#fff;font:inherit;font-weight:700;padding:10px 20px;border-radius:4px;cursor:pointer}
.qna-form button:disabled{opacity:.6}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.qna-msg{margin:0;font-size:.95rem;color:var(--jjok)}.qna-msg.bad{color:var(--inju)}
.qna-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.qna-list li{border-bottom:1px solid var(--line);margin:0}
.qna-empty{padding:16px 0;color:var(--stone)}
.qna-row{display:grid;grid-template-columns:3.2em 1fr auto;grid-template-areas:"no title state" "no who date";gap:0 12px;width:100%;text-align:left;background:none;border:0;font:inherit;color:var(--meok);padding:12px 2px;cursor:pointer}
.qna-row:hover{background:#f3f1ea}
.qna-no{grid-area:no;color:var(--stone);align-self:center}
.qna-title{grid-area:title;font-weight:700}
.qna-who{grid-area:who;color:var(--stone);font-size:.88rem}
.qna-date{grid-area:date;color:var(--stone);font-size:.88rem;text-align:right}
.qna-state{grid-area:state;font-size:.85rem;color:var(--stone);text-align:right}
.qna-state.done{color:var(--jjok);font-weight:700}
.qna-open{display:grid;gap:10px;padding:4px 2px 16px}
.qna-open label{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.95rem}
.qna-open input{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:4px}
.qna-body h3{font-family:var(--serif);font-size:1rem;margin:10px 0 4px;color:var(--jjok)}
.qna-body p{white-space:pre-wrap;margin:0;background:var(--paper);border-left:3px solid var(--line);padding:10px 12px}
.qna-body p.a{border-left-color:var(--inju)}

/* 일본어판 */
html[lang="ja"] body{font-family:"Gowun Dodum","Noto Sans JP",system-ui,sans-serif}
html[lang="ja"] h1,html[lang="ja"] h2{font-family:"Noto Serif JP","Gowun Batang",serif}
.ja-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;max-width:640px}
.ja-form label{display:grid;gap:6px;color:#c9cfdf;font-size:.88rem}
.ja-form input{font:inherit;font-size:1.05rem;padding:11px 12px;border:0;border-radius:6px;background:var(--paper);color:var(--meok);min-width:0}
.ja-form input:focus{outline:3px solid rgba(179,54,44,.45)}
.ja-form button{border:0;background:var(--inju);color:#fff;font:inherit;font-weight:700;padding:0 18px;border-radius:6px;cursor:pointer;min-height:46px;white-space:nowrap}
.kanji-ko{margin:40px 0 0;padding:26px 0 0;border-top:1px solid var(--line)}
.kanji-read{font-family:var(--serif);font-weight:700;font-size:2rem;margin:4px 0 10px;color:var(--jjok)}
@media (max-width:620px){.ja-form{grid-template-columns:1fr}.ja-form button{justify-self:start;padding:0 22px}}
#nh-form.ja-form{background:none;padding:0;border-radius:0}
#nh-form.ja-form:focus-within{box-shadow:none}
#nh-form.ja-form{display:grid;grid-template-columns:1fr 1fr auto}
#nh-form.ja-form input{background:var(--paper);padding:11px 12px;border-radius:6px;font-size:1.05rem;width:100%}
@media (max-width:620px){#nh-form.ja-form{grid-template-columns:1fr}}
.fun-main{margin-top:0;border-top:0;padding-top:0}
.translit{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.translit .scroll{margin-top:22px}
.basis-l{font-size:.9rem;color:var(--stone);margin:0 0 6px}
/* 생년월일 */
.bd-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap;max-width:560px}
.bd-form label{display:grid;gap:6px;color:#c9cfdf;font-size:.9rem}
.bd-form input{font:inherit;font-size:1.1rem;padding:10px 12px;border:0;border-radius:6px;background:var(--paper);color:var(--meok)}
.bd-form button{border:0;background:var(--inju);color:#fff;font:inherit;font-weight:700;padding:0 20px;border-radius:6px;cursor:pointer;min-height:46px}
.seg-top{margin:26px 0 0}
.top nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 0}
.brand{white-space:nowrap}.top nav a{font-size:.9rem}
.top nav.crumb{justify-content:flex-start;gap:0 4px}.top nav.crumb a{margin-left:0}
.pair3{grid-template-columns:repeat(3,1fr)}.pair3 .pair-item + .pair-item{padding-left:20px;border-left:1px solid var(--line)}@media (max-width:720px){.pair3{grid-template-columns:1fr}.pair3 .pair-item + .pair-item{padding-left:0;border-left:0}}
/* 이름 목록 */
.az{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px}
.top nav.az{justify-content:flex-start;gap:6px}
.top nav.az a{margin-left:0;color:#fff;font-family:var(--serif);font-weight:700;min-width:2.2em;padding:6px 0;text-align:center;border:1px solid rgba(255,255,255,.25);border-radius:3px}
.top nav.az a:hover{background:rgba(255,255,255,.08)}
.az-group{scroll-margin-top:12px}
.az-group{margin-top:28px}.az-group h3{font-family:var(--serif);color:var(--jjok);margin:0 0 4px;font-size:1.2rem;border-bottom:1px solid var(--line)}
.az-sec{margin-top:40px}
.all-link{display:inline-block;margin-left:4px;font-weight:700;white-space:nowrap}

/* 이름 페이지: 한국어로 써 보기 */
.extra table.syl{max-width:none;width:100%}
.extra td{word-break:keep-all}
.extra table.phr td{text-align:left;padding-right:10px}
.extra table.phr td:first-child{font-family:var(--serif);font-size:1.05rem}
.kbrow{display:flex;flex-wrap:wrap;gap:10px 18px}
.kb{display:inline-flex;align-items:center;gap:4px}
.kb>span{font-family:var(--serif);font-size:1.2rem;margin-right:4px}
kbd{font-family:ui-monospace,Consolas,monospace;font-size:.9rem;min-width:1.7em;text-align:center;padding:2px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--paper)}
.guide-links{padding-left:1.1em;margin:0}.guide-links li{margin:4px 0}
/* 해설 글 */
.guide-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.guide-list a{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:inherit;background:var(--paper)}
.guide-list a span{color:var(--stone);font-size:.92rem}
.guide section{margin-top:28px}
.guide span[lang="ko"],.extra td span[lang="ko"]{white-space:nowrap}