:root{
  --paper:#e6e5dd;
  --card:#f3f2ed;
  --ink:#242a2c;
  --ink-soft:#6d716c;
  --line:#c8c5b9;
  --plum:#7c3a4e;
  --plum-soft:#a9697c;
  --serif:'Gowun Batang', serif;
  --sans:'Pretendard', system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--plum);outline-offset:2px
}

/* ---------- 인트로 ---------- */
.intro{
  min-height:100dvh;display:grid;place-items:center;text-align:center;
}
.intro a{display:block;padding:2rem}
.intro img{max-width:min(320px,60vw);height:auto;display:block;margin:0 auto}
.intro .mark{
  font-family:var(--serif);font-size:clamp(2.4rem,8vw,4.2rem);
  line-height:1.2;letter-spacing:-.01em;
}
.intro .enter{
  margin-top:1.4rem;font-size:.82rem;color:var(--ink-soft);letter-spacing:.18em;
}

/* ---------- 뼈대 ---------- */
.shell{display:flex;min-height:100dvh;align-items:stretch}
.side{
  width:190px;flex:none;padding:2.2rem 1.4rem;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:2rem;
}
.brand{font-family:var(--serif);font-size:1.35rem;line-height:1.3}
.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.menu a{
  display:block;padding:.3rem 0;color:var(--ink-soft);
  border-bottom:1px solid transparent;
}
.menu a:hover{color:var(--ink)}
.menu a.on{color:var(--plum);border-bottom-color:var(--plum)}
.who{
  margin-top:auto;font-size:.8rem;color:var(--ink-soft);
  display:flex;flex-direction:column;gap:.25rem;
}
.who a:hover{color:var(--plum)}
.stage{flex:1;padding:2.4rem 2.6rem 4rem;max-width:1100px}
.center{
  min-height:100dvh;display:grid;place-items:center;padding:2rem 1.2rem;
}

/* ---------- 글자 ---------- */
h1{font-family:var(--serif);font-size:1.9rem;font-weight:700;margin:0 0 1.4rem}
h2{font-family:var(--serif);font-size:1.25rem;margin:0 0 .7rem}
p{margin:0 0 .9rem;max-width:68ch}
.quiet{color:var(--ink-soft);font-size:.88rem}

/* ---------- 카드 / 폼 ---------- */
.panel{
  background:var(--card);border:1px solid var(--line);
  padding:1.6rem;border-radius:2px;
}
.formbox{width:min(360px,100%)}
.formbox h1{margin-bottom:.4rem}
.formbox .lead{color:var(--ink-soft);font-size:.9rem;margin-bottom:1.6rem}
label{display:block;font-size:.85rem;margin:0 0 .3rem;color:var(--ink-soft)}
input[type=text],input[type=password],textarea,select{
  width:100%;padding:.55rem .7rem;font:inherit;font-size:.95rem;
  background:#fff;border:1px solid var(--line);border-radius:2px;color:var(--ink);
}
.field{margin-bottom:1rem}
button,.btn{
  font:inherit;font-size:.95rem;cursor:pointer;
  padding:.55rem 1.2rem;border-radius:2px;
  background:var(--plum);color:#fff;border:1px solid var(--plum);
}
button:hover,.btn:hover{background:var(--plum-soft);border-color:var(--plum-soft)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-quiet:hover{background:#fff;border-color:var(--ink-soft);color:var(--ink)}
.formfoot{margin-top:1.2rem;font-size:.85rem;color:var(--ink-soft)}
.formfoot a{color:var(--plum);border-bottom:1px solid var(--line)}

.flash{
  padding:.6rem .9rem;border-left:3px solid var(--plum);
  background:var(--card);font-size:.9rem;margin:0 0 1.2rem;
}
.flash.error{border-left-color:#8a3123}
.flash.ok{border-left-color:#3f6b52}

/* ---------- 메인 위젯 ---------- */
.widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem}
.widget{background:var(--card);border:1px solid var(--line);padding:1.1rem;min-height:130px}
.widget h2{font-size:1rem;margin-bottom:.5rem}
.dday{font-family:var(--serif);font-size:2rem;line-height:1.1;color:var(--plum)}

.slide{
  background:var(--card);border:1px solid var(--line);
  aspect-ratio:16/6;display:grid;place-items:center;color:var(--ink-soft);font-size:.9rem;
}

/* ---------- 표 ---------- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line)}
th{color:var(--ink-soft);font-weight:500}
code{font-family:ui-monospace,monospace;background:#fff;padding:.1rem .3rem;border:1px solid var(--line)}

/* ---------- 모바일 ---------- */
@media (max-width:760px){
  .shell{flex-direction:column}
  .side{
    width:auto;flex-direction:row;align-items:center;gap:1rem;
    padding:1rem 1.2rem;border-right:0;border-bottom:1px solid var(--line);
    flex-wrap:wrap;
  }
  .menu{flex-direction:row;gap:.9rem}
  .menu a{border-bottom:0}
  .menu a.on{border-bottom:1px solid var(--plum)}
  .who{margin-top:0;flex-direction:row;gap:.7rem;width:100%}
  .stage{padding:1.6rem 1.2rem 3rem}
  .widgets{grid-template-columns:1fr}
}

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

/* ============ 관리자 화면에서 바꾸는 값들 ============ */
:root{--radius:2px;--stage-w:1100px;--menu-img-w:110px}

.stage{max-width:var(--stage-w)}
.panel,.widget,.slide,.flash,input[type=text],input[type=password],
textarea,select,button,.btn{border-radius:var(--radius)}

/* 메뉴를 위쪽 가로로 */
body.menu-top .shell{flex-direction:column}
body.menu-top .side{
  width:auto;flex-direction:row;align-items:center;gap:1.4rem;flex-wrap:wrap;
  padding:1.1rem 2rem;border-right:0;border-bottom:1px solid var(--line);
}
body.menu-top .menu{flex-direction:row;gap:1.1rem}
body.menu-top .menu a{border-bottom:0}
body.menu-top .menu a.on{border-bottom:1px solid var(--plum)}
body.menu-top .who{margin-top:0;margin-left:auto;flex-direction:row;gap:.8rem;width:auto}
body.menu-top .stage{margin:0 auto;width:100%}

/* 그림 메뉴 */
.side.imgmenu .menu{gap:.4rem}
.side.imgmenu .menu a{padding:0;border-bottom:0}
.side.imgmenu .menu a img{
  display:block;width:var(--menu-img-w);height:auto;
}
.side.imgmenu .menu a.on img{outline:1px solid var(--plum);outline-offset:2px}

/* 꾸미기 화면 */
.colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.9rem}
.colorpick label{margin-bottom:.25rem}
input[type=color]{
  width:100%;height:38px;padding:2px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;
}
input[type=range]{width:100%}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1.2rem}
label.inline{
  display:inline-flex;align-items:center;gap:.35rem;
  margin-right:1rem;color:var(--ink);font-size:.92rem;
}
.menupics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem}
.menupics .panel{padding:1rem}
.menupics input[type=file]{font-size:.82rem;max-width:100%}
table input[type=text]{padding:.35rem .5rem;font-size:.88rem}

/* ============ 캐릭터 ============ */
.chead{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap}
.chead h1{margin-bottom:.6rem}
.tabs{display:flex;gap:.9rem;font-size:.95rem}
.tabs a{color:var(--ink-soft);padding-bottom:.15rem;border-bottom:1px solid transparent}
.tabs a.on{color:var(--plum);border-bottom-color:var(--plum)}
.toolrow{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:0 0 1.6rem}
.tiny{font-size:.75rem;color:var(--ink-soft);font-family:var(--sans);font-weight:400;margin-left:.5rem}
.gsec{margin-bottom:2.2rem}

.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.9rem}
.ccard{
  display:block;position:relative;aspect-ratio:3/4;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
}
.ccard .cthumb{position:absolute;inset:0;background-size:cover;background-position:center top}
.ccard .cname{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .6rem .55rem;
  color:#fff;line-height:1.35;font-size:.9rem;
  background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.55) 45%,transparent);
}
.ccard .cname b{font-family:var(--serif);font-weight:700;display:inline}
.ccard .cname i{font-style:normal;font-size:.78rem;opacity:.8}
.ccard .cname em{display:block;font-style:normal;font-size:.72rem;opacity:.75;margin-top:.1rem}
body.reorder .ccard{cursor:grab;outline:1px dashed var(--plum);outline-offset:2px}
.ccard.dragging{opacity:.4}

.pgrid{display:grid;gap:1rem}
.pcard{
  display:block;position:relative;aspect-ratio:16/7;overflow:hidden;
  background-size:cover;background-position:center;background-color:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);
}
.pcard .pname,.pbanner .pname{
  position:absolute;left:0;right:0;bottom:0;padding:2rem 1rem .8rem;color:#fff;
  font-family:var(--serif);font-size:1.15rem;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
}
.pcard .pname em{display:block;font-style:normal;font-size:.8rem;font-family:var(--sans);opacity:.8}
.pbanner{
  position:relative;aspect-ratio:16/6;background-size:cover;background-position:center;
  border-radius:var(--radius);margin-bottom:1rem;
}

/* 프로필 */
.profile{padding:1.4rem 0;border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.profile:not(.plain){padding:1.4rem}
.profile.plain{padding:0}
.ptop{display:flex;gap:1.4rem;align-items:flex-start;flex-wrap:wrap}
.pbody{flex:0 0 210px;max-width:210px}
.pbody img{width:100%;height:auto;display:block}
.phead{flex:1;min-width:230px;display:flex;gap:1rem;align-items:flex-start}
.pface{
  width:110px;height:130px;flex:none;background:var(--card);
  border:1px solid var(--line);background-size:cover;background-position:center top;
}
.pnames h1{margin:0 0 .2rem}
.pnames .en{margin:0;color:var(--ink-soft);font-size:.9rem}
.pnames .au{margin:.2rem 0 .4rem;color:var(--plum);font-size:.85rem}
.gtags{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0 0}
.gtags a{font-size:.78rem;padding:.15rem .5rem;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft)}
.pfield{margin-top:1.8rem}
.pfield h2{border-bottom:1px dashed var(--line);padding-bottom:.3rem}
.prose{max-width:70ch}
.prose img{max-width:100%;height:auto}
.spoiler{background:var(--ink);color:transparent;border-radius:2px;cursor:pointer}
.spoiler.open{background:transparent;color:inherit}
.pimgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.pimgs figure{margin:0}
.pimgs img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.pimgs figcaption{font-size:.8rem;color:var(--ink-soft);margin-top:.2rem}
.pimgs.small img{max-height:110px;object-fit:cover}
.delpic span{font-size:.78rem;color:var(--ink-soft);display:block;margin-top:.2rem}
.pfoot{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:2rem;
  border-top:1px solid var(--line);padding-top:1rem}
.pfoot .code{margin-left:auto;font-size:.75rem}

/* 편집기 */
.fitem{border-top:1px solid var(--line);padding-top:.9rem;margin-top:.9rem}
.fitem:first-child{border-top:0;padding-top:0;margin-top:0}
.flabel{max-width:200px;margin-bottom:.4rem}
.editor{border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.edbar{display:flex;gap:.2rem;flex-wrap:wrap;padding:.35rem;border-bottom:1px solid var(--line)}
.edbar button{
  background:transparent;border:1px solid transparent;color:var(--ink);
  padding:.2rem .45rem;font-size:.85rem;border-radius:2px;
}
.edbar button:hover{background:var(--card);border-color:var(--line)}
.edcolor{display:inline-flex;align-items:center;gap:.2rem;font-size:.8rem;color:var(--ink-soft);margin:0 .2rem}
.edcolor input[type=color]{width:26px;height:24px;padding:1px}
.edbody{padding:.6rem .7rem;outline:none;color:#242a2c}
.edbody .spoiler{background:#242a2c;color:#242a2c}
@media (max-width:760px){
  .pbody{flex:0 0 100%;max-width:none}
  .cgrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}
.imgfield .imgprev{max-width:130px;display:block;margin-bottom:.4rem;border:1px solid var(--line)}
.imgfield input[type=text]{margin-top:.4rem;font-size:.85rem}
.dangerbox{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.dangerbox h2{font-size:1rem;margin-bottom:.3rem}

/* 페어 마주보기 화면 */
.facing{display:flex;gap:1.5rem;align-items:flex-end;justify-content:center;margin:1.5rem 0}
.fside{flex:1;max-width:300px;display:flex;flex-direction:column;align-items:center;text-align:center}
.fside.right{align-items:center}
.fpic{display:block;width:100%}
.fpic img{width:100%;height:auto;display:block}
.fpic img.flipped{transform:scaleX(-1)}
.fpic .nopic{
  display:grid;place-items:center;aspect-ratio:3/4;background:var(--card);
  border:1px dashed var(--line);color:var(--ink-soft);font-size:.85rem;
}
.fname{margin-top:.7rem}
.fname h2{margin:0 0 .1rem;font-size:1.3rem}
.fname .en{margin:0;font-size:.85rem;color:var(--ink-soft)}
.fname .au{margin:.1rem 0 .3rem;font-size:.8rem;color:var(--plum)}
.flipform{margin-top:.4rem}
.flipform button{font-size:.78rem;padding:.25rem .7rem}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1rem}
.fcol .pfield{margin-top:1.2rem}
@media (max-width:760px){
  .facing{flex-direction:column;align-items:center;gap:2rem}
  .fside{max-width:240px}
  .fcols{grid-template-columns:1fr;gap:0}
}