/* 김옥자AI — 자개(나전칠기) 스타일: 옻칠 검정 + 자개 조각 + 금테 */
:root{
  --bg:#070608; --lac:#100d12; --lac2:#18141b; --line:#2a2430;
  --ink:#f4eee6; --mute:#a99f95; --gold:#d6b46c; --gold2:#7d6130;
  --nacre:url(/img/nacre.jpg);
  --crane:url(/img/th/A_crane.png); --tile:url(/img/ai_tile2.png?v=1);
  --lacq:linear-gradient(160deg,#1c171f 0%,#0e0b10 55%,#141016 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:16px/1.65 "Gowun Dodum",system-ui,sans-serif;min-height:100vh;position:relative;overflow-x:hidden;
  background-image:radial-gradient(900px 420px at 50% -80px,#251c2b 0%,transparent 70%),
    radial-gradient(600px 600px at 50% 120%,#1a1320 0%,transparent 70%),var(--tile);
  background-size:auto,auto,440px}
/* 학 장식: 왼쪽 위 + 오른쪽 위(뒤집기) */
body:before,body:after{content:"";position:absolute;top:0;width:min(46vw,300px);aspect-ratio:440/414;
  background:var(--crane) top left/contain no-repeat;opacity:.5;pointer-events:none;z-index:0}
body:before{left:0}
body:after{right:0;transform:scaleX(-1)}
a{color:inherit;text-decoration:none}
.wrap{max-width:480px;margin:0 auto;padding:28px 16px 56px;position:relative;z-index:1}

/* 자개 글씨 */
.nacre-text,.sec h2,.ep h1,.tag{background:var(--nacre) center/260px;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 .5px #d6b46caa)}
/* 자개 띠 */
.band{height:34px;margin:18px auto 0;background:url(/img/band.png) center/contain no-repeat;opacity:.95}

.hero{text-align:center}
.face{width:116px;height:116px;border-radius:50%;object-fit:cover;padding:4px;
  background:var(--nacre) center/180px;box-shadow:0 0 0 1.5px var(--gold),0 0 0 6px #070608,0 0 0 7px var(--gold2),0 12px 34px #000c}
.logo{display:block;width:80%;max-width:350px;margin:16px auto 6px;filter:drop-shadow(0 4px 14px #000)}
.tag{font-family:"Gowun Batang",serif;font-size:21px;font-weight:700;letter-spacing:.06em;display:inline-block}
.bio{color:var(--mute);font-size:14.5px;margin-top:4px}
.sec{margin-top:30px}
.sec h2{font-family:"Gowun Batang",serif;font-size:18px;margin:0 0 10px 2px;font-weight:700;display:inline-block}
.sec h2:before{content:"❀ ";-webkit-text-fill-color:var(--gold);color:var(--gold)}

/* 카드: 옻칠 판 + 자개 테두리 + 금 외곽선 */
.btn{display:flex;align-items:center;gap:12px;width:100%;padding:15px 16px;border-radius:14px;margin-top:11px;
  border:2px solid transparent;background:var(--lacq) padding-box,var(--nacre) border-box;background-size:auto,220px;
  box-shadow:0 0 0 1px var(--gold2),0 6px 18px #0009;font-size:16px;cursor:pointer;color:var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--gold),0 0 22px #b9e3ff40,0 0 34px #f3c6e030,0 8px 22px #000b}
.btn .em{font-size:20px;width:26px;text-align:center;flex:none}
.btn .t{flex:1;min-width:0}
.btn .t small{display:block;color:var(--mute);font-size:13px;line-height:1.4}
.btn .ar{color:var(--gold);flex:none}
/* 자개 판 버튼 */
.btn.pearl{background:linear-gradient(90deg,#ffffffb0 0%,#ffffff70 60%,#ffffff30 100%) padding-box,var(--nacre) padding-box,linear-gradient(var(--gold),var(--gold2)) border-box;
  background-size:auto,240px,auto;color:#1d171f;font-weight:700;border-width:1.5px;box-shadow:0 0 0 1px #000,0 8px 26px #e9dcef22}
.btn.pearl .t{text-shadow:0 0 6px #fff,0 0 2px #fff}
.btn.pearl .t small{color:#2e252e;font-weight:700}
.btn.pearl .ar{color:#3d333d}
.btn.pearl .em{filter:drop-shadow(0 0 3px #fff)}

.find{display:flex;gap:8px;margin-top:11px}
.find input{flex:1;min-width:0;color:var(--ink);padding:13px 14px;font:inherit;border-radius:12px;
  border:1.5px solid transparent;background:var(--lacq) padding-box,var(--nacre) border-box;background-size:auto,200px}
.find input::placeholder{color:#857b72}
.find input:focus{outline:none;box-shadow:0 0 0 1px var(--gold)}
.find button{border:1.5px solid var(--gold);border-radius:12px;padding:0 16px;font:inherit;font-weight:700;cursor:pointer;color:#1d171f;
  background:linear-gradient(#ffffff40,#ffffff10),var(--nacre) center/180px;text-shadow:0 0 5px #fff}
.msg{color:var(--mute);font-size:14px;margin-top:2px;min-height:1em}

.ep-card{padding:10px 14px 10px 10px}
.ep-card .th{width:60px;height:80px;flex:none;border-radius:9px;object-fit:cover;border:1px solid var(--gold2);background:var(--lac2)}

/* SNS: 아이콘 모양을 자개로 채우고 금빛 테 */
.sns{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:16px}
.sns a{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;padding:7px 13px 7px 10px;border-radius:99px;color:#d8cfc4;
  border:1.5px solid transparent;background:var(--lacq) padding-box,var(--nacre) border-box;background-size:auto,160px}
.sns a:hover{color:#fff;box-shadow:0 0 0 1px var(--gold)}
.sns .icw{display:inline-flex;filter:drop-shadow(0 0 .6px var(--gold)) drop-shadow(0 0 .6px var(--gold))}
.sns .ic{width:19px;height:19px;flex:none;background:var(--nacre) center/70px;
  -webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.foot{text-align:center;color:#8a8077;text-shadow:0 0 6px #000,0 0 3px #000;font-size:12px;margin-top:22px;line-height:1.6}
.foot a{text-decoration:underline}

/* 편 페이지 */
.back{color:var(--gold);font-size:14px}
.ep h1{font-family:"Gowun Batang",serif;font-size:25px;line-height:1.35;margin:14px 0 6px;font-weight:700}
.meta{color:var(--mute);font-size:13.5px}
.say{display:flex;gap:12px;align-items:flex-start;margin-top:18px}
.say img{width:48px;height:48px;border-radius:50%;object-fit:cover;padding:2px;background:var(--nacre) center/90px;flex:none}
.say p{border-radius:4px 14px 14px 14px;padding:11px 14px;font-size:15.5px;
  border:1.5px solid transparent;background:var(--lacq) padding-box,var(--nacre) border-box;background-size:auto,200px}
ol.steps{margin:6px 0 0 0;padding:0;list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding:10px 0 10px 42px;border-bottom:1px dashed #3a3140}
ol.steps li:before{content:counter(s);position:absolute;left:0;top:8px;width:29px;height:29px;border-radius:50%;
  background:linear-gradient(#ffffff40,#ffffff10),var(--nacre) center/90px;box-shadow:0 0 0 1px var(--gold);
  color:#1d171f;font-weight:700;font-size:14px;display:grid;place-items:center;text-shadow:0 0 4px #fff}
.prompt{border-radius:14px;margin-top:12px;overflow:hidden;
  border:2px solid transparent;background:var(--lacq) padding-box,var(--nacre) border-box;background-size:auto,220px;box-shadow:0 0 0 1px var(--gold2)}
.prompt .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px 10px 14px;
  border-bottom:1px solid #3a3140;font-size:14px;color:var(--gold)}
.prompt pre{white-space:pre-wrap;word-break:break-word;padding:14px;font:14px/1.6 ui-monospace,Consolas,monospace;color:#efe7dc}
.copy{border:1.5px solid var(--gold);border-radius:9px;padding:6px 13px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;flex:none;
  color:#1d171f;background:linear-gradient(#ffffff40,#ffffff10),var(--nacre) center/140px;text-shadow:0 0 5px #fff}
.copy.ok{background:#8fd3b8}
.tip{margin-top:16px;padding:12px 14px;border-left:3px solid var(--gold);background:#16121a;border-radius:0 10px 10px 0;color:#d9d0c4;font-size:14.5px}
.soon{opacity:.55;pointer-events:none}
body.ep-page:before,body.ep-page:after{opacity:.2}
.new{display:inline-block;font:700 10.5px/1 ui-monospace,Consolas,monospace;letter-spacing:.08em;color:#0b0a0d;padding:3px 6px;border-radius:5px;margin-right:7px;vertical-align:2px;
  background:linear-gradient(#ffffff50,#ffffff20),var(--nacre) center/80px;box-shadow:0 0 0 1px var(--gold),0 0 10px #bfe8ff66}
.letter{border-radius:16px;padding:16px;border:2px solid transparent;background:var(--lacq) padding-box,var(--nacre) border-box;background-size:auto,220px;box-shadow:0 0 0 1px var(--gold2)}
.lt-h{font-family:"Gowun Batang",serif;font-weight:700;font-size:18px}
.lt-s{color:var(--mute);font-size:14px;margin-top:2px}
.agree{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;color:var(--mute);margin-top:9px;line-height:1.45}
.agree input{margin-top:2px;accent-color:#d6b46c}
.agree a{text-decoration:underline}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* AI·IT 느낌: 터미널 줄·모노 글씨·홀로그램 빛 */
:root{--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;--holo:linear-gradient(90deg,#bfe8ff,#f4c8e4,#c9f2e2,#bfe8ff)}
.term{font:500 12.5px/1 var(--mono);color:#cfe9f3;margin:10px auto 0;display:flex;width:max-content;align-items:center;gap:6px;
  padding:6px 11px;border-radius:7px;background:#0d0b10cc;border:1px solid #3a3140;box-shadow:inset 0 0 12px #9fd8ff14}
.term span{background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.caret{display:inline-block;width:7px;height:13px;background:#cfe9f3;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.kick{font:12px/1.4 var(--mono);color:#8fb7c6;margin:-4px 0 4px 2px}
.btn .t small,.meta{font-feature-settings:"tnum"}
.prompt .hd span:before{content:"● ● ●  ";letter-spacing:-1px;font-size:9px;vertical-align:2px;
  background:linear-gradient(90deg,#f3a7a7 0 33%,#f5d79a 33% 66%,#a9e3c3 66%);-webkit-background-clip:text;background-clip:text;color:transparent}
.prompt pre{font-family:var(--mono)}
.prompt pre:before{content:"$ ";color:#8fb7c6}
ol.steps li:before{font-family:var(--mono)}
.sec h2{position:relative}
.ep-card .th{box-shadow:0 0 0 1px #000,0 0 12px #9fd8ff22}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}
[data-theme=A]{--crane:url(/img/th/A_crane.png);--tile:url(/img/th/A_tile.png)}
[data-theme=B]{--crane:url(/img/th/B_crane.png);--tile:url(/img/th/B_tile.png)}
[data-theme=C]{--crane:url(/img/th/C_crane.png);--tile:url(/img/th/C_tile.png)}
[data-theme=D]{--crane:url(/img/th/D_crane.png);--tile:url(/img/th/D_tile.png)}
[data-theme=E]{--crane:url(/img/th/E_crane.png);--tile:url(/img/th/E_tile.png)}