/* =====================================================================
   XmasFantasy / XmasFantasy - Animated web manga studio STUDIO (cathedral theme)
   Ivory beige × Crimson vestments × Gold sacred vessels × A cross.
   A whitish, sacred workshop matched to the palette of the original site's style.css.
   1/2/4Splits are switched via CSS Grid with data-layout.
   ===================================================================== */
:root{
  --bg:#f9f9f9;          /* A workshop floor slightly darker than parchment */
  --panel:#ffffff;       /* Ivory (light) = pane surface */
  --panel-2:#f5ecdc;     /* Ivory = header etc. */
  --line:#e5e5e5;        /* A pale golden-brown rule */
  --ink:#0f0f0f;         /* Ebony = text */
  --muted:#606060;       /* Auxiliary text */
  --crimson:#0f0f0f;     /* Crimson (vestments) */
  --crimson-lt:#0f0f0f;  /* Bright crimson */
  --crimson-deep:#333333;
  --gold:#e5e5e5;        /* Gold (sacred vessels) */
  --gold-deep:#9c7d18;   /* For gold text on light surfaces */
  --gold-lt:#e5e5e5;
  --ok:#2f8a63;
  --paper:#ffffff;       /* Drawing paper */
  --bar-h:48px;
  --foot-h:36px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
.studio-body{
  margin:0; background:var(--bg);
  background-image:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(231,207,142,.45), transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 110%, rgba(138,21,56,.06), transparent 70%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"MS PGothic",sans-serif;
  font-size:13px; line-height:1.5; -webkit-text-size-adjust:100%;
  display:flex; flex-direction:column; overflow:hidden;
}
.mono{font-family:"Courier New",monospace;}

/* ---------- Top toolbar ---------- */
.studio-bar{
  height:var(--bar-h); flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:0 10px; flex-wrap:nowrap; overflow-x:auto;
  background:linear-gradient(180deg,#fffdf8,#f3e9d8);
  border-bottom:2px solid var(--gold); box-shadow:0 1px 0 rgba(138,21,56,.12);
}
.bar-left,.bar-right{display:flex; align-items:center; gap:7px; white-space:nowrap;}
.bar-center{display:flex; gap:4px;}
.brand{
  color:var(--crimson); font-weight:700; letter-spacing:.06em; white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.brand::before{content:"+ "; color:var(--gold-deep);}
.proj-select,.pane-tool{
  background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:6px; padding:4px 8px; font-size:12px; max-width:200px;
}
.tb{
  background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:6px; padding:5px 10px; font-size:12px; cursor:pointer;
  text-decoration:none; white-space:nowrap; transition:.15s;
}
.tb:hover{border-color:var(--gold); color:var(--crimson);}
.tb-accent{background:linear-gradient(180deg,var(--crimson-lt),var(--crimson)); border-color:var(--crimson-deep); color:#fff;}
.tb-accent:hover{filter:brightness(1.07); color:#fff;}
.tb.tiny{padding:3px 8px; font-size:11px;}
.save-state{font-size:11px; color:var(--muted); min-width:60px;}
.save-state.saving{color:var(--gold-deep);}
.save-state.saved{color:var(--ok);}

/* Split toggle buttons */
.layout-btn{
  background:#fff; color:var(--muted); border:1px solid var(--line);
  border-radius:6px; width:42px; height:30px; cursor:pointer; font-size:12px; letter-spacing:-2px;
}
.layout-btn:hover{color:var(--crimson); border-color:var(--gold);}
.layout-btn.is-active{color:#fff; border-color:var(--crimson-deep); background:linear-gradient(180deg,var(--crimson-lt),var(--crimson));}

/* ---------- Workspace (4-pane Grid) ---------- */
.workspace{flex:1 1 auto; min-height:0; padding:6px; gap:6px; display:grid;}
.workspace[data-layout="single"]{grid-template-columns:1fr; grid-template-rows:1fr;}
.workspace[data-layout="single"] .pane[data-pane="B"],
.workspace[data-layout="single"] .pane[data-pane="C"],
.workspace[data-layout="single"] .pane[data-pane="D"]{display:none;}
.workspace[data-layout="dual"]{grid-template-columns:1fr 1fr; grid-template-rows:1fr;}
.workspace[data-layout="dual"] .pane[data-pane="C"],
.workspace[data-layout="dual"] .pane[data-pane="D"]{display:none;}
.workspace[data-layout="quad"]{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;}

.pane{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.pane:focus-within{border-color:var(--gold);}
.pane-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:5px 8px; background:var(--panel-2); border-bottom:1px solid var(--line);
}
.pane-tag{font:700 11px/1 "Courier New",monospace; color:#fff; background:var(--crimson); border-radius:4px; padding:3px 6px;}
.pane-body{flex:1 1 auto; min-height:0; position:relative; overflow:auto;}

.placeholder{
  height:100%; display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--muted); padding:20px; font-size:12px;
  background:repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(138,21,56,.03) 12px,rgba(138,21,56,.03) 24px);
}

/* ---------- Bottom status ---------- */
.studio-foot{
  height:var(--foot-h); flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:0 12px;
  background:#f3e9d8; border-top:1px solid var(--line); font-size:11px; color:var(--muted);
}
.foot-sep{color:var(--line);}
.hint{margin-left:auto;}

/* ---------- Mobile: stacked vertically ---------- */
@media (max-width:720px){
  .workspace[data-layout="quad"],
  .workspace[data-layout="dual"]{grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:minmax(240px,1fr);}
  .workspace[data-layout="dual"] .pane[data-pane="C"],
  .workspace[data-layout="dual"] .pane[data-pane="D"],
  .workspace[data-layout="single"] .pane:not([data-pane="A"]){display:none;}
}

/* ===================================================================
   Finishing: refinement (elegant) layer
   =================================================================== */
.studio-bar{
  box-shadow:inset 0 2px 0 rgba(201,162,39,.5), 0 1px 0 rgba(138,21,56,.12), 0 2px 10px rgba(0,0,0,.06);
  position:relative;
}
.brand{
  background:linear-gradient(92deg,var(--crimson) 0%,var(--crimson-lt) 45%,var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none; font-weight:800;
}
.brand::before{ -webkit-text-fill-color:var(--gold-deep); }
.tb, .layout-btn, .proj-select, .pane-tool{ box-shadow:0 1px 0 rgba(255,255,255,.6); }
.tb:hover{ box-shadow:0 2px 8px rgba(201,162,39,.22); }
.tb-accent{ box-shadow:0 2px 10px rgba(138,21,56,.28); }

.pane{
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.06);
  border-color:#e4d8c0;
}
.pane:focus-within{ box-shadow:0 0 0 1.5px var(--gold), 0 8px 22px rgba(138,21,56,.10); }
.pane-head{ background:linear-gradient(180deg,#fffdf9,#f3e9d8); }
.pane-tag{ box-shadow:0 1px 3px rgba(138,21,56,.3); letter-spacing:.04em; }

/* Soft scrollbars */
.pane-body::-webkit-scrollbar,
.workspace ::-webkit-scrollbar{ width:9px; height:9px; }
.pane-body::-webkit-scrollbar-thumb,
.workspace ::-webkit-scrollbar-thumb{ background:#e0d2b6; border-radius:6px; border:2px solid transparent; background-clip:content-box; }
.pane-body::-webkit-scrollbar-thumb:hover,
.workspace ::-webkit-scrollbar-thumb:hover{ background:var(--gold); background-clip:content-box; }

.studio-foot{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }