@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@700&family=Nanum+Pen+Script&display=swap');

:root{
  --frame:#1e4aa8;
  --chrome-hi:#5a8ae8;
  --chrome:#2f62c8;
  --chrome-dk:#1e4aa8;
  --body-bg:#b8cdf2;
  --panel:#ccdcf6;
  --panel-lt:#e4edfb;
  --ink:#16295e;
  --ink-soft:#3d5490;
  --red:#c23b2e;
  --gold:#c99a2e;
  --white:#f2f6fc;
  --mint:#9bd681;
  --sky:#82b8ec;
  --paper:#fffdf4;
  --pink:#ffc6da;
  --aqua:#8de7df;
  --line:#9bd0ff;
}
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;}
body{
  font-family:"Courier New",monospace;
  color:var(--ink);
  background:
    radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 1px 12px),
    linear-gradient(180deg,#78a8df 0 54%,#8ab7e7 54% 66%,#6aa84c 66% 100%);
  background-size:12px 12px,auto;
  image-rendering:pixelated;
}
body.custom-cursor,
body.custom-cursor *{cursor:none !important;}
[data-admin-only][hidden]{
  display:none !important;
}
button,
input,
textarea{
  font-family:inherit;
}
button{
  appearance:none;
  -webkit-appearance:none;
  min-height:30px;
  border:3px solid var(--frame);
  background:linear-gradient(180deg,#f8fbff 0%,#dce8fb 100%);
  color:var(--ink);
  font-size:13px;
  box-shadow:inset 2px 2px 0 #fff,2px 2px 0 rgba(10,22,52,.18);
}
button:active{transform:translate(1px,1px);}
button:disabled{
  color:#8190ad;
  filter:grayscale(.35);
}
#book-cursor-sprite{
  position:fixed;
  left:0;
  top:0;
  z-index:20000;
  pointer-events:none;
  opacity:0;
  transform:translate(var(--cursor-x,0px),var(--cursor-y,0px));
  transition:opacity .08s steps(1);
}
#book-cursor-sprite.is-visible{opacity:1;}
#book-cursor-sprite.is-down{
  transform:translate(var(--cursor-x,0px),var(--cursor-y,0px)) translate(1px,1px);
}
.book-page{
  --book-y-offset:clamp(16px,2.1vh,28px);
  width:min(clamp(960px,80vw,1700px),calc((100vh - 112px) * 1.735));
  max-width:calc(100vw - 42px);
  min-height:100vh;
  margin:0 auto;
  padding:clamp(10px,1.6vh,16px) 0 clamp(14px,2.2vh,22px);
  display:grid;
  grid-template-rows:auto auto;
  row-gap:clamp(9px,1.3vh,15px);
  align-content:center;
  transform:translateY(var(--book-y-offset));
  transition:width .18s ease, margin .18s ease, transform .18s ease;
}
.book-page.is-home-editing{
  width:min(clamp(900px,calc(100vw - 340px),1700px),calc((100vh - 64px) * 1.735));
  margin-left:clamp(12px,3vw,48px);
  margin-right:auto;
}
.book-index{
  position:absolute;
  left:auto;
  right:clamp(-26px,-1.5vw,-18px);
  top:clamp(48px,4.5vw,76px);
  z-index:6;
  height:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:clamp(12px,1.1vw,18px);
  padding-left:0;
  margin-bottom:0;
  pointer-events:none;
}
.book-index button{
  --tab-accent:#5b7694;
  --tab-fill:#edf4df;
  --tab-shadow:rgba(58,94,48,.17);
  position:relative;
  width:clamp(52px,3.2vw,62px);
  height:clamp(104px,7vw,126px);
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 8px 12px 10px;
  border:2px solid var(--tab-accent);
  border-left:0;
  border-radius:0 18px 18px 0;
  background:
    linear-gradient(135deg,rgba(255,255,255,.72),transparent 54%),
    var(--tab-fill);
  color:var(--tab-accent);
  font-family:"Gaegu","Nanum Pen Script","Comic Sans MS",cursive;
  font-size:18px;
  font-weight:bold;
  line-height:1;
  letter-spacing:.1em;
  writing-mode:vertical-rl;
  text-orientation:upright;
  text-shadow:0 1px 0 #fff;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.7),
    4px 5px 0 var(--tab-shadow);
  clip-path:none;
  opacity:1;
  filter:none;
  transform:none;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
  z-index:1;
  pointer-events:auto;
}
.book-index button::before{
  content:"";
  position:absolute;
  inset:6px 5px 6px 1px;
  border:1px dashed var(--tab-accent);
  border-left:0;
  border-radius:0 12px 12px 0;
  opacity:.55;
  pointer-events:none;
}
.book-index button::after{
  display:none;
}
.book-index button.active{
  width:clamp(58px,3.6vw,68px);
  height:clamp(112px,7.5vw,136px);
  min-height:0;
  padding:12px 8px 12px 10px;
  font-size:20px;
  opacity:1;
  filter:saturate(1.08);
  transform:translateX(9px) rotate(0deg);
  z-index:4;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.78),
    4px 6px 0 var(--tab-shadow);
}
.book-index button.is-modal-open{
  z-index:8;
  font-size:20px;
  transform:translateX(9px) rotate(0deg);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.78),
    4px 6px 0 var(--tab-shadow);
}
.book-index button:nth-child(2){
  --tab-accent:#65549a;
  --tab-fill:#eee9ff;
  --tab-shadow:rgba(82,66,132,.18);
  transform:none;
}
.book-index button:nth-child(3){
  --tab-accent:#9a3f61;
  --tab-fill:#ffe9de;
  --tab-shadow:rgba(125,52,82,.18);
  transform:none;
}
.book-index button:nth-child(4){
  --tab-accent:#4d6f9b;
  --tab-fill:#e8f2e3;
  --tab-shadow:rgba(49,91,145,.17);
  transform:none;
}
.book-index button:nth-child(2).active,
.book-index button:nth-child(3).active,
.book-index button:nth-child(4).active{
  transform:translateX(9px) rotate(0deg);
}
.book-index button:not(.active):hover{
  filter:brightness(1.035) saturate(1.08);
  transform:translateX(6px) rotate(0deg);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.76),
    4px 7px 0 var(--tab-shadow);
}
.book-index button:active{
  transform:translate(4px,2px) rotate(0deg);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.74),
    2px 2px 0 var(--tab-shadow);
}
.book-index button:focus-visible{
  outline:3px solid rgba(255,255,255,.95);
  outline-offset:3px;
}
@media (max-height:760px){
  .book-page{
    --book-y-offset:clamp(6px,1.1vh,12px);
    align-content:start;
  }
}
.book-shell{
  position:relative;
  z-index:2;
  --board-content-scale:1;
  aspect-ratio:1700 / 980;
  height:auto;
  min-height:0;
  padding:clamp(30px,2.5vw,44px) clamp(34px,3.2vw,56px) clamp(32px,2.8vw,48px);
  border:0;
  border-radius:28px 18px 24px 22px;
  background:
    linear-gradient(90deg,transparent calc(50% - 18px),#566b35 calc(50% - 18px) calc(50% + 18px),transparent calc(50% + 18px)),
    linear-gradient(180deg,#7ba36f 0%,#b8d29c 100%);
  box-shadow:
    0 14px 0 rgba(66,92,46,.38),
    10px 18px 0 rgba(10,22,52,.18),
    inset 0 0 0 5px rgba(255,255,255,.36),
    inset 0 0 0 9px rgba(44,102,189,.42);
  overflow:visible;
  perspective:1100px;
}
.book-shell::before{
  content:"";
  position:absolute;
  z-index:1;
  left:30px;
  top:24px;
  bottom:24px;
  width:calc(50% - 44px);
  border:3px solid rgba(58,94,48,.42);
  border-radius:22px 8px 10px 24px;
  background:linear-gradient(180deg,#fff8df 0%,#fbfff4 52%,#e1f0d4 100%);
  box-shadow:
    inset -18px 0 28px rgba(86,107,53,.22),
    inset 5px 5px 0 rgba(255,255,255,.78),
    5px 5px 0 rgba(10,22,52,.12);
  pointer-events:none;
}
.book-shell::after{
  content:"";
  position:absolute;
  z-index:1;
  right:30px;
  top:24px;
  bottom:24px;
  width:calc(50% - 44px);
  border:3px solid rgba(58,94,48,.42);
  border-radius:8px 22px 24px 10px;
  background:linear-gradient(180deg,#fff8df 0%,#fbfff4 52%,#e1f0d4 100%);
  box-shadow:
    inset 18px 0 28px rgba(86,107,53,.22),
    inset -5px 5px 0 rgba(255,255,255,.78),
    -5px 5px 0 rgba(10,22,52,.1);
  pointer-events:none;
}
.book-view-controls{
  position:relative;
  z-index:3;
  width:min(360px,100%);
  margin:12px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(34px,5vw,64px);
  pointer-events:auto;
}
.book-view-controls button{
  --button-accent:#c96d8d;
  --button-shadow:rgba(125,52,82,.2);
  position:relative;
  top:-10px;
  width:76px;
  height:42px;
  min-height:42px;
  display:grid;
  place-items:center;
  padding:0;
  overflow:visible;
  border:2px solid var(--button-accent);
  border-radius:15px 9px 14px 8px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.86),transparent 44%),
    #fff7d9;
  color:var(--button-accent);
  font-family:"Gaegu","Nanum Pen Script","Comic Sans MS",cursive;
  font-size:0;
  font-weight:bold;
  line-height:1;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.9),
    4px 5px 0 var(--button-shadow);
  transform:rotate(-2deg);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.book-view-controls button::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px dashed currentColor;
  border-radius:10px 6px 9px 5px;
  opacity:.58;
  pointer-events:none;
}
.book-view-controls button::after{
  content:"←";
  position:relative;
  z-index:1;
  font-size:24px;
  line-height:1;
  text-shadow:0 1px 0 #fff;
}
#book-next-view{
  --button-accent:#477fba;
  --button-shadow:rgba(49,91,145,.2);
  border-radius:9px 15px 8px 14px;
  transform:rotate(2deg);
}
#book-next-view::after{
  content:"→";
}
.book-view-controls button:hover{
  filter:brightness(1.035) saturate(1.08);
  transform:translateY(-3px) rotate(0deg);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.92),
    5px 7px 0 var(--button-shadow);
}
.book-view-controls button:active{
  transform:translate(2px,2px) rotate(0deg);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.9),
    2px 2px 0 var(--button-shadow);
}
.book-view-controls button:focus-visible{
  outline:3px solid rgba(255,255,255,.95);
  outline-offset:3px;
}
.book-rings{
  position:absolute;
  left:calc(50% - 18px);
  top:78px;
  bottom:72px;
  width:36px;
  z-index:5;
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  pointer-events:none;
}
.book-rings span{
  height:13px;
  border-radius:14px;
  background:#33451f;
  box-shadow:
    22px 0 0 #33451f,
    -22px 0 0 #33451f,
    0 2px 0 rgba(255,255,255,.18);
}
.book-turn-page{
  position:absolute;
  left:calc(50% + 18px);
  right:30px;
  top:24px;
  bottom:24px;
  z-index:4;
  border-radius:8px 22px 24px 10px;
  background:
    linear-gradient(90deg,rgba(86,107,53,.18),transparent 18%),
    linear-gradient(180deg,#fff8df 0%,#fbfff4 52%,#e1f0d4 100%);
  box-shadow:
    inset 18px 0 28px rgba(86,107,53,.2),
    -8px 0 14px rgba(10,22,52,.16);
  opacity:0;
  transform:rotateY(0deg);
  transform-origin:left center;
  pointer-events:none;
}
.book-shell.is-turning .book-turn-page{
  animation:book-page-turn .62s ease-in-out;
}
@keyframes book-page-turn{
  0%{opacity:0;transform:rotateY(0deg) translateY(-3px);}
  14%{opacity:.94;}
  48%{opacity:.97;transform:rotateY(-96deg) translateY(-8px) skewY(-1deg);}
  78%{opacity:.9;transform:rotateY(-172deg) translateY(2px) skewY(-1deg);}
  100%{opacity:0;transform:rotateY(-180deg) translateY(0);}
}
.book-view{
  position:relative;
  min-height:0;
  height:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(54px,4.2vw,86px);
  z-index:2;
}
.book-view[hidden]{display:none !important;}
.cover-left,
.cover-right{
  position:relative;
  min-width:0;
  min-height:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
}
.cover-left{
  background-image:url("../assets/images/sei_diary_1.png");
}
.cover-right{
  background-image:url("../assets/images/sei_diary_2.png");
}
.photo-card{
  position:absolute;
  background:#fff;
  border:0;
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 7px #3aaec1,
    8px 10px 0 rgba(10,22,52,.16);
  transform:rotate(-2deg);
}
.photo-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:auto;
}
.main-photo{
  left:78px;
  top:72px;
  width:286px;
  height:352px;
  padding:12px 12px 44px;
  background:#dff8ff;
  border-radius:2px;
}
.main-photo img{
  border:3px solid #96c5e8;
}
.main-photo span{
  position:absolute;
  left:16px;
  right:16px;
  bottom:13px;
  color:#2c66bd;
  font-size:17px;
  font-weight:bold;
  text-align:center;
}
.tiny-photo{
  left:323px;
  top:312px;
  width:92px;
  height:92px;
  padding:8px;
  transform:rotate(8deg);
}
.tape{
  position:absolute;
  width:62px;
  height:132px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 14px),
    rgba(81,199,194,.72);
  z-index:4;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
}
.tape-a{left:52px;top:4px;transform:rotate(-4deg);}
.tape-b{left:315px;top:12px;transform:rotate(2deg);}
.sticker{
  position:absolute;
  z-index:5;
  border:3px solid #2c66bd;
  background:#fff8c6;
  color:#c23b2e;
  font-weight:bold;
  box-shadow:3px 3px 0 rgba(10,22,52,.14);
}
.sticker-title{
  left:7px;
  top:132px;
  padding:8px 10px;
  font-size:28px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  letter-spacing:0;
}
.sticker-heart{
  right:70px;
  top:34px;
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-color:#e37ca0;
  background:#ffdce8;
  color:#c23b2e;
  font-size:28px;
  transform:rotate(12deg);
}
.memo-scrap{
  position:absolute;
  left:86px;
  bottom:40px;
  width:230px;
  min-height:86px;
  padding:12px;
  border:3px dashed #7fb0d8;
  background:#fffdf4;
  color:#3d5490;
  transform:rotate(-1deg);
}
.memo-scrap b{
  display:block;
  margin-bottom:7px;
  color:#c23b2e;
}
.memo-scrap p{
  margin:0;
  font-size:14px;
  line-height:1.35;
}
.paper-note{
  position:absolute;
  padding:14px;
  border:0;
  background:
    linear-gradient(transparent 0 22px,rgba(201,154,46,.2) 22px 23px),
    #fff8c6;
  background-size:100% 23px;
  color:#3d5490;
  box-shadow:
    0 0 0 3px #f1c15f,
    5px 6px 0 rgba(10,22,52,.13);
}
.paper-note b{
  display:block;
  margin-bottom:8px;
  color:#2c66bd;
  font-size:18px;
}
.paper-note p{
  margin:0;
  font-size:15px;
  line-height:1.6;
}
.note-one{
  left:38px;
  top:68px;
  width:230px;
  min-height:160px;
  transform:rotate(2deg);
}
.note-two{
  right:42px;
  top:250px;
  width:220px;
  min-height:126px;
  background:#dff8ff;
  border-color:#5dbbd1;
  transform:rotate(-4deg);
}
.profile-ticket{
  position:absolute;
  left:48px;
  bottom:100px;
  width:332px;
  min-height:96px;
  display:grid;
  grid-template-columns:64px 1fr;
  gap:12px;
  align-items:center;
  padding:11px;
  border:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,transparent 1px 16px),
    #e4edfb;
  box-shadow:
    0 0 0 4px #2c66bd,
    6px 7px 0 rgba(10,22,52,.16);
}
.profile-ticket img{
  width:64px;
  height:64px;
  border:3px solid #fff;
  background:#fff;
}
.profile-ticket b,
.profile-ticket span{
  display:block;
}
.profile-ticket b{
  color:#c23b2e;
  font-size:18px;
}
.profile-ticket span{
  margin-top:4px;
  color:#3d5490;
  font-size:13px;
}
.photo-edit-toggle{
  position:absolute;
  right:6px;
  top:6px;
  z-index:12;
  width:38px;
  height:38px;
  min-height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:3px solid #2c66bd;
  background:#fff8c6;
  color:#1e4aa8;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.86),3px 3px 0 rgba(10,22,52,.16);
}
.photo-edit-toggle svg{
  width:22px;
  height:22px;
  fill:currentColor;
}
.photo-edit-toggle.is-active{
  background:#ffe4ec;
  color:#c23b2e;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.9),
    0 0 0 3px rgba(255,198,218,.72),
    3px 3px 0 rgba(10,22,52,.16);
}
.profile-cover{
  position:absolute;
  inset:0;
}
.profile-frame{
  position:absolute;
  left:50%;
  top:86px;
  width:min(340px,72%);
  aspect-ratio:1 / 1.16;
  padding:14px 14px 52px;
  border:0;
  border-radius:4px;
  background:#f9fdff;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.95),
    0 0 0 8px #5dbbd1,
    10px 12px 0 rgba(10,22,52,.14);
  transform:translateX(-50%) rotate(-1.5deg);
}
.profile-frame::before,
.profile-frame::after{
  content:"";
  position:absolute;
  top:-28px;
  width:72px;
  height:132px;
  z-index:2;
  background:
    linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 14px),
    rgba(81,199,194,.68);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.32);
}
.profile-frame::before{
  left:-24px;
  transform:rotate(-4deg);
}
.profile-frame::after{
  right:-24px;
  transform:rotate(3deg);
}
.profile-frame img{
  display:block;
  width:100%;
  height:100%;
  border:3px solid #96c5e8;
  object-fit:cover;
  object-position:center top;
  image-rendering:auto;
}
.handwritten-title{
  position:absolute;
  left:50%;
  top:min(640px,87%);
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  color:#101010;
  font-family:"Gaegu","Nanum Pen Script","Comic Sans MS","Marker Felt","Bradley Hand","Courier New",cursive;
  font-size:clamp(42px,4.2vw,72px);
  font-weight:700;
  line-height:1;
  text-shadow:
    2px 2px 0 rgba(255,255,255,.78),
    0 3px 0 rgba(10,22,52,.08);
  transform:translateX(-50%) rotate(-3deg);
  white-space:nowrap;
}
.handwritten-title span:first-child{
  transform:translateY(7px) rotate(-6deg);
}
.handwritten-title span:last-child{
  color:#101010;
  transform:translateY(-5px) rotate(7deg);
}
.paint-board{
  position:absolute;
  inset:32px 28px 40px;
}
.left-paint-board{
  inset:30px 28px 40px;
}
.right-paint-board{
  inset:32px 28px 8px;
}
.paint-toolbar{
  position:absolute;
  left:calc(100% + clamp(28px,3.2vw,54px));
  top:4px;
  z-index:13;
  width:252px;
  max-height:min(760px,calc(100vh - 126px));
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  gap:10px;
  padding:12px;
  overflow:auto;
  background:
    linear-gradient(180deg,rgba(255,253,244,.94),rgba(225,240,212,.94));
  border:3px solid rgba(58,94,48,.52);
  border-radius:10px 6px 12px 8px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.72),
    7px 8px 0 rgba(10,22,52,.16);
}
.paint-toolbar::before{
  content:"꾸미기";
  grid-column:1 / -1;
  color:#9a3352;
  font-size:13px;
  font-weight:bold;
  letter-spacing:0;
  padding:0 2px 2px;
  border-bottom:2px dashed rgba(44,102,189,.28);
}
.palette-item{
  position:relative;
  min-height:96px;
  padding:7px;
  display:grid;
  grid-template-rows:1fr auto;
  gap:5px;
  place-items:center;
  border:0;
  background:transparent;
  color:#1e4aa8;
  box-shadow:none;
}
.palette-item:hover,
.palette-item:focus-visible{
  background:rgba(141,231,223,.22);
  outline:2px solid rgba(44,102,189,.42);
}
.palette-item b{
  color:#3d5490;
  font-size:11px;
  line-height:1;
}
.palette-preview{
  position:relative;
  width:72px;
  height:56px;
  display:block;
  filter:drop-shadow(3px 4px 0 rgba(10,22,52,.12));
}
.paint-toolbar[hidden]{
  display:none !important;
}
.palette-memo .palette-preview{
  background:
    linear-gradient(transparent 0 13px,rgba(127,176,216,.3) 13px 14px),
    #fffdf4;
  background-size:100% 14px;
  box-shadow:0 0 0 2px #7fb0d8,3px 4px 0 rgba(10,22,52,.12);
  transform:rotate(-3deg);
}
.palette-label .palette-preview{
  width:82px;
  height:34px;
  background:#dff8ff;
  box-shadow:0 0 0 2px #5dbbd1,3px 4px 0 rgba(10,22,52,.12);
  transform:rotate(3deg);
}
.palette-check .palette-preview{
  background:
    linear-gradient(#2c66bd,#2c66bd) 16px 14px / 34px 2px no-repeat,
    linear-gradient(#2c66bd,#2c66bd) 16px 28px / 38px 2px no-repeat,
    linear-gradient(#2c66bd,#2c66bd) 16px 42px / 28px 2px no-repeat,
    linear-gradient(#fffdf4,#fffdf4);
  box-shadow:0 0 0 2px #7fb0d8,3px 4px 0 rgba(10,22,52,.12);
}
.palette-check .palette-preview::before{
  content:"";
  position:absolute;
  left:7px;
  top:11px;
  width:5px;
  height:5px;
  border:2px solid #2c66bd;
  box-shadow:0 14px 0 -2px #fffdf4,0 14px 0 0 #2c66bd,0 28px 0 -2px #fffdf4,0 28px 0 0 #2c66bd;
}
.palette-speech .palette-preview{
  width:82px;
  height:44px;
  border:3px solid #5dbbd1;
  border-radius:16px 14px 14px 12px;
  background:#f8fbff;
  transform:rotate(-2deg);
}
.palette-speech .palette-preview::after{
  content:"";
  position:absolute;
  left:13px;
  bottom:-13px;
  border-width:12px 12px 0 0;
  border-style:solid;
  border-color:#5dbbd1 transparent transparent transparent;
}
.palette-tape .palette-preview{
  width:78px;
  height:30px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.24) 0 2px,transparent 2px 14px),
    rgba(81,199,194,.72);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
  transform:rotate(-8deg);
}
.palette-stamp .palette-preview{
  width:74px;
  height:34px;
  display:grid;
  place-items:center;
  border:4px double #c23b2e;
  color:#c23b2e;
  background:rgba(255,248,198,.7);
  transform:rotate(-6deg);
}
.palette-stamp .palette-preview::before{
  content:"OK";
  font-size:17px;
  font-weight:bold;
}
.palette-heart .palette-preview,
.palette-star .palette-preview,
.palette-sparkle .palette-preview{
  display:grid;
  place-items:center;
  background:transparent;
  filter:drop-shadow(2px 3px 0 rgba(10,22,52,.14));
}
.palette-heart .palette-preview::before{
  content:"♥";
  color:#c75d86;
  font-family:"Gaegu","Nanum Pen Script","Courier New",monospace;
  font-size:54px;
}
.palette-star .palette-preview::before{
  content:"★";
  color:#f6d86b;
  -webkit-text-stroke:2px #c99a2e;
  font-size:52px;
}
.palette-sparkle .palette-preview::before{
  content:"✦";
  color:#5dbbd1;
  font-size:54px;
}
.palette-ribbon .palette-preview{
  width:42px;
  height:64px;
  background:#ffc6da;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.42),3px 4px 0 rgba(10,22,52,.12);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
  transform:rotate(5deg);
}
.palette-photo .palette-preview,
.palette-upload .palette-preview{
  width:68px;
  height:52px;
  background:
    linear-gradient(135deg,transparent 0 44%,rgba(141,231,223,.72) 44% 58%,transparent 58%) left -6px top -5px / 36px 36px no-repeat,
    linear-gradient(#f8fbff,#f8fbff);
  box-shadow:0 0 0 3px #96c5e8,0 0 0 7px #fff,3px 4px 0 rgba(10,22,52,.12);
  transform:rotate(-3deg);
}
.palette-upload .palette-preview::after{
  content:"+";
  position:absolute;
  right:-10px;
  bottom:-9px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  background:#fff8c6;
  border:2px solid #2c66bd;
  color:#2c66bd;
  font-size:18px;
  font-weight:bold;
}
.palette-text .palette-preview{
  display:grid;
  place-items:center;
  background:transparent;
}
.palette-text .palette-preview::before{
  content:"Aa";
  color:#101828;
  font-family:"Gaegu","Nanum Pen Script","Courier New",monospace;
  font-size:40px;
  font-weight:bold;
}
.palette-line .palette-preview{
  height:32px;
  background:
    linear-gradient(#2c66bd,#2c66bd) center / 72px 2px no-repeat,
    linear-gradient(#2c66bd,#2c66bd) center calc(50% + 4px) / 72px 2px no-repeat;
}
.paint-canvas{
  position:absolute;
  left:0;
  top:0;
  width:calc(100% / var(--board-content-scale,1));
  height:calc(100% / var(--board-content-scale,1));
  transform:scale(var(--board-content-scale,1));
  transform-origin:top left;
  overflow:hidden;
}
.paint-item{
  position:absolute;
  min-width:96px;
  min-height:38px;
  z-index:2;
  color:#1e4aa8;
  user-select:text;
  touch-action:none;
  transform-origin:center center;
}
.paint-canvas.is-editing .paint-item{
  cursor:move;
  outline:1px dashed rgba(44,102,189,.62);
  outline-offset:5px;
}
.paint-canvas.is-editing .paint-item.is-active{
  outline:2px solid rgba(44,102,189,.85);
}
.paint-board.is-editing.is-active-side{
  box-shadow:inset 0 0 0 2px rgba(44,102,189,.18);
}
.paint-canvas:not(.is-editing) .paint-item:not(.weekly-paper) .paint-handle,
.paint-canvas:not(.is-editing) .paint-remove,
.paint-canvas:not(.is-editing) .paint-rotate,
.paint-canvas:not(.is-editing) .paint-resize{
  display:none;
}
.paint-canvas:not(.is-editing) .paint-item:not(.weekly-paper){
  display:none;
}
.paint-item.is-dragging{
  z-index:20;
  opacity:.96;
  user-select:none;
}
.paint-handle{
  min-height:20px;
  display:flex;
  align-items:center;
  color:#c23b2e;
  font-size:12px;
  font-weight:bold;
  cursor:grab;
}
.paint-item.is-dragging .paint-handle{
  cursor:grabbing;
}
.paint-item.is-rotating{
  z-index:21;
}
.paint-item.is-resizing{
  z-index:21;
}
.paint-remove{
  position:absolute;
  right:-8px;
  top:-8px;
  width:20px;
  height:20px;
  min-height:20px;
  z-index:3;
  padding:0;
  border:2px solid #2c66bd;
  background:#fff8c6;
  color:#c23b2e;
  font-size:13px;
  line-height:1;
}
.paint-rotate{
  position:absolute;
  right:-20px;
  bottom:-20px;
  width:28px;
  height:28px;
  min-height:28px;
  z-index:4;
  display:grid;
  place-items:center;
  padding:0;
  border:2px solid #2c66bd;
  border-radius:50%;
  background:#f8fbff;
  color:#1e4aa8;
  opacity:0;
  pointer-events:none;
  box-shadow:inset 1px 1px 0 #fff,2px 2px 0 rgba(10,22,52,.16);
  cursor:grab;
}
.paint-resize{
  position:absolute;
  right:-16px;
  top:50%;
  width:26px;
  height:26px;
  min-height:26px;
  z-index:4;
  display:grid;
  place-items:center;
  padding:0;
  border:2px solid #2c66bd;
  border-radius:50%;
  background:#fff8c6;
  color:#1e4aa8;
  opacity:0;
  pointer-events:none;
  box-shadow:inset 1px 1px 0 #fff,2px 2px 0 rgba(10,22,52,.14);
  cursor:ew-resize;
  transform:translateY(-50%);
}
.paint-resize svg{
  width:16px;
  height:16px;
  fill:currentColor;
}
.paint-rotate svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.paint-canvas.is-editing .paint-item:hover .paint-rotate,
.paint-canvas.is-editing .paint-item.is-active .paint-rotate{
  opacity:1;
  pointer-events:auto;
}
.paint-canvas.is-editing .paint-item:hover .paint-resize,
.paint-canvas.is-editing .paint-item.is-active .paint-resize{
  opacity:1;
  pointer-events:auto;
}
.paint-canvas.is-editing .text-note:hover .paint-resize,
.paint-canvas.is-editing .title-item:hover .paint-resize{
  cursor:ew-resize;
}
.paint-item.is-rotating .paint-rotate{
  cursor:grabbing;
}
.paint-edit{
  min-width:0;
  outline:0;
  white-space:pre-wrap;
  cursor:text;
}
.weekly-paper{
  left:18px !important;
  top:auto !important;
  bottom:0;
  width:calc(100% - 36px) !important;
  height:auto !important;
  min-height:168px;
  padding:0;
  background:transparent;
  color:#263b69;
  font-family:"Gaegu","Nanum Pen Script","Comic Sans MS","Marker Felt",cursive;
  box-shadow:none;
  transform:rotate(var(--rotation,0deg));
}
.weekly-paper .paint-handle{
  width:max-content;
  min-height:0;
  margin:0 0 5px 4px;
  padding:2px 10px 1px;
  border:2px solid rgba(185,104,134,.38);
  border-radius:9px 8px 7px 10px;
  background:rgba(255,246,222,.94);
  color:#7d3452;
  font-size:30px;
  line-height:1.05;
  text-shadow:0 1px 0 #fff;
  transform:rotate(-1deg);
}
.weekly-schedule{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:0;
  overflow:hidden;
  border:2px solid rgba(95,128,164,.58);
  border-radius:7px 6px 9px 5px;
  background:rgba(255,253,239,.92);
  box-shadow:3px 4px 0 rgba(77,99,80,.14);
}
.weekly-day{
  min-height:118px;
  padding:7px 6px;
  border-left:2px solid rgba(95,128,164,.34);
  background:transparent;
}
.weekly-day:first-child{border-left:0;}
.weekly-day.today{
  background:rgba(255,218,229,.52);
}
.weekly-date{
  display:flex;
  justify-content:space-between;
  gap:4px;
  color:#315b91;
  font-size:18px;
  font-weight:700;
  line-height:1;
  text-shadow:0 1px 0 #fff;
}
.weekly-events{
  display:grid;
  gap:5px;
  margin-top:7px;
}
.weekly-event{
  color:#25385d;
  font-size:17px;
  font-weight:700;
  line-height:1.18;
  overflow-wrap:break-word;
}
.weekly-time{
  display:block;
  margin-bottom:2px;
  color:#b43e53;
  font-weight:700;
}
.weekly-empty{
  color:#687892;
  font-size:16px;
  font-weight:700;
  line-height:1.15;
}
.memo-note{
  width:210px;
  min-height:118px;
  padding:11px 13px 13px;
  background:
    linear-gradient(transparent 0 23px,rgba(127,176,216,.24) 23px 24px),
    #fffdf4;
  background-size:100% 24px;
  box-shadow:
    0 0 0 3px #7fb0d8,
    4px 5px 0 rgba(10,22,52,.12);
  transform:rotate(var(--rotation,-1.2deg));
}
.label-note{
  width:224px;
  min-height:74px;
  padding:10px 12px;
  background:#dff8ff;
  box-shadow:
    0 0 0 3px #5dbbd1,
    4px 5px 0 rgba(10,22,52,.12);
  transform:rotate(var(--rotation,2deg));
}
.stamp-note{
  min-width:112px;
  min-height:54px;
  display:grid;
  place-items:center;
  padding:9px 12px;
  border:4px double #c23b2e;
  background:rgba(255,248,198,.7);
  color:#c23b2e;
  transform:rotate(var(--rotation,-5deg));
}
.stamp-note .paint-handle{
  position:absolute;
  left:8px;
  top:-18px;
}
.stamp-note .paint-edit{
  color:#c23b2e;
  font-size:22px;
  font-weight:bold;
}
.check-note{
  width:206px;
  min-height:118px;
  padding:12px 14px;
  background:
    linear-gradient(transparent 0 23px,rgba(127,176,216,.24) 23px 24px),
    #fffdf4;
  background-size:100% 24px;
  box-shadow:
    0 0 0 3px #7fb0d8,
    4px 5px 0 rgba(10,22,52,.12);
  transform:rotate(var(--rotation,-1deg));
}
.check-note .paint-edit{
  color:#1e4aa8;
  font-size:17px;
  line-height:1.42;
  font-weight:bold;
}
.speech-note{
  width:214px;
  min-height:82px;
  padding:14px 18px 18px;
  border:3px solid #5dbbd1;
  border-radius:22px 18px 20px 16px;
  background:#f8fbff;
  box-shadow:4px 5px 0 rgba(10,22,52,.12);
  transform:rotate(var(--rotation,1.8deg));
}
.speech-note::after{
  content:"";
  position:absolute;
  left:26px;
  bottom:-18px;
  border-width:18px 18px 0 0;
  border-style:solid;
  border-color:#5dbbd1 transparent transparent transparent;
}
.speech-note .paint-edit{
  color:#1e4aa8;
  font-size:18px;
  font-weight:bold;
  line-height:1.25;
}
.heart-note,
.star-note,
.sparkle-note{
  min-width:64px;
  min-height:64px;
  display:grid;
  place-items:center;
  padding:0;
  background:transparent;
  box-shadow:none;
}
.heart-note{transform:rotate(var(--rotation,-8deg));}
.star-note{transform:rotate(var(--rotation,7deg));}
.sparkle-note{transform:rotate(var(--rotation,-5deg));}
.heart-note .paint-edit,
.star-note .paint-edit,
.sparkle-note .paint-edit{
  font-family:"Gaegu","Nanum Pen Script","Courier New",monospace;
  font-size:64px;
  font-weight:bold;
  line-height:1;
  text-align:center;
  filter:drop-shadow(2px 3px 0 rgba(10,22,52,.14));
}
.heart-note .paint-edit{color:#c75d86;}
.star-note .paint-edit{color:#f6d86b;-webkit-text-stroke:2px #c99a2e;}
.sparkle-note .paint-edit{color:#5dbbd1;}
.ribbon-note{
  width:58px;
  height:132px;
  min-width:58px;
  min-height:132px;
  padding:0;
  background:#ffc6da;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.42),4px 5px 0 rgba(10,22,52,.12);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);
  transform:rotate(var(--rotation,6deg));
}
.ribbon-note .paint-handle,
.ribbon-note .paint-edit{
  color:transparent;
  font-size:0;
}
.tape-note{
  width:118px;
  height:38px;
  min-height:38px;
  padding:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.22) 0 2px,transparent 2px 14px),
    rgba(81,199,194,.7);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.32),3px 4px 0 rgba(10,22,52,.1);
  transform:rotate(var(--rotation,-6deg));
}
.tape-note .paint-handle,
.tape-note .paint-edit{
  color:transparent;
  font-size:0;
}
.profile-item{
  width:260px;
  height:322px;
  padding:14px 14px 52px;
  border:0;
  border-radius:4px;
  background:#f9fdff;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.95),
    0 0 0 8px #5dbbd1,
    10px 12px 0 rgba(10,22,52,.14);
  transform:rotate(var(--rotation,-2deg));
}
.profile-item .paint-handle,
.photo-item .paint-handle{
  position:absolute;
  left:10px;
  top:-24px;
}
.photo-item{
  width:240px;
  height:180px;
  padding:0;
  background:transparent;
  box-shadow:none;
  transform:rotate(var(--rotation,0deg));
}
.paint-photo{
  display:block;
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
  object-position:center top;
  image-rendering:auto;
  pointer-events:auto;
}
.profile-item .paint-photo{
  border:3px solid #96c5e8;
}
.profile-item .paint-resize,
.photo-item .paint-resize{
  right:-18px;
  top:auto;
  bottom:-18px;
  cursor:nwse-resize;
  transform:none;
}
.title-item,
.text-note{
  width:380px;
  min-height:76px;
  padding:4px 8px;
  background:transparent;
  box-shadow:none;
  transform:rotate(var(--rotation,0deg));
}
.title-item .paint-handle,
.text-note .paint-handle{
  position:absolute;
  left:0;
  top:-20px;
}
.handwritten-title{
  position:static;
  left:auto;
  top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#101010;
  font-family:"Gaegu","Nanum Pen Script","Comic Sans MS","Marker Felt","Bradley Hand","Courier New",cursive;
  font-size:var(--font-size,64px);
  font-weight:700;
  line-height:1.08;
  text-align:center;
  text-shadow:
    2px 2px 0 rgba(255,255,255,.78),
    0 3px 0 rgba(10,22,52,.08);
  transform:none;
  white-space:normal;
}
.text-note .paint-edit{
  color:#101828;
  font-family:"Gaegu","Nanum Pen Script","Courier New",monospace;
  font-size:var(--font-size,28px);
  font-weight:700;
  line-height:1.15;
  text-shadow:1px 1px 0 rgba(255,255,255,.78);
}
.divider-line{
  width:260px;
  height:18px;
  min-width:48px;
  min-height:18px;
  transform:rotate(var(--rotation,0deg));
}
.divider-line .paint-handle{
  position:absolute;
  left:0;
  top:-22px;
}
.paint-line-body{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:0;
  border-top:4px double #2c66bd;
  transform:translateY(-50%);
  box-shadow:0 2px 0 rgba(255,255,255,.72);
}
.game-view{
  --game-page-pad:clamp(22px,2.8vw,48px);
  --game-center-gutter:clamp(106px,9vw,166px);
  grid-template-columns:1fr 1fr;
  font-family:"Gaegu","Nanum Pen Script","Comic Sans MS","Marker Felt",cursive;
}
.game-detail-page,
.game-library-page{
  position:relative;
  min-width:0;
  min-height:0;
  height:100%;
  overflow:hidden;
}
.game-detail-page{
  z-index:3;
  display:flex;
  flex-direction:column;
  padding:clamp(24px,2.7vw,46px) clamp(22px,2.8vw,48px) clamp(20px,2.2vw,38px);
  pointer-events:none;
}
.game-detail-page::before{
  content:"";
  position:absolute;
  right:26px;
  top:28px;
  width:76px;
  height:76px;
  border:3px double rgba(101,84,154,.42);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 12px,rgba(101,84,154,.12) 13px 16px,transparent 17px),
    repeating-conic-gradient(from 20deg,rgba(101,84,154,.22) 0 7deg,transparent 7deg 28deg);
  transform:rotate(8deg);
  pointer-events:none;
}
.game-log-heading{
  position:relative;
  z-index:1;
  padding-left:10px;
}
.game-log-heading h1{
  margin:0;
  max-width:calc(100% - 72px);
  color:#263d7c;
  font-family:"Courier New",monospace;
  font-size:clamp(27px,2.15vw,40px);
  line-height:1;
  letter-spacing:.035em;
  text-shadow:2px 2px 0 #fff,4px 4px 0 rgba(101,84,154,.16);
}
.game-log-heading p{
  margin:7px 0 0;
  color:#6e6990;
  font-size:clamp(14px,1.05vw,18px);
  font-weight:700;
  white-space:nowrap;
}
.game-stats{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:clamp(16px,1.8vw,28px) 2px clamp(14px,1.55vw,24px);
}
.game-stats div{
  min-width:0;
  padding:7px 6px 6px;
  border:2px dashed rgba(71,127,186,.52);
  border-radius:12px 7px 11px 6px;
  background:rgba(255,253,244,.78);
  text-align:center;
  box-shadow:2px 3px 0 rgba(49,91,145,.08);
}
.game-stats div:nth-child(2){
  border-color:rgba(63,125,70,.5);
  background:rgba(232,242,227,.78);
  transform:rotate(1deg);
}
.game-stats div:nth-child(3){
  border-color:rgba(154,63,97,.48);
  background:rgba(255,233,222,.8);
  transform:rotate(-1deg);
}
.game-stats div:nth-child(4){
  border-color:rgba(104,111,130,.48);
  background:rgba(237,240,244,.82);
  transform:rotate(.7deg);
}
.game-stats strong,
.game-stats span{
  display:block;
}
.game-stats strong{
  color:#263d7c;
  font-family:"Courier New",monospace;
  font-size:clamp(20px,1.7vw,30px);
  line-height:1;
}
.game-stats span{
  margin-top:3px;
  color:#6e6990;
  font-family:"Courier New",monospace;
  font-size:10px;
  font-weight:bold;
  letter-spacing:.08em;
}
.game-feature{
  position:relative;
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(130px,42%) minmax(0,1fr);
  gap:clamp(15px,1.6vw,26px);
  align-items:center;
  padding:clamp(15px,1.5vw,24px);
  border:3px solid #65549a;
  border-radius:18px 10px 16px 8px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.88),transparent 45%),
    #f3efff;
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,.88),
    6px 7px 0 rgba(82,66,132,.16);
  overflow:hidden;
}
.game-feature::before{
  content:"PICK OF THE DAY";
  position:absolute;
  right:-34px;
  top:15px;
  width:150px;
  padding:3px 0;
  background:#ffc6da;
  color:#8d3556;
  font-family:"Courier New",monospace;
  font-size:9px;
  font-weight:bold;
  letter-spacing:.07em;
  text-align:center;
  transform:rotate(35deg);
  z-index:3;
}
.game-feature-empty{
  grid-column:1 / -1;
  align-self:center;
  text-align:center;
  color:#6e6990;
}
.game-feature-empty span,
.game-feature-empty b,
.game-feature-empty p{
  display:block;
}
.game-feature-empty span{
  color:#c67ca0;
  font-size:42px;
}
.game-feature-empty b{
  margin-top:8px;
  color:#463d74;
  font-size:21px;
}
.game-feature-empty p{
  max-width:280px;
  margin:6px auto 0;
  font-size:14px;
  line-height:1.4;
}
.game-feature-cover{
  position:relative;
  width:100%;
  max-height:100%;
  aspect-ratio:264 / 374;
  padding:7px 7px 25px;
  border:2px solid #fff;
  background:#fff;
  box-shadow:0 0 0 3px #596ca4,7px 8px 0 rgba(35,49,89,.2);
  transform:rotate(-2deg);
  overflow:hidden;
}
.game-feature-cover::after{
  content:"PLAYED!";
  position:absolute;
  left:8px;
  right:8px;
  bottom:4px;
  color:#65549a;
  font-family:"Courier New",monospace;
  font-size:10px;
  font-weight:bold;
  letter-spacing:.14em;
  text-align:center;
}
.game-feature-cover img,
.game-card-cover img,
.game-selected-cover-frame img,
.game-search-result-cover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:auto;
}
.game-selected-cover-frame img,
.game-search-result-cover img{
  object-fit:contain;
  background:#eee9ff;
}
.game-feature-cover.is-missing,
.game-card-cover.is-missing,
.game-selected-cover-frame.is-missing,
.game-search-result-cover.is-missing{
  display:grid;
  place-items:center;
  background:
    linear-gradient(45deg,rgba(101,84,154,.08) 25%,transparent 25% 75%,rgba(101,84,154,.08) 75%),
    #eee9ff;
  background-size:18px 18px;
}
.game-cover-fallback{
  padding:4px;
  color:#7568a4;
  font-family:"Courier New",monospace;
  font-size:10px;
  font-weight:bold;
  line-height:1.2;
  text-align:center;
}
.game-feature-copy{
  min-width:0;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4px 0;
}
.game-feature-topline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
}
.game-status-badge,
.game-platform-badge{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:2px 8px;
  border:2px solid #526998;
  border-radius:10px 6px 9px 5px;
  background:#e6efff;
  color:#435a8d;
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.game-status-badge.status-playing{border-color:#438058;background:#e3f4de;color:#356c43;}
.game-status-badge.status-completed{border-color:#9a3f61;background:#ffe4ec;color:#8a3556;}
.game-status-badge.status-dropped{border-color:#788097;background:#edf0f4;color:#5e6575;}
.game-platform-badge{
  border-style:dashed;
  background:#fffdf4;
}
.game-feature-copy h3{
  margin:9px 0 0;
  color:#273a70;
  font-size:clamp(20px,1.65vw,29px);
  line-height:1.04;
  overflow-wrap:anywhere;
}
.game-original-title{
  margin:3px 0 0;
  color:#777191;
  font-family:"Courier New",monospace;
  font-size:10px;
  line-height:1.25;
}
.game-play-period{
  margin:10px 0 0;
  color:#596a8d;
  font-family:"Courier New",monospace;
  font-size:11px;
  font-weight:bold;
}
.game-feature-rating{
  margin-top:7px;
  color:#d28a26;
  font-family:"Courier New",monospace;
  font-size:clamp(15px,1.1vw,19px);
  letter-spacing:.04em;
  text-shadow:1px 1px 0 #fff;
}
.game-feature-memo{
  min-height:62px;
  margin:10px 0 0;
  padding:9px 10px 7px;
  border-left:4px solid #82b8ec;
  background:
    repeating-linear-gradient(transparent 0 21px,rgba(130,184,236,.28) 21px 22px),
    rgba(255,253,244,.72);
  color:#4c5274;
  font-size:clamp(13px,1vw,17px);
  line-height:22px;
  white-space:pre-wrap;
  overflow:auto;
}
.game-feature-memo.is-empty{
  color:#9692a8;
}
.game-feature-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:auto;
  padding-top:10px;
}
.game-source-link,
.game-igdb-credit{
  color:#65549a;
  font-family:"Courier New",monospace;
  font-size:10px;
  font-weight:bold;
  text-decoration:none;
}
.game-source-link:hover,
.game-igdb-credit:hover{text-decoration:underline;}
.game-edit-button{
  min-height:26px;
  padding:3px 8px;
  border:2px solid #9a3f61;
  border-radius:9px 5px 8px 4px;
  background:#ffe9de;
  color:#8a3556;
  font-family:inherit;
  font-size:12px;
  font-weight:bold;
}
.game-igdb-credit{
  position:absolute;
  right:clamp(24px,2.8vw,48px);
  bottom:9px;
  z-index:2;
  padding:0;
  background:transparent;
  color:#78718d;
  font-size:9px;
}
.game-library-page{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  padding:0;
}
.game-library-page::after{
  content:"";
  position:absolute;
  left:25px;
  right:25px;
  bottom:37px;
  height:8px;
  border-top:3px dashed rgba(154,63,97,.18);
  pointer-events:none;
}
.game-catalog-toolbar{
  position:absolute;
  top:var(--game-page-pad);
  right:var(--game-page-pad);
  z-index:4;
  width:calc((100% - var(--game-center-gutter))/2 - var(--game-page-pad));
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.game-library-heading{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:0 4px 11px;
  border-bottom:3px double rgba(101,84,154,.36);
}
.game-library-heading span{
  color:#9a3f61;
  font-family:"Courier New",monospace;
  font-size:10px;
  font-weight:bold;
  letter-spacing:.1em;
}
.game-library-heading h2{
  margin:2px 0 0;
  color:#273a70;
  font-family:"Courier New",monospace;
  font-size:clamp(22px,1.9vw,34px);
  line-height:1;
  letter-spacing:.08em;
}
.game-add-button{
  min-height:34px;
  padding:5px 10px;
  border:2px solid #65549a;
  border-radius:12px 7px 11px 6px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.86),transparent 48%),
    #eee9ff;
  color:#59488f;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  box-shadow:inset 2px 2px 0 #fff,3px 4px 0 rgba(82,66,132,.16);
}
.game-filters{
  display:flex;
  align-items:center;
  gap:5px;
  margin:0;
  padding:2px;
  overflow-x:auto;
  scrollbar-width:thin;
}
.game-filters button{
  flex:0 0 auto;
  min-height:27px;
  padding:3px 8px;
  border:1px solid #8a86a4;
  border-radius:10px 7px 9px 6px;
  background:#fffdf4;
  color:#6c6785;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  box-shadow:1px 2px 0 rgba(82,66,132,.1);
}
.game-filters button.active{
  border-color:#65549a;
  background:#e9e2ff;
  color:#4f4082;
  box-shadow:inset 1px 1px 0 #fff,2px 3px 0 rgba(82,66,132,.14);
}
.game-card-grid{
  --game-card-height:clamp(128px,8.2vw,150px);
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:min-content;
  align-content:space-between;
  column-gap:var(--game-center-gutter);
  row-gap:clamp(12px,1.15vw,19px);
  padding:clamp(88px,5.5vw,104px) var(--game-page-pad) 76px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-color:#b5acd3 transparent;
  scrollbar-width:thin;
}
.game-archive-spacer{
  min-height:var(--game-card-height);
  height:var(--game-card-height);
  pointer-events:none;
}
.game-card{
  position:relative;
  min-width:0;
  min-height:0;
  height:var(--game-card-height);
  display:grid;
  grid-template-columns:clamp(94px,27%,116px) minmax(0,1fr);
  padding:0;
  border:1px solid rgba(199,178,139,.52);
  border-radius:15px;
  background:rgba(255,255,255,.88);
  color:#273a70;
  text-align:left;
  box-shadow:3px 4px 0 rgba(35,49,89,.08);
  overflow:hidden;
  transform:rotate(-.25deg);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.game-archive-spacer + .game-card{
  align-self:end;
}
@media (min-width:861px){
  .game-card-grid .game-card:nth-child(2){grid-column:1;grid-row:2;}
  .game-card-grid .game-card:nth-child(3){grid-column:1;grid-row:3;}
  .game-card-grid .game-card:nth-child(4){grid-column:1;grid-row:4;}
  .game-card-grid .game-card:nth-child(5){grid-column:2;grid-row:1;}
  .game-card-grid .game-card:nth-child(6){grid-column:2;grid-row:2;}
  .game-card-grid .game-card:nth-child(7){grid-column:2;grid-row:3;}
  .game-card-grid .game-card:nth-child(8){grid-column:2;grid-row:4;}
}
.game-card:nth-child(2n+1){transform:rotate(.35deg);}
.game-card:hover,
.game-card:focus-within{
  z-index:2;
  border-color:#9a3f61;
  box-shadow:0 0 0 3px rgba(255,198,218,.46),5px 7px 0 rgba(125,52,82,.13);
  transform:translateY(-3px) rotate(0deg);
}
.game-card-cover{
  position:relative;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  display:grid;
  place-items:center;
  padding:6px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.8),transparent 52%),
    #eee9ff;
  overflow:hidden;
}
.game-card-cover img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:8px 5px 7px 4px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(101,84,154,.18),2px 2px 0 rgba(35,49,89,.08);
}
.game-card-status{
  display:inline-flex;
  align-items:center;
  min-height:19px;
  padding:2px 7px 1px;
  border:1px solid #7aaa83;
  border-radius:9px;
  background:#e3f4de;
  color:#356c43;
  font-size:10px;
  font-weight:700;
  line-height:1;
}
.game-card.status-completed .game-card-status{border-color:#d493aa;background:#ffe4ec;color:#8a3556;}
.game-card.status-dropped .game-card-status{border-color:#aeb3bf;background:#edf0f4;color:#5e6575;}
.game-card-copy{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:clamp(9px,.8vw,13px);
}
.game-card-copy strong,
.game-card-copy small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.game-card-copy strong{
  color:#273a70;
  font-size:clamp(16px,1.08vw,20px);
  line-height:1.06;
}
.game-card-copy.has-edit strong{
  max-width:calc(100% - 44px);
}
.game-card-copy small{
  margin-top:5px;
  color:#817a93;
  font-family:"Courier New",monospace;
  font-size:9px;
}
.game-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:6px;
}
.game-card-platform,
.game-card-genre{
  display:inline-flex;
  align-items:center;
  min-height:19px;
  padding:2px 7px 1px;
  border:1px solid #d9bf71;
  border-radius:9px;
  background:#fff1bd;
  color:#806425;
  font-size:10px;
  font-weight:700;
  line-height:1;
}
.game-card-genre{
  border-color:#a7c9e2;
  background:#e8f4ff;
  color:#426783;
}
.game-card-review{
  width:100%;
  margin:6px 0 0;
  overflow:hidden;
  color:#68647d;
  font-size:clamp(11px,.78vw,13px);
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.game-card-bottom{
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
  margin-top:auto;
}
.game-card-rating{
  flex:0 0 auto;
  margin-top:0;
  color:#f0a526;
  font-family:"Courier New",monospace;
  font-size:clamp(15px,1.1vw,19px);
  font-weight:bold;
  letter-spacing:.025em;
  line-height:1;
}
.game-card-rating.is-empty{
  color:#aaa7a0;
  font-family:inherit;
  font-size:12px;
}
.game-card-period{
  margin:0 !important;
  text-align:right;
}
.game-card-edit{
  position:absolute;
  right:8px;
  top:7px;
  min-height:25px;
  padding:2px 8px;
  border:1px solid #65549a;
  border-radius:8px;
  background:#eee9ff;
  color:#59488f;
  font-family:inherit;
  font-size:11px;
  font-weight:bold;
  box-shadow:none;
}
.game-grid-empty{
  grid-column:1 / -1;
  align-self:center;
  padding:60px 14px;
  border:2px dashed rgba(101,84,154,.4);
  border-radius:16px 10px 15px 9px;
  background:rgba(238,233,255,.45);
  color:#817a93;
  font-size:16px;
  font-weight:700;
  text-align:center;
}
.game-page-number{
  position:absolute;
  bottom:6px;
  z-index:4;
  transform:translateX(-50%);
  color:#65549a;
  font-family:"Courier New",monospace;
  min-width:48px;
  font-size:11px;
  font-weight:bold;
  text-align:center;
}
.game-page-number.is-left{left:25%;}
.game-page-number.is-right{left:75%;}
.game-page-turn-controls button{
  position:absolute;
  bottom:3px;
  z-index:5;
  width:27px;
  height:25px;
  min-height:25px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  background:transparent;
  color:#65549a;
  font-family:"Courier New",monospace;
  font-size:21px;
  line-height:1;
  box-shadow:none;
}
.game-page-turn-controls .game-page-prev{
  right:calc(50% + var(--game-center-gutter)/2);
}
.game-page-turn-controls .game-page-next{
  left:calc(50% + var(--game-center-gutter)/2);
}
.game-page-turn-controls button:disabled{
  opacity:.25;
}
.game-editor-backdrop{
  position:fixed;
  inset:0;
  z-index:19000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(28,43,79,.42);
  opacity:0;
  transition:opacity .12s ease;
}
.game-editor-backdrop[hidden]{display:none !important;}
.game-editor-backdrop.is-open{opacity:1;}
.game-editor-window{
  position:relative;
  width:min(780px,calc(100% - 24px));
  max-height:calc(100% - 24px);
  display:flex;
  flex-direction:column;
  border:5px solid var(--frame);
  border-radius:0;
  background:var(--body-bg);
  clip-path:polygon(
    14px 0,
    calc(100% - 14px) 0,
    calc(100% - 14px) 4px,
    calc(100% - 8px) 4px,
    calc(100% - 8px) 8px,
    calc(100% - 4px) 8px,
    calc(100% - 4px) 12px,
    100% 12px,
    100% 100%,
    0 100%,
    0 12px,
    4px 12px,
    4px 8px,
    8px 8px,
    8px 4px,
    14px 4px
  );
  box-shadow:inset 2px 2px 0 #6f9bff,inset -2px -2px 0 #0b2f78;
  filter:drop-shadow(6px 6px 0 rgba(10,22,52,.34));
  overflow:visible;
  font-family:"Galmuri11","Galmuri9","DotGothic16","Courier New",monospace;
}
.game-editor-window::before{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:5;
  pointer-events:none;
  background:
    linear-gradient(var(--frame),var(--frame)) left 14px top 0 / calc(100% - 28px) 5px no-repeat,
    linear-gradient(var(--frame),var(--frame)) left 8px top 4px / 6px 5px no-repeat,
    linear-gradient(var(--frame),var(--frame)) left 4px top 8px / 4px 5px no-repeat,
    linear-gradient(var(--frame),var(--frame)) left 0 top 12px / 5px calc(100% - 12px) no-repeat,
    linear-gradient(var(--frame),var(--frame)) right 8px top 4px / 6px 5px no-repeat,
    linear-gradient(var(--frame),var(--frame)) right 4px top 8px / 4px 5px no-repeat,
    linear-gradient(var(--frame),var(--frame)) right 0 top 12px / 5px calc(100% - 12px) no-repeat;
}
.game-editor-titlebar{
  height:38px;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px 12px 4px 18px;
  border-radius:0;
  border-bottom:5px solid var(--frame);
  background:
    linear-gradient(#6f9bff,#6f9bff) left 14px top 0 / calc(100% - 28px) 3px no-repeat,
    linear-gradient(#6f9bff,#6f9bff) left 8px top 4px / 6px 3px no-repeat,
    linear-gradient(#6f9bff,#6f9bff) left 4px top 8px / 4px 3px no-repeat,
    linear-gradient(#1c4ca8,#1c4ca8) right 8px top 4px / 6px 3px no-repeat,
    linear-gradient(#1c4ca8,#1c4ca8) right 4px top 8px / 4px 3px no-repeat,
    linear-gradient(180deg,var(--chrome-hi) 0%,var(--chrome) 48%,var(--chrome-dk) 100%);
  color:var(--white);
  font-family:inherit;
  font-size:18px;
  font-weight:bold;
  text-shadow:2px 2px 0 var(--chrome-dk);
}
.game-editor-titlebar span{
  flex:1;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
}
.game-editor-titlebar button{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  width:26px;
  height:25px;
  min-height:25px;
  flex:0 0 26px;
  padding:0;
  border:0;
  border-radius:0;
  background-color:transparent;
  background-image:
    linear-gradient(#eef4ff,#eef4ff),
    linear-gradient(#8aa7e6,#8aa7e6),
    linear-gradient(#eef4ff,#eef4ff),
    linear-gradient(#b8c9ef,#b8c9ef),
    linear-gradient(var(--red),var(--red));
  background-position:left 3px top 0,left 3px bottom 0,left 0 top 3px,right 0 top 3px,left 3px top 3px;
  background-size:calc(100% - 6px) 3px,calc(100% - 6px) 3px,3px calc(100% - 6px),3px calc(100% - 6px),calc(100% - 6px) calc(100% - 6px);
  background-repeat:no-repeat;
  color:transparent;
  font-size:0;
  line-height:1;
  box-shadow:none;
  overflow:hidden;
}
.game-editor-titlebar button::before,
.game-editor-titlebar button::after{
  content:"";
  position:absolute;
  left:6px;
  top:11px;
  width:14px;
  height:3px;
  background:#eef4ff;
  box-shadow:1px 1px 0 #7b1d16,0 -1px 0 rgba(255,255,255,.35);
}
.game-editor-titlebar button::before{transform:rotate(45deg);}
.game-editor-titlebar button::after{transform:rotate(-45deg);}
.game-editor-body{
  min-height:0;
  padding:14px;
  overflow-y:auto;
  background:var(--panel-lt);
}
.game-search-panel{
  position:relative;
  z-index:20;
  padding:11px;
  border:2px solid #718cc4;
  background:#fffdf4;
  box-shadow:inset 2px 2px 0 #fff,3px 3px 0 rgba(30,74,168,.12);
}
.game-search-panel > label{
  display:block;
  margin-bottom:5px;
  color:#273a70;
  font-size:16px;
  font-weight:700;
}
.game-search-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px;
}
.game-search-row input,
.game-editor-fields input,
.game-editor-fields select,
.game-editor-fields textarea{
  width:100%;
  min-width:0;
  border:2px solid var(--frame);
  border-radius:0;
  background:#fff;
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  outline:none;
  box-shadow:inset 2px 2px 0 #fff;
}
.game-search-row input,
.game-editor-fields input,
.game-editor-fields select{
  height:34px;
  padding:4px 7px;
}
.game-search-row input:focus,
.game-editor-fields input:focus,
.game-editor-fields select:focus,
.game-editor-fields textarea:focus{
  border-color:var(--frame);
  outline:2px solid #ffda6b;
  box-shadow:inset 2px 2px 0 #fff;
}
.game-search-row button{
  min-width:68px;
  min-height:34px;
  border:2px solid #1e4aa8;
  background:#dce8fb;
  color:#1e4aa8;
  font-family:inherit;
  font-weight:700;
}
.game-search-results{
  position:absolute;
  left:11px;
  right:11px;
  top:calc(100% - 2px);
  z-index:30;
  max-height:218px;
  margin-top:0;
  padding:5px;
  border:2px inset #b7c7df;
  background:#fff;
  box-shadow:5px 7px 0 rgba(10,22,52,.2);
  overflow-y:auto;
}
.game-search-result{
  width:100%;
  min-height:62px;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:9px;
  align-items:center;
  padding:5px;
  border:1px solid transparent;
  background:#fff;
  color:#263d7c;
  text-align:left;
  box-shadow:none;
}
.game-search-result + .game-search-result{border-top-color:#d8e1ef;}
.game-search-result:hover,
.game-search-result.active{
  border-color:#718cc4;
  background:#e9f1fc;
}
.game-search-result-cover{
  width:42px;
  height:52px;
  overflow:hidden;
}
.game-search-result-copy,
.game-search-result-copy strong,
.game-search-result-copy small{
  display:block;
  min-width:0;
}
.game-search-result-copy strong{
  overflow:hidden;
  color:#273a70;
  font-size:15px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.game-search-result-copy small{
  margin-top:3px;
  color:#777191;
  font-family:"Courier New",monospace;
  font-size:9px;
  line-height:1.25;
}
.game-search-empty{
  margin:0;
  padding:18px;
  color:#777191;
  text-align:center;
}
.game-selected-catalog{
  display:grid;
  grid-template-columns:62px 1fr;
  gap:12px;
  align-items:center;
  margin-top:10px;
  padding:8px 11px;
  border:2px dashed #65549a;
  background:#eee9ff;
}
.game-selected-catalog[hidden]{display:none !important;}
.game-selected-cover{
  width:62px;
  height:76px;
}
.game-selected-cover-frame{
  width:100%;
  height:100%;
  overflow:hidden;
}
.game-selected-catalog > div:last-child{
  min-width:0;
}
.game-selected-catalog span,
.game-selected-catalog strong,
.game-selected-catalog small{
  display:block;
}
.game-selected-catalog span{
  color:#7d6faa;
  font-size:11px;
  font-weight:700;
}
.game-selected-catalog strong{
  margin-top:2px;
  color:#3f3472;
  font-size:18px;
  line-height:1.05;
}
.game-selected-catalog small{
  margin-top:3px;
  color:#777191;
  font-family:"Courier New",monospace;
  font-size:9px;
}
.game-editor-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 12px;
  margin-top:11px;
}
.game-editor-fields label{
  min-width:0;
}
.game-editor-fields label > span{
  display:block;
  margin-bottom:3px;
  color:#3d5490;
  font-size:13px;
  font-weight:700;
}
.game-editor-fields .game-field-wide{
  grid-column:1 / -1;
}
.game-editor-fields textarea{
  min-height:78px;
  padding:7px;
  resize:vertical;
}
.game-editor-fields input.is-date-synced{
  animation:game-date-synced .7s steps(2,end);
}
@keyframes game-date-synced{
  0%,100%{background:#fff;outline-color:transparent;}
  35%,75%{background:#fff3bd;outline:3px solid #ffda6b;}
}
.game-editor-status{
  margin:9px 0 0;
  padding:6px 8px;
  border-left:4px solid #438058;
  background:#e3f4de;
  color:#356c43;
  font-size:13px;
  font-weight:700;
}
.game-editor-status.is-error{
  border-color:#c23b2e;
  background:#ffe4ec;
  color:#963829;
}
.game-editor-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
  padding-top:10px;
  border-top:2px solid #b9cae3;
}
.game-editor-actions button{
  min-width:78px;
  min-height:32px;
  font-family:inherit;
  font-weight:700;
}
.game-editor-actions .game-delete-button{
  margin-right:auto;
  border-color:#9d4037;
  background:#ffe0dc;
  color:#91372e;
}
.game-editor-actions .game-save-button{
  border-color:#3f7d46;
  background:#e3f4de;
  color:#315f37;
}
.game-editor-window.is-busy{filter:saturate(.8);}

@media (min-width:861px) and (max-height:1100px){
  .game-card-grid{
    --game-card-height:clamp(136px,13.5vh,148px);
    row-gap:clamp(8px,1vh,11px);
    padding-bottom:68px;
  }
  .game-card-copy{
    padding:9px 11px;
  }
  .game-card-tags,
  .game-card-review{
    margin-top:4px;
  }
}

.diary-view{
  grid-template-columns:1fr 1fr;
  font-family:"Gaegu","Nanum Pen Script","Comic Sans MS","Marker Felt",cursive;
}
.diary-drawing-toolbar{
  position:absolute;
  left:auto;
  right:calc(100% + clamp(48px,3.2vw,62px));
  top:clamp(28px,4vh,52px);
  z-index:70;
  display:flex;
  width:clamp(108px,7.4vw,132px);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:none;
  transform:none;
  font-family:"Gaegu","Nanum Pen Script","Comic Sans MS",cursive;
  pointer-events:auto;
}
.diary-drawing-toolbar[hidden],
.drawing-tools[hidden]{
  display:none !important;
}
.drawing-toggle,
.drawing-tools button{
  min-height:34px;
  padding:4px 10px;
  border:2px solid #477fba;
  border-radius:12px 8px 11px 7px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.9),transparent 46%),
    #fff7d9;
  color:#315b91;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  line-height:1;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.9),
    3px 4px 0 rgba(49,91,145,.17);
}
.drawing-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  white-space:nowrap;
}
.drawing-toggle svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.drawing-toggle[aria-pressed="true"]{
  border-color:#9a3f61;
  background:#ffe9de;
  color:#9a3f61;
}
.drawing-tools{
  display:flex;
  width:100%;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-height:42px;
  padding:4px 7px;
  border:2px dashed rgba(71,127,186,.68);
  border-radius:15px 10px 14px 9px;
  background:rgba(255,253,239,.96);
  box-shadow:4px 5px 0 rgba(10,22,52,.14);
  white-space:normal;
}
.drawing-tools button{
  width:100%;
  min-height:30px;
  padding:3px 8px;
  border-width:1px;
  border-radius:8px 5px 7px 4px;
  box-shadow:inset 1px 1px 0 #fff,2px 2px 0 rgba(49,91,145,.12);
  font-size:14px;
}
.drawing-tools button.active{
  border-color:#9a3f61;
  background:#ffe9de;
  color:#9a3f61;
}
.drawing-tools button:disabled{
  opacity:.45;
}
.drawing-tools .drawing-save{
  border-color:#3f7d46;
  background:#e8f2e3;
  color:#315f37;
}
.drawing-color,
.drawing-width{
  width:100%;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#7d3452;
  font-size:14px;
  font-weight:700;
}
.drawing-width{
  flex-direction:column;
  padding:5px 4px;
  border:1px dashed transparent;
  border-radius:8px;
}
.drawing-width.active{
  border-color:rgba(154,63,97,.55);
  background:#fff0e8;
}
.drawing-color input{
  width:30px;
  height:28px;
  padding:2px;
  border:1px solid #477fba;
  border-radius:7px;
  background:#fff;
}
.drawing-width input{
  width:94px;
  max-width:100%;
  accent-color:#477fba;
}
.diary-drawing-layer{
  position:absolute;
  inset:0;
  z-index:50;
  overflow:hidden;
  pointer-events:none;
}
.diary-view.is-drawing .diary-drawing-layer{
  pointer-events:auto;
  touch-action:none;
}
.diary-drawing-layer .konvajs-content,
.diary-drawing-layer canvas{
  display:block !important;
}
.diary-calendar,
.diary-paper{
  position:relative;
  min-width:0;
  min-height:0;
  height:100%;
}
.diary-calendar{
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  font-weight:700;
  letter-spacing:-.015em;
}
.diary-calendar::before{
  display:none;
}
.diary-paper::before{
  display:none;
}
.diary-paper::after{
  display:none;
}
.cal-window{
  position:absolute;
  left:clamp(18px,2.4vw,42px);
  right:clamp(18px,2.4vw,42px);
  top:28px;
  bottom:20px;
  min-height:0;
  padding:0;
  display:flex;
  flex-direction:column;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  transform:none;
}
.cal-window::before{
  display:none;
}
.cal-window::after{
  display:none;
}
.cal-top{
  height:clamp(34px,2.9vw,46px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:0;
  margin:0 0 14px;
  background:transparent;
  box-shadow:none;
}
.cal-top button{
  --month-button-accent:#c96d8d;
  width:38px;
  height:34px;
  min-height:34px;
  padding:0;
  border:2px solid var(--month-button-accent);
  border-radius:50% 44% 48% 42%;
  background:
    linear-gradient(135deg,rgba(255,255,255,.88),transparent 48%),
    #fff7d9;
  color:var(--month-button-accent);
  font-size:22px;
  font-weight:bold;
  text-shadow:1px 1px 0 #fff;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.88),
    3px 4px 0 rgba(125,52,82,.16);
  transform:rotate(-3deg);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
#book-next-month{
  --month-button-accent:#477fba;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.88),
    3px 4px 0 rgba(49,91,145,.16);
  transform:rotate(3deg);
}
.cal-top button:hover{
  filter:brightness(1.04) saturate(1.08);
  transform:translateY(-2px) rotate(0deg);
}
.cal-top button:active{
  transform:translate(2px,2px) rotate(0deg);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.88),1px 1px 0 rgba(49,91,145,.16);
}
.cal-top button:focus-visible{
  outline:3px solid rgba(255,255,255,.95);
  outline-offset:3px;
}
#book-month-label{
  position:relative;
  min-width:clamp(190px,17vw,238px);
  padding:8px 36px 7px;
  border:2px dashed #c96d8d;
  border-radius:17px 11px 16px 10px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.76),transparent 48%),
    rgba(255,247,217,.96);
  color:#7d3452;
  font-family:"Gaegu","Nanum Pen Script","Comic Sans MS",cursive;
  font-size:clamp(24px,2vw,31px);
  line-height:1.05;
  text-align:center;
  text-shadow:1px 1px 0 #fff;
  box-shadow:
    0 0 0 3px rgba(201,154,46,.22),
    4px 5px 0 rgba(61,84,144,.12);
  transform:rotate(-1deg);
}
#book-month-label::before,
#book-month-label::after{
  position:absolute;
  top:50%;
  color:#477fba;
  font-size:15px;
  line-height:1;
  transform:translateY(-50%);
  text-shadow:0 1px 0 #fff;
}
#book-month-label::before{
  content:"✦";
  left:13px;
}
#book-month-label::after{
  content:"✦";
  right:13px;
}
.book-weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  padding:0;
  border-bottom:2px solid rgba(44,102,189,.55);
}
.book-weekdays span{
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#2c66bd;
  font-size:14px;
  font-weight:bold;
  text-shadow:1px 1px 0 #fff;
}
.book-calendar{
  position:relative;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-template-rows:repeat(6,minmax(0,1fr));
  flex:1;
  min-height:0;
  margin:0;
  border-left:2px solid rgba(44,102,189,.42);
  border-top:0;
  background:transparent;
}
.book-day{
  position:relative;
  z-index:1;
  min-width:0;
  height:100%;
  min-height:0;
  padding:4px;
  display:flex;
  flex-direction:column;
  gap:4px;
  border:0;
  border-right:2px solid rgba(44,102,189,.35);
  border-bottom:2px solid rgba(44,102,189,.22);
  background:transparent;
  color:#1d2e5d;
  text-align:left;
  box-shadow:none;
  overflow:hidden;
}
.book-day.is-outside{
  background:rgba(255,255,255,.18);
  color:#9da9bf;
}
.book-day.is-today{
  background:rgba(141,231,223,.22);
}
.book-day.is-active{
  background:rgba(255,248,198,.55);
  box-shadow:inset 0 0 0 3px rgba(201,154,46,.58);
}
.book-day.is-entry-range{
  background:transparent;
}
.book-day.is-entry-range.is-active{
  background:rgba(255,248,198,.58);
  box-shadow:none;
}
.book-day.is-entry-range:not(.is-entry-range-segment-end){
  border-right-color:transparent;
}
.book-day.is-entry-range-start{
  box-shadow:none;
}
.book-day.is-entry-range-end{
  box-shadow:none;
}
.book-day.is-entry-range-start.is-entry-range-end{
  box-shadow:none;
}
.book-day.is-entry-range.is-active.is-entry-range-start{
  box-shadow:none;
}
.book-day.is-entry-range.is-active.is-entry-range-end{
  box-shadow:none;
}
.book-day.has-entry::after{
  display:none;
}
.calendar-range-layer{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-template-rows:repeat(6,minmax(0,1fr));
  pointer-events:none;
}
.calendar-range-title{
  width:auto;
  min-width:0;
  min-height:0;
  height:auto;
  align-self:stretch;
  justify-self:stretch;
  margin:26px 4px 4px;
  padding:0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:2px dashed #2c66bd;
  border-radius:8px;
  background:transparent;
  color:#1e4aa8;
  font-size:clamp(12px,.82vw,15px);
  line-height:1.2;
  font-weight:bold;
  text-align:center;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-shadow:1px 1px 0 rgba(255,255,255,.85);
  box-shadow:none;
  box-sizing:border-box;
}
.calendar-range-title:not(.is-segment-start){
  border-left:0;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}
.calendar-range-title:not(.is-segment-end){
  border-right:0;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.calendar-range-title.is-active{
  background:transparent;
  box-shadow:none;
}
.calendar-range-title.is-empty{
  color:transparent;
}
.book-day span{
  position:relative;
  z-index:1;
  display:inline-block;
  min-width:18px;
  color:inherit;
  font-size:13px;
  font-weight:bold;
}
.book-day-title{
  position:absolute;
  inset:26px 4px 4px;
  display:flex;
  width:auto;
  align-items:center;
  justify-content:center;
  max-width:none;
  margin:0;
  padding:0 4px;
  border:2px dashed #2c66bd;
  border-radius:8px;
  background:transparent;
  color:#1e4aa8;
  font-size:clamp(11px,.78vw,14px);
  line-height:1.35;
  font-weight:bold;
  text-align:center;
  white-space:normal;
  overflow:hidden;
  overflow-wrap:break-word;
  box-sizing:border-box;
}
.book-day.sun span{color:#c23b2e;}
.book-day.sat span{color:#2a6fd1;}
.book-day.is-today span{
  color:#fff;
  background:#2a9be7;
  padding:1px 3px;
}
.xp-note-window{
  position:absolute;
  left:clamp(20px,2.6vw,48px);
  right:clamp(20px,2.6vw,48px);
  top:28px;
  bottom:58px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  transform:none;
}
.xp-note-window::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:94px;
  bottom:0;
  background-image:linear-gradient(transparent 0 23px,rgba(157,183,228,.34) 23px 24px);
  background-size:100% 24px;
  pointer-events:none;
  z-index:1;
}
.xp-note-window::after{
  display:none;
}
.tbar{
  position:absolute;
  left:0;
  right:116px;
  top:6px;
  height:34px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0;
  border:0;
  border-bottom:2px dashed rgba(44,102,189,.42);
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  transform:none;
  z-index:3;
}
.tbar .tt{
  flex:1;
  font-size:19px;
  line-height:1;
  color:#2c66bd;
  text-shadow:1px 1px 0 rgba(255,255,255,.85);
  white-space:nowrap;
  overflow:hidden;
}
.tbar .tt::before{
  content:"DATE";
  display:inline-block;
  margin-right:10px;
  color:var(--red);
  font-size:15px;
}
.xp-note-window.is-admin .tbar .tt{
  display:none;
}
.tbar .tbtn{
  display:none;
}
.tbtn{
  position:relative;
  width:26px;
  height:25px;
  min-height:25px;
  flex:0 0 26px;
  border:0;
  background-color:transparent;
  --btn-fill:#3869cf;
  --btn-top:#eef4ff;
  --btn-right:#b8c9ef;
  --btn-bottom:#8aa7e6;
  --btn-left:#eef4ff;
  background-image:
    linear-gradient(var(--btn-top),var(--btn-top)),
    linear-gradient(var(--btn-bottom),var(--btn-bottom)),
    linear-gradient(var(--btn-left),var(--btn-left)),
    linear-gradient(var(--btn-right),var(--btn-right)),
    linear-gradient(var(--btn-fill),var(--btn-fill));
  background-position:left 3px top 0,left 3px bottom 0,left 0 top 3px,right 0 top 3px,left 3px top 3px;
  background-size:calc(100% - 6px) 3px,calc(100% - 6px) 3px,3px calc(100% - 6px),3px calc(100% - 6px),calc(100% - 6px) calc(100% - 6px);
  background-repeat:no-repeat;
  color:transparent;
  font-size:0;
  box-shadow:none;
}
.tbtn::before{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  bottom:6px;
  height:3px;
  background:#eef4ff;
  box-shadow:1px 1px 0 #153f96;
}
.tbtn.max::before{
  left:7px;
  right:7px;
  top:7px;
  bottom:auto;
  height:10px;
  background:transparent;
  border:3px solid #eef4ff;
}
.tbtn.min::after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  bottom:10px;
  height:2px;
  background:#b9d0ff;
}
.tbtn.close{--btn-fill:var(--red);}
.tbtn.close::before,
.tbtn.close::after{
  content:"";
  position:absolute;
  left:6px;
  top:11px;
  width:14px;
  height:3px;
  background:#eef4ff;
  box-shadow:1px 1px 0 #7b1d16;
}
.tbtn.close::before{transform:rotate(45deg);}
.tbtn.close::after{transform:rotate(-45deg);}
.note-menu{
  position:absolute;
  left:auto;
  top:0;
  right:0;
  width:74px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:0;
  background:transparent;
  border:0;
  color:var(--ink);
  font-size:13px;
  box-shadow:none;
  z-index:4;
}
.note-menu span{
  display:none;
}
.note-menu button{
  min-height:30px;
  width:72px;
  margin-left:0;
  border:2px solid var(--frame);
  padding:2px 8px;
  background:rgba(255,248,198,.84);
  font-size:12px;
  line-height:1;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.9),2px 2px 0 rgba(10,22,52,.1);
}
.note-period{
  flex:1;
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--red);
  font-size:14px;
  font-weight:bold;
}
.note-period label{
  display:flex;
  align-items:center;
  gap:6px;
}
.note-period input{
  width:138px;
  height:26px;
  border:0;
  border-bottom:2px solid rgba(44,102,189,.55);
  background:transparent;
  color:var(--ink);
  font-size:14px;
  outline:0;
}
.period-separator{
  color:#2c66bd;
}
.note-tools{
  position:absolute;
  left:0;
  right:0;
  top:52px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  padding:0;
  border:0;
  background:transparent;
  z-index:3;
}
.xp-note-window.is-admin .note-tools{
  top:52px;
}
.note-tools input,
.note-tools textarea{
  border:0;
  border-bottom:2px solid rgba(44,102,189,.55);
  background:transparent;
  color:var(--ink);
  outline:0;
  box-shadow:none;
}
.note-tools input{
  width:100%;
  height:34px;
  padding:4px 8px;
  font-size:17px;
}
.note-tools label{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  gap:6px;
  color:var(--red);
  font-size:16px;
  font-weight:bold;
}
.entry-photo-area{
  position:absolute;
  left:50%;
  right:auto;
  top:96px;
  width:min(calc(340px * var(--board-content-scale,1)),58%);
  height:calc(250px * var(--board-content-scale,1));
  display:block;
  transform:translateX(-50%);
  z-index:3;
}
.xp-note-window.is-admin .entry-photo-area{
  top:108px;
}
.entry-photo-area[hidden]{
  display:none;
}
.entry-photo-print{
  position:relative;
  width:100%;
  height:100%;
  padding:12px;
  background:#fff;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.9),
    0 0 0 4px rgba(44,102,189,.28),
    6px 8px 0 rgba(10,22,52,.12);
}
.entry-photo-print::before,
.entry-photo-print::after{
  content:"";
  position:absolute;
  width:74px;
  height:32px;
  z-index:2;
  background:
    linear-gradient(90deg,rgba(255,255,255,.28) 0 2px,transparent 2px 14px),
    rgba(141,231,223,.72);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
}
.entry-photo-print::before{
  top:-14px;
  left:-13px;
  transform:rotate(-7deg);
}
.entry-photo-print::after{
  right:-14px;
  bottom:-10px;
  transform:rotate(-8deg);
}
#book-photo-clear{
  position:absolute;
  right:-18px;
  top:50%;
  width:28px;
  height:28px;
  min-height:28px;
  padding:0;
  border:2px solid var(--frame);
  background:#d84338;
  color:#fff;
  font-family:inherit;
  font-size:18px;
  line-height:1;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.5),2px 2px 0 rgba(10,22,52,.16);
  transform:translateY(-50%);
  z-index:5;
}
#book-entry-photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  image-rendering:auto;
}
.entry-photo-actions{
  position:absolute;
  right:82px;
  top:0;
  width:auto;
  display:flex;
  flex-direction:row;
  gap:8px;
  z-index:4;
}
.entry-photo-actions button{
  min-height:30px;
  width:92px;
  border:2px solid var(--frame);
  background:rgba(255,248,198,.86);
  font-size:12px;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.9),2px 2px 0 rgba(10,22,52,.1);
}
#book-note-input{
  position:absolute;
  left:0;
  right:0;
  top:94px;
  bottom:0;
  display:block;
  width:auto;
  height:auto;
  resize:none;
  border:0;
  outline:0;
  padding:0 4px 12px;
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  font-size:17px;
  line-height:24px;
  box-shadow:none;
  z-index:2;
  scrollbar-width:thin;
  scrollbar-color:#96c5e8 rgba(255,253,244,.72);
}
#book-note-input::-webkit-scrollbar{
  width:13px;
}
#book-note-input::-webkit-scrollbar-track{
  background:rgba(255,253,244,.72);
  border-left:2px solid rgba(157,183,228,.34);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.75);
}
#book-note-input::-webkit-scrollbar-thumb{
  min-height:38px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.55),transparent 34%),
    #b9d7f0;
  border:2px solid #7fb0d8;
  box-shadow:inset 1px 1px 0 #f8fbff,2px 2px 0 rgba(10,22,52,.08);
}
#book-note-input::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(90deg,rgba(255,255,255,.55),transparent 34%),
    #96c5e8;
}
.xp-note-window.has-entry-photo #book-note-input{
  top:calc(110px + (250px * var(--board-content-scale,1)));
}
.xp-note-window.is-admin.has-entry-photo #book-note-input{
  top:calc(122px + (250px * var(--board-content-scale,1)));
}
.xp-note-window.has-entry-photo::before{
  top:calc(110px + (250px * var(--board-content-scale,1)));
}
.xp-note-window.is-admin.has-entry-photo::before{
  top:calc(122px + (250px * var(--board-content-scale,1)));
}
.entry-nav{
  position:absolute;
  left:0;
  right:0;
  bottom:-48px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  z-index:4;
}
.entry-nav button{
  --entry-button-accent:#c96d8d;
  --entry-button-shadow:rgba(125,52,82,.18);
  position:relative;
  width:58px;
  height:36px;
  min-height:36px;
  padding:0;
  border:2px solid var(--entry-button-accent);
  border-radius:13px 8px 12px 7px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.86),transparent 44%),
    #fff7d9;
  color:var(--entry-button-accent);
  font-size:22px;
  font-weight:bold;
  line-height:1;
  text-shadow:0 1px 0 #fff;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.9),
    3px 4px 0 var(--entry-button-shadow);
  transform:rotate(-1.5deg);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.entry-nav button::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px dashed currentColor;
  border-radius:8px 5px 7px 4px;
  opacity:.55;
  pointer-events:none;
}
#book-next-entry{
  --entry-button-accent:#477fba;
  --entry-button-shadow:rgba(49,91,145,.18);
  border-radius:8px 13px 7px 12px;
  transform:rotate(1.5deg);
}
.entry-nav button:not(:disabled):hover{
  filter:brightness(1.035) saturate(1.08);
  transform:translateY(-2px) rotate(0deg);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.92),
    4px 6px 0 var(--entry-button-shadow);
}
.entry-nav button:not(:disabled):active{
  transform:translate(2px,2px) rotate(0deg);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.9),
    1px 2px 0 var(--entry-button-shadow);
}
.entry-nav button:disabled{
  color:#8f9bae;
  border-color:#9ba8bd;
  opacity:.58;
  filter:grayscale(.25);
}
#book-entry-nav-label{
  min-width:108px;
  padding:3px 10px 2px;
  border-bottom:2px dashed rgba(71,127,186,.48);
  border-radius:8px;
  background:rgba(255,253,239,.76);
  text-align:center;
  color:#315b91;
  font-size:19px;
  font-weight:700;
  line-height:1.2;
  text-shadow:0 1px 0 #fff;
}
#book-note-input[readonly],
#book-title-input[readonly]{
  color:#263d78;
  background:transparent;
}
.book-toast{
  position:fixed;
  left:50%;
  top:clamp(18px,3.2vh,34px);
  z-index:30000;
  min-width:188px;
  max-width:calc(100vw - 32px);
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 14px;
  border:3px solid var(--frame);
  background:
    linear-gradient(180deg,rgba(255,253,244,.97),rgba(225,240,212,.97));
  color:#1e4aa8;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.82),
    inset -2px -2px 0 rgba(127,176,216,.35),
    5px 6px 0 rgba(10,22,52,.18);
  opacity:0;
  transform:translate(-50%,-12px) scale(.98);
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
.book-toast[hidden]{
  display:none !important;
}
.book-toast.is-visible{
  opacity:1;
  transform:translate(-50%,0) scale(1);
}
.book-toast span{
  width:36px;
  min-width:36px;
  height:22px;
  display:grid;
  place-items:center;
  border:3px double #c23b2e;
  background:rgba(255,248,198,.78);
  color:#c23b2e;
  font-size:12px;
  font-weight:bold;
  line-height:1;
  transform:rotate(-5deg);
}
.book-toast b{
  color:#1e4aa8;
  font-size:14px;
  line-height:1.15;
  text-shadow:1px 1px 0 rgba(255,255,255,.85);
}
.login-modal{
  position:absolute;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(20,42,78,.08);
}
.login-modal[hidden]{
  display:none !important;
}
.xp-login-window{
  position:relative;
  width:390px;
  max-width:calc(100% - 40px);
  border:5px solid var(--frame);
  border-radius:0;
  background:var(--panel);
  overflow:visible;
  clip-path:polygon(
    14px 0,
    calc(100% - 14px) 0,
    calc(100% - 14px) 4px,
    calc(100% - 8px) 4px,
    calc(100% - 8px) 8px,
    calc(100% - 4px) 8px,
    calc(100% - 4px) 12px,
    100% 12px,
    100% 100%,
    0 100%,
    0 12px,
    4px 12px,
    4px 8px,
    8px 8px,
    8px 4px,
    14px 4px
  );
  box-shadow:
    inset 2px 2px 0 #6f9bff,
    inset -2px -2px 0 #0b2f78;
  filter:drop-shadow(6px 6px 0 rgba(10,22,52,.34));
}
.xp-login-window::before{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:5;
  pointer-events:none;
  background:
    linear-gradient(var(--frame),var(--frame)) left 14px top 0 / calc(100% - 28px) 5px no-repeat,
    linear-gradient(var(--frame),var(--frame)) left 8px top 4px / 6px 5px no-repeat,
    linear-gradient(var(--frame),var(--frame)) left 4px top 8px / 4px 5px no-repeat,
    linear-gradient(var(--frame),var(--frame)) left 0 top 12px / 5px calc(100% - 12px) no-repeat,
    linear-gradient(var(--frame),var(--frame)) right 8px top 4px / 6px 5px no-repeat,
    linear-gradient(var(--frame),var(--frame)) right 4px top 8px / 4px 5px no-repeat,
    linear-gradient(var(--frame),var(--frame)) right 0 top 12px / 5px calc(100% - 12px) no-repeat;
}
.xp-login-titlebar{
  height:38px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px 6px 4px 18px;
  background:
    linear-gradient(#6f9bff,#6f9bff) left 14px top 0 / calc(100% - 28px) 3px no-repeat,
    linear-gradient(#6f9bff,#6f9bff) left 8px top 4px / 6px 3px no-repeat,
    linear-gradient(#6f9bff,#6f9bff) left 4px top 8px / 4px 3px no-repeat,
    linear-gradient(#1c4ca8,#1c4ca8) right 8px top 4px / 6px 3px no-repeat,
    linear-gradient(#1c4ca8,#1c4ca8) right 4px top 8px / 4px 3px no-repeat,
    linear-gradient(180deg,var(--chrome-hi) 0%,var(--chrome) 48%,var(--chrome-dk) 100%);
  border-bottom:5px solid var(--frame);
  color:var(--white);
  cursor:grab;
}
.xp-login-titlebar span{
  flex:1;
  min-width:0;
  font-size:18px;
  line-height:1;
  letter-spacing:0;
  text-shadow:2px 2px 0 var(--chrome-dk);
  white-space:nowrap;
  overflow:hidden;
}
.xp-login-titlebar .tbtn{
  display:block;
  margin:0;
}
.xp-login-body{
  position:relative;
  padding:10px;
  background:var(--panel);
}
.admin-status{
  min-height:30px;
  margin-bottom:8px;
  padding:6px 8px;
  background:var(--panel-lt);
  border:2px solid var(--frame);
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.35;
  box-shadow:inset 1px 1px 0 #ffffff;
}
.admin-status[hidden]{
  display:none !important;
}
.admin-login{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.admin-login[hidden]{
  display:none !important;
}
.admin-login label{
  display:flex;
  flex-direction:column;
  gap:5px;
  color:var(--red);
  font-size:14px;
  font-weight:bold;
}
.admin-login input{
  width:100%;
  min-height:34px;
  border:2px solid var(--frame);
  background:#ffffff;
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  padding:7px 9px;
  outline:0;
  box-shadow:inset 2px 2px 0 #ffffff;
  user-select:text;
}
.admin-login input:focus{
  outline:2px solid #ffda6b;
}
.xpbtn{
  min-height:28px;
  justify-content:center;
  border:3px solid var(--frame);
  background:var(--panel-lt);
  color:var(--ink);
  font-family:inherit;
  font-size:13px;
  padding:4px 9px;
  box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 #8fa9dc,2px 2px 0 rgba(10,22,52,.28);
}
.admin-account{
  display:flex;
  align-items:center;
  gap:8px;
}
.login-account{
  margin:0;
  padding:8px;
  background:var(--panel-lt);
  border:2px solid var(--frame);
  box-shadow:inset 2px 2px 0 #ffffff;
  flex-direction:column;
  align-items:stretch;
  text-align:center;
}
.login-account[hidden]{
  display:none !important;
}
.login-welcome{
  color:var(--chrome-dk);
  font-size:17px;
  font-weight:bold;
  padding:8px 4px 4px;
}
.admin-account span{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  color:var(--ink-soft);
}
.book-status{
  min-height:20px;
  margin-top:12px !important;
  color:var(--red) !important;
  font-weight:bold;
}
@media (min-width:861px) and (max-width:1180px){
  .game-view{
    --game-page-pad:24px;
    --game-center-gutter:100px;
  }
  .game-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .game-detail-page,
  .game-library-page{
    padding-left:24px;
    padding-right:24px;
  }
  .diary-drawing-toolbar{
    left:calc(50% - 60px);
    right:auto;
    top:-20px;
    width:auto;
    max-width:calc(100% - 36px);
    flex-direction:row;
    transform:translateX(-50%);
  }
  .drawing-toggle,
  .drawing-tools button{
    width:auto;
  }
  .drawing-tools{
    width:auto;
    flex-direction:row;
    white-space:nowrap;
  }
  .drawing-color,
  .drawing-width{
    width:auto;
  }
  .drawing-width{
    flex-direction:row;
  }
  .drawing-width input{
    width:72px;
  }
}
@media (max-width:860px){
  .book-page{
    width:calc(100vw - 16px);
    padding:10px 0;
  }
  .book-page.is-home-editing{
    width:calc(100vw - 16px);
    margin:0 auto;
  }
  .book-shell{
    padding:18px;
    height:auto;
    min-height:auto;
  }
  .book-rings{display:none;}
  .book-view,
  .diary-view{
    grid-template-columns:1fr;
    gap:16px;
    height:auto;
    min-height:auto;
  }
  .game-view{
    grid-template-columns:1fr;
  }
  .game-detail-page{
    height:auto;
    min-height:0;
    padding:34px 28px 20px;
  }
  .game-library-page{
    position:relative;
    inset:auto;
    height:auto;
    min-height:0;
    padding:0 24px 58px;
    overflow:visible;
  }
  .game-catalog-toolbar{
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    margin-bottom:15px;
  }
  .game-feature{
    max-height:440px;
    grid-template-columns:minmax(135px,38%) minmax(0,1fr);
  }
  .game-feature-cover{
    max-width:230px;
    justify-self:center;
  }
  .game-card-grid{
    position:relative;
    inset:auto;
    grid-template-columns:1fr;
    gap:14px;
    padding:0 0 54px;
    overflow:visible;
  }
  .game-archive-spacer{display:none;}
  .game-card{
    height:150px;
    grid-template-columns:clamp(96px,30%,112px) minmax(0,1fr);
  }
  .game-card-cover{
    height:100%;
    aspect-ratio:auto;
  }
  .game-igdb-credit{
    right:24px;
    bottom:8px;
  }
  .game-page-number{
    bottom:5px;
  }
  .game-page-number.is-left{left:40%;}
  .game-page-number.is-right{left:60%;}
  .game-page-turn-controls .game-page-prev{
    left:24px;
    right:auto;
  }
  .game-page-turn-controls .game-page-next{
    left:auto;
    right:24px;
  }
  .game-editor-backdrop{
    position:fixed;
    inset:0;
    z-index:1000;
    padding:10px;
  }
  .game-editor-window{
    width:min(680px,100%);
    max-height:calc(100vh - 20px);
  }
  .game-editor-fields{
    grid-template-columns:1fr;
  }
  .game-editor-fields .game-field-wide{
    grid-column:auto;
  }
  .diary-drawing-toolbar{
    position:sticky;
    left:auto;
    right:auto;
    top:8px;
    z-index:70;
    width:clamp(108px,32vw,132px);
    max-width:none;
    margin:-8px auto 2px 0;
    flex-wrap:nowrap;
    transform:none;
  }
  .drawing-tools{
    width:100%;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
    white-space:normal;
  }
  .drawing-width input{
    width:94px;
  }
  .cover-left,
  .cover-right{
    min-height:420px;
  }
  .paint-toolbar{
    left:0;
    right:0;
    top:calc(100% + 16px);
    width:100%;
    max-height:none;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .main-photo{
    left:50px;
    top:52px;
    width:230px;
    height:290px;
  }
  .diary-calendar{
    order:1;
    min-height:548px;
    height:auto;
  }
  .diary-paper{
    order:2;
    min-height:560px;
    height:auto;
  }
  .cal-window{
    left:10px;
    right:10px;
    top:24px;
  }
  .xp-note-window{
    left:10px;
    right:10px;
    top:26px;
    bottom:58px;
  }
  .note-tools{
    grid-template-columns:1fr;
    left:34px;
    right:28px;
    gap:6px;
  }
  .note-period{
    flex-wrap:wrap;
    gap:5px;
  }
  .note-period input{
    width:122px;
  }
  #book-note-input{
    left:36px;
    right:28px;
    top:124px;
  }
  .xp-note-window::before{
    top:124px;
  }
  .xp-note-window.has-entry-photo #book-note-input{
    top:calc(110px + (250px * var(--board-content-scale,1)));
  }
  .xp-note-window.has-entry-photo::before{
    top:calc(110px + (250px * var(--board-content-scale,1)));
  }
}