/*
  Every page is a "stage" laid out in the coordinate system of its reference
  screenshot (800 units wide). --s is one reference unit, so a value like
  calc(120 * var(--s)) means "120px in the reference". On desktop the stage
  spans the viewport width; on phones the stages reflow (see bottom).
*/
:root{
  --s:calc(100vw / 800);

  --ink:#2B2522;
  --ink-body:#2E2926;
  --cream:#F6EBDD;
  --paper:#EDE8E0;
  --card:#F7F6F8;
  --cardboard:#7A4739;
  --manila:#E6CF9E;
  --manila-dark:#D9BD86;
  --manila-light:#F1E1B9;
  --pink:#D8B2A7;
  --pink-text:#A07A6F;
  --rose:#C9A095;
  --brown:#6E3B28;
  --taupe:#6F645D;

  --f-display:"Gloock","Gowun Batang",serif;
  --f-serif:"Cormorant Garamond","Gowun Batang",serif;
  --f-sans:"Jost","Noto Sans KR",sans-serif;
  --f-hand:"Caveat","Nanum Pen Script",cursive;

  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --fibers:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.0125 0.04' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:var(--f-sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;}
img{display:block;}

.fblock{display:contents;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- stage ---------- */
.stage{position:relative;width:100%;overflow:hidden;}
.abs{position:absolute;}

/* ---------- nav pills (identical on all 4 pages) ---------- */
.nav{
  position:absolute;z-index:20;
  top:calc(29 * var(--s));left:0;right:0;
  display:flex;justify-content:center;gap:calc(13 * var(--s));
}
.nav a{
  width:calc(77 * var(--s));height:calc(22 * var(--s));
  display:flex;align-items:center;justify-content:center;
  border:1px solid currentColor;border-radius:999px;
  font-family:var(--f-sans);font-size:calc(12.5 * var(--s));
  text-decoration:underline;text-underline-offset:calc(2.5 * var(--s));text-decoration-thickness:1px;
  transition:background .15s ease;
}
.nav a[aria-current="page"]{text-decoration:none;}
.nav a:focus-visible{outline:2px solid currentColor;outline-offset:3px;}

.nav--light a{color:#F7EEEA;border-color:rgba(247,238,234,0.9);}
.nav--light a:hover{background:rgba(247,238,234,0.12);}
.nav--light a[aria-current="page"]{background:rgba(236,205,196,0.85);color:var(--pink-text);border-color:rgba(236,205,196,0.9);}

.nav--dark a{color:var(--ink);border-color:#4A413B;}
.nav--dark a:hover{background:rgba(43,37,34,0.06);}
.nav--dark a[aria-current="page"]{background:var(--taupe);color:#F2EEEA;border-color:var(--taupe);}

.nav--cardboard a{color:var(--cream);border-color:rgba(246,235,221,0.85);}
.nav--cardboard a:hover{background:rgba(246,235,221,0.1);}
.nav--cardboard a[aria-current="page"]{background:var(--pink);color:var(--pink-text);border-color:var(--pink);}

/* ---------- photo primitives ---------- */
.ph{position:absolute;background:#ddd center/cover no-repeat;box-shadow:0 calc(3 * var(--s)) calc(8 * var(--s)) rgba(30,20,15,0.25);}
.ph img{width:100%;height:100%;object-fit:cover;}
.ph--white{border:calc(4 * var(--s)) solid #FBFAF7;}
.ph--black{border:calc(4 * var(--s)) solid #1E1A18;}
.ph--polaroid{background:#FBFAF7;padding:calc(7 * var(--s)) calc(7 * var(--s)) calc(20 * var(--s));}
.ph--card{background:#F1EFEB;}
.ph--card img{object-fit:contain;mix-blend-mode:multiply;}
.ph--flat{box-shadow:0 calc(2 * var(--s)) calc(5 * var(--s)) rgba(30,20,15,0.18);}

/* ---------- desktop icons (home + consult) ---------- */
.wall{
  height:max(calc(450 * var(--s)), 100vh);
  background:#B8938B center/cover no-repeat;
}
.wall::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.07;mix-blend-mode:overlay;
}
.icon{
  position:absolute;z-index:5;
  display:flex;flex-direction:column;align-items:center;
  text-decoration:none;color:#fff;
}
.icon__img{width:100%;box-shadow:none;}
.icon__img img{width:100%;height:100%;object-fit:cover;}
.icon__label{
  margin-top:calc(5 * var(--s));
  white-space:nowrap;
  font-family:var(--f-sans);font-weight:500;
  font-size:calc(11 * var(--s));letter-spacing:.01em;
  text-shadow:0 0 calc(3 * var(--s)) rgba(0,0,0,.55),0 calc(1 * var(--s)) calc(2 * var(--s)) rgba(0,0,0,.45);
}
.icon:hover .icon__label{text-decoration:underline;}
.icon:focus-visible{outline:2px solid #fff;outline-offset:4px;}
.icon svg{display:block;width:100%;height:auto;}

/* ---------- ABOUT ---------- */
.about{
  height:calc(797 * var(--s));
  background-color:var(--cardboard);
  color:var(--cream);
}
.about::before,.about::after{content:"";position:absolute;inset:0;pointer-events:none;}
.about::before{background-image:var(--fibers);opacity:.22;mix-blend-mode:overlay;}
.about::after{background-image:var(--grain);opacity:.16;mix-blend-mode:multiply;}
.about__title{
  position:absolute;z-index:2;left:0;right:0;top:calc(122 * var(--s));
  margin:0;text-align:center;
  font-family:var(--f-display);font-weight:400;
  font-size:calc(58 * var(--s));line-height:calc(58 * var(--s));
  letter-spacing:-.01em;color:var(--cream);
}

.fgroup{position:absolute;z-index:2;top:calc(318 * var(--s));width:calc(240 * var(--s));height:calc(262 * var(--s));}
.fgroup--1{left:calc(23 * var(--s));}
.fgroup--2{left:calc(280 * var(--s));}
.fgroup--3{left:calc(540 * var(--s));}

.folder-back{
  position:absolute;left:calc(34 * var(--s));top:calc(9 * var(--s));
  width:calc(176 * var(--s));height:calc(236 * var(--s));
  background:var(--manila-light);border-radius:calc(5 * var(--s));
  box-shadow:0 calc(4 * var(--s)) calc(12 * var(--s)) rgba(20,10,5,.25);
}
.folder-tab{
  position:absolute;left:calc(205 * var(--s));top:calc(14 * var(--s));
  width:calc(18 * var(--s));height:calc(96 * var(--s));
  background:var(--manila-light);border-radius:0 calc(5 * var(--s)) calc(5 * var(--s)) 0;
  display:flex;align-items:center;justify-content:center;
}
.folder-tab span{
  writing-mode:vertical-rl;white-space:nowrap;
  font-family:var(--f-hand);font-size:calc(9.5 * var(--s));color:#5C4A3A;
}
.folder-front{
  position:absolute;left:calc(27 * var(--s));top:calc(34 * var(--s));
  width:calc(182 * var(--s));height:calc(214 * var(--s));
  background:linear-gradient(170deg,var(--manila),var(--manila-dark));
  border-radius:calc(4 * var(--s));
  box-shadow:0 calc(3 * var(--s)) calc(10 * var(--s)) rgba(20,10,5,.22);
}

.fcap{position:absolute;z-index:2;top:calc(590 * var(--s));width:calc(260 * var(--s));text-align:center;}
.fcap--1{left:calc(13 * var(--s));}
.fcap--2{left:calc(270 * var(--s));}
.fcap--3{left:calc(530 * var(--s));}
.fcap h2{
  margin:0 0 calc(10 * var(--s));
  font-family:var(--f-display);font-weight:400;
  font-size:calc(33 * var(--s));line-height:1.15;color:var(--cream);
}
.fcap p{
  margin:0 auto;max-width:calc(210 * var(--s));
  font-family:var(--f-sans);font-size:calc(10.6 * var(--s));line-height:1.55;color:var(--cream);
}

/* ---------- CONTACT ---------- */
.contact{
  height:calc(612 * var(--s));
  background-color:var(--paper);
}
.contact::before,.contact::after{content:"";position:absolute;inset:0;pointer-events:none;}
.contact::before{background-image:var(--fibers);opacity:.14;mix-blend-mode:multiply;}
.contact::after{background-image:var(--grain);opacity:.12;mix-blend-mode:multiply;}
.contact__text{position:absolute;z-index:6;left:calc(402 * var(--s));top:calc(106 * var(--s));width:calc(292 * var(--s));}
.contact__text h1{
  margin:0 0 calc(18 * var(--s));
  font-family:var(--f-display);font-weight:400;
  font-size:calc(55 * var(--s));line-height:1;letter-spacing:-.015em;color:var(--ink);
}
.contact__text p{
  margin:0 0 calc(12 * var(--s));
  font-family:var(--f-sans);font-size:calc(9.8 * var(--s));line-height:1.5;color:var(--ink-body);
}
.pill-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:calc(18 * var(--s));padding:0 calc(14 * var(--s));
  border:1px solid var(--ink);border-radius:999px;
  font-family:var(--f-sans);font-size:calc(10 * var(--s));text-decoration:none;color:var(--ink);
}
.pill-btn:hover{background:rgba(43,37,34,.06);}

.collage{position:absolute;inset:0;z-index:3;}
.bigfolder{
  position:absolute;left:calc(113 * var(--s));top:calc(268 * var(--s));
  width:calc(420 * var(--s));height:calc(290 * var(--s));
  transform:rotate(20deg);
}
.bigfolder__back{position:absolute;inset:0;background:var(--manila-light);border-radius:calc(6 * var(--s));box-shadow:0 calc(8 * var(--s)) calc(22 * var(--s)) rgba(40,25,10,.25);}
.bigfolder__tab{
  position:absolute;left:calc(150 * var(--s));top:calc(-24 * var(--s));
  width:calc(150 * var(--s));height:calc(30 * var(--s));
  background:var(--manila-light);border-radius:calc(6 * var(--s)) calc(6 * var(--s)) 0 0;
}
/* Label sits outside the rotated folder so it can layer above the photo next to it. */
.folder-label{
  position:absolute;z-index:5;left:calc(318 * var(--s));top:calc(252 * var(--s));
  transform:rotate(20deg);transform-origin:left top;white-space:nowrap;
  font-family:var(--f-hand);font-size:calc(11 * var(--s));color:#4B3B2E;
}
.bigfolder__front{
  position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(175deg,var(--manila),var(--manila-dark));
  border-radius:calc(4 * var(--s)) calc(4 * var(--s)) calc(6 * var(--s)) calc(6 * var(--s));
  box-shadow:0 calc(-2 * var(--s)) calc(6 * var(--s)) rgba(40,25,10,.12);
}

.receipt{
  position:absolute;z-index:4;
  left:calc(42 * var(--s));top:calc(262 * var(--s));
  width:calc(112 * var(--s));height:calc(122 * var(--s));
  background:#F7F1DE;transform:rotate(-20deg);
  padding:calc(12 * var(--s)) calc(10 * var(--s));
  font-family:"Courier New",monospace;font-size:calc(5.5 * var(--s));line-height:1.55;color:#4A443C;
  box-shadow:0 calc(3 * var(--s)) calc(8 * var(--s)) rgba(30,20,10,.2);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 4px) no-repeat, radial-gradient(circle at 3px 100%, transparent 3px, #000 3.5px) bottom/7px 4px repeat-x;
          mask:linear-gradient(#000,#000) top/100% calc(100% - 4px) no-repeat, radial-gradient(circle at 3px 100%, transparent 3px, #000 3.5px) bottom/7px 4px repeat-x;
}
.receipt b{display:block;text-align:center;letter-spacing:.2em;margin-bottom:calc(4 * var(--s));}
.receipt i{display:flex;justify-content:space-between;font-style:normal;}
.receipt hr{border:0;border-top:1px dashed #8C8274;margin:calc(4 * var(--s)) 0;}
.clip{position:absolute;z-index:9;left:calc(150 * var(--s));top:calc(252 * var(--s));width:calc(26 * var(--s));transform:rotate(-20deg);}

/* ---------- CONSULT (subscribe modal) ---------- */
/* The card grows with the form, so the stage grows with it. */
.consult{height:auto;min-height:max(calc(450 * var(--s)), 100vh);padding:calc(83 * var(--s)) 0 calc(40 * var(--s));}
.modal{
  position:relative;z-index:10;
  margin-left:calc(199 * var(--s));
  width:calc(402 * var(--s));min-width:min(420px, 92vw);
  background:var(--card);
  border:calc(1.5 * var(--s)) solid #E6DEDA;
  border-radius:calc(10 * var(--s));
  box-shadow:0 calc(2 * var(--s)) calc(10 * var(--s)) rgba(60,40,35,.12);
  padding:calc(30 * var(--s)) calc(29 * var(--s)) calc(22 * var(--s));
  color:var(--brown);
}
.modal h1{
  margin:0 0 calc(18 * var(--s));
  font-family:var(--f-serif);font-weight:500;
  font-size:max(26px, calc(29 * var(--s)));line-height:1.1;color:var(--brown);
}
.modal small{display:block;margin-top:10px;text-align:center;font-family:var(--f-serif);font-size:13px;}

/* ---------- BOOKING (practice rooms, paper theme) ---------- */
.booking{min-height:100vh;background-color:var(--paper);padding:calc(90 * var(--s)) 0 60px;}
.booking::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--fibers);opacity:.14;mix-blend-mode:multiply;}
.booking__inner{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:0 20px;}
.booking__title{margin:0 0 8px;font-family:var(--f-display);font-weight:400;font-size:clamp(40px, calc(55 * var(--s)), 72px);line-height:1;letter-spacing:-.015em;}
.booking__note{margin:0 0 24px;color:var(--ink-body);}

/* ---------- phones: reflow each stage ---------- */
@media (max-width:760px){
  :root{--s:calc(100vw / 400);}

  .nav{position:relative;top:auto;padding:calc(16 * var(--s)) 0 0;gap:calc(6 * var(--s));flex-wrap:wrap;}
  .nav a{width:calc(71 * var(--s));height:calc(28 * var(--s));font-size:calc(12 * var(--s));}

  /* home: icons become a loose grid over the photo */
  .wall{height:auto;min-height:100vh;padding-bottom:calc(30 * var(--s));background-position:60% center;}
  .wall .icons{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(22 * var(--s)) calc(8 * var(--s));padding:calc(40 * var(--s)) calc(18 * var(--s)) 0;justify-items:center;}
  .wall .icon{position:relative;left:auto !important;top:auto !important;width:calc(70 * var(--s)) !important;}
  .wall .icon__img{height:calc(70 * var(--s)) !important;}

  /* about: headline then folders stacked */
  .about{height:auto;padding-bottom:calc(40 * var(--s));}
  .about__title{position:relative;top:auto;margin:calc(40 * var(--s)) 0 calc(20 * var(--s));font-size:calc(46 * var(--s));line-height:1;}
  .about .fblock{display:block;position:relative;width:calc(260 * var(--s));margin:0 auto calc(34 * var(--s));}
  .about .fgroup,.about .fcap{position:relative;left:auto;top:auto;margin:0 auto;}
  .about .fgroup{left:calc(10 * var(--s));}
  .about .fcap{width:100%;margin-top:calc(10 * var(--s));}
  .fcap p{font-size:calc(12.5 * var(--s));max-width:calc(250 * var(--s));}

  /* contact: text first, collage below at its own scale */
  .contact{height:auto;min-height:100vh;}
  .contact__text{position:relative;left:auto;top:auto;width:auto;padding:calc(34 * var(--s)) calc(24 * var(--s)) 0;}
  .contact__text p{font-size:calc(13 * var(--s));}
  .pill-btn{height:calc(30 * var(--s));font-size:calc(12.5 * var(--s));padding:0 calc(20 * var(--s));}
  .collage{--s:calc(100vw / 720);position:relative;inset:auto;height:calc(612 * var(--s));margin:calc(-90 * var(--s)) 0 0 calc(-30 * var(--s));}

  /* consult: modal in the flow */
  .consult{padding-top:0;}
  .consult .icons{display:none;}
  .modal{margin:calc(30 * var(--s)) auto 0;width:auto;min-width:0;max-width:calc(370 * var(--s));padding:24px 18px 18px;}

  .booking{padding-top:0;}
  .booking__inner{padding-top:calc(30 * var(--s));}
}

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

/* ---------- photo scenes (home): step into a photo, notes handwritten on it ---------- */
.scene{position:fixed;inset:0;z-index:30;overflow:hidden;color:#FFF4EA;}
.scene[hidden]{display:none;}
.scene__photo{position:absolute;inset:0;background:#8E1E1C center/cover no-repeat;will-change:clip-path,transform;}
.scene__photo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 50% 45%, transparent 30%, rgba(30,10,6,.42)), rgba(30,14,10,.26);}
.scene__back{
  position:absolute;z-index:2;top:calc(22px + env(safe-area-inset-top, 0px));left:22px;
  padding:6px 16px;border:1px solid rgba(255,244,234,.75);border-radius:999px;background:rgba(60,10,10,.18);
  font-family:var(--f-sans);font-size:14px;color:inherit;cursor:pointer;
  transition:opacity .3s ease;
}
.scene__back:hover{background:rgba(255,244,234,.14);}
.scene__back:focus-visible{outline:2px solid #FFF4EA;outline-offset:3px;}
.scene__notes{
  position:absolute;inset:0;display:grid;grid-template-columns:1fr minmax(240px, 30vw) 1fr;
  align-items:center;padding:14vh 5vw 10vh;pointer-events:none;
}
.scene__col{display:flex;flex-direction:column;gap:1.6vh;}
.scene__col--a{grid-column:1;align-items:flex-start;padding-left:2vw;}
.scene__col--b{grid-column:3;align-items:flex-start;}
.note{
  margin:0;font-family:"Nanum Pen Script","Caveat",cursive;font-weight:400;
  font-size:clamp(26px, 2.5vw, 42px);line-height:1.1;letter-spacing:.01em;
  transform:rotate(var(--r, 0deg));text-shadow:0 1px 10px rgba(70,0,0,.35);
  clip-path:inset(-30% 100% -30% 0);
}
.note--big{font-size:clamp(52px, 6.4vw, 108px);line-height:.95;}
@media (min-width:761px){.note{white-space:nowrap;}}
.note--cta{margin-top:2.4vh;color:#FFE3A0;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;pointer-events:auto;}
.note--cta:hover{color:#FFF4EA;}
.scene.is-open .note{animation:note-write 1s cubic-bezier(.5,0,.4,1) var(--d, 0s) forwards;}
.scene.is-done .note{animation-delay:0s;animation-duration:.15s;}
.scene.is-leaving .note,.scene.is-leaving .scene__back{opacity:0;transition:opacity .2s ease;}
@keyframes note-write{to{clip-path:inset(-30% -8% -30% 0);}}
@media (max-width:760px){
  .scene__notes{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding:86px 26px calc(34px + env(safe-area-inset-bottom, 0px));align-items:start;}
  .scene__col--a{grid-row:1;grid-column:1;padding-left:0;}
  .scene__col--b{grid-row:3;grid-column:1;gap:6px;}
  .note{font-size:clamp(22px, 6.4vw, 28px);}
  .note--big{font-size:clamp(46px, 13vw, 64px);}
  .note--cta{margin-top:10px;}
  .scene__photo::after{background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(30,10,6,.2), rgba(30,10,6,.5)), rgba(30,14,10,.3);}
}
@media (prefers-reduced-motion:reduce){.note{clip-path:none;}.scene.is-open .note{animation:none;}}

/* ---------- 내 폴더: the student's folder (lesson notes + monthly evaluations) ---------- */
.scene--book{color:var(--ink);}
.scene--book .scene__photo{background:var(--paper);}
.scene--book .scene__photo::before{content:"";position:absolute;inset:0;background-image:var(--fibers);opacity:.16;mix-blend-mode:multiply;}
.scene--book .scene__photo::after{background:none;}
.scene--book .scene__back{border-color:rgba(43,37,34,.5);background:rgba(255,255,255,.4);}
.scene--book .scene__back:hover{background:rgba(43,37,34,.06);}
.scene--book .scene__back:focus-visible{outline-color:var(--brown);}
.book{
  position:absolute;left:50%;top:calc(84px + env(safe-area-inset-top, 0px));bottom:24px;
  width:min(680px, calc(100% - 32px));transform:translateX(-50%);
  display:flex;flex-direction:column;
  background:linear-gradient(175deg, var(--manila-light), var(--manila));
  border-radius:4px 12px 12px 12px;padding:22px 22px 0;
  box-shadow:0 18px 40px rgba(60,40,20,.22);
  animation:book-in .45s ease-out .35s both;
}
.book::before{content:"";position:absolute;left:0;top:-20px;width:170px;height:22px;background:var(--manila-light);border-radius:10px 10px 0 0;}
@keyframes book-in{from{opacity:0;transform:translate(-50%, 18px);}to{opacity:1;transform:translate(-50%, 0);}}
.book__title{margin:0;font-family:"Nanum Pen Script","Caveat",cursive;font-weight:400;font-size:38px;line-height:1.1;color:#3E2A1E;}
.book__lede{margin:4px 0 18px;color:#5A4636;font-size:14px;}
.book__login{max-width:380px;overflow:auto;padding-bottom:22px;}
.book__open{display:flex;flex-direction:column;min-height:0;flex:1;}
.book__open[hidden],.book__login[hidden]{display:none;}
.book__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.book__logout{border:0;background:none;padding:6px 0;font:inherit;font-size:13px;color:#5A4636;text-decoration:underline;cursor:pointer;}
.book__tabs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 14px;}
.book__tabs [role=tab]{min-height:38px;padding:0 16px;border:1px solid rgba(62,42,30,.35);border-radius:999px;background:rgba(255,255,255,.5);font:inherit;font-size:14px;color:#3E2A1E;cursor:pointer;}
.book__tabs [role=tab][aria-selected=true]{background:#3E2A1E;border-color:#3E2A1E;color:#FBF3E4;}
.book__tabs [role=tab]:focus-visible,.book__logout:focus-visible{outline:2px solid var(--brown);outline-offset:2px;}
.book__tablink{margin-left:auto;font-size:13px;color:#5A4636;}
.book__page{flex:1;min-height:0;overflow:auto;padding:2px 2px 22px;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;}
.book__page[hidden]{display:none;}
.book__empty{margin:8px 0;color:#5A4636;}

/* a page of lined notebook paper per lesson / per month */
.lnote,.evalc{
  background:#FFFDF8 repeating-linear-gradient(transparent 0 27px, #EDE3D4 27px 28px);
  background-position:0 10px;
  border-radius:3px;padding:14px 18px 16px;
  box-shadow:0 2px 6px rgba(60,40,20,.12);
  font-size:15px;line-height:28px;color:#2B2522;
}
.lnote:nth-child(odd){transform:rotate(-.3deg);}
.lnote:nth-child(even){transform:rotate(.25deg);}
.lnote p,.evalc p{margin:0;}
.lnote__date,.evalc__month{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-weight:500;}
.lnote__teacher{font-size:13px;font-weight:400;color:#7A6656;}
.lnote__label{margin-top:4px !important;font-size:12px;letter-spacing:.06em;color:#8A7564;}
.lnote__did{white-space:pre-wrap;}
.lnote__practice{
  font-family:"Nanum Pen Script","Caveat",cursive;font-size:24px;color:var(--brown);white-space:pre-wrap;
  background:linear-gradient(transparent 58%, rgba(246,214,110,.55) 58%);display:inline;
}
.evalc__month{font-family:"Nanum Pen Script","Caveat",cursive;font-weight:400;font-size:28px;}
.evalc__scores{list-style:none;margin:6px 0 4px;padding:0;}
.evalc__scores li{display:grid;grid-template-columns:7.5em auto 3em;align-items:center;gap:10px;}
.evalc__name{font-size:14px;}
.evalc__dots{display:inline-flex;gap:5px;}
.evalc__dots i{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--brown);}
.evalc__dots i.is-on{background:var(--brown);}
.evalc__delta{font-size:12px;color:#8A7564;font-variant-numeric:tabular-nums;}
.evalc__delta.is-up{color:#2E6B45;}
.evalc__delta.is-down{color:#A33A22;}
.evalc__comment{font-family:"Nanum Pen Script","Caveat",cursive;font-size:24px;line-height:28px;color:var(--brown);white-space:pre-wrap;}
.evalc__goal{font-size:14px;}
.evalc__goal b{font-weight:500;color:#5A4636;}
@media (max-width:760px){
  .book{top:calc(76px + env(safe-area-inset-top, 0px));bottom:14px;width:calc(100% - 24px);padding:18px 14px 0;}
  .book__title{font-size:32px;}
  .book__tablink{margin-left:0;flex-basis:100%;}
}
@media (prefers-reduced-motion:reduce){.book{animation:none;}}

/* ---------- home motion 1: the screen switching on (first visit, js/intro.js) ----------
   0–0.6s a line of light opens into the screen · 0.6–2.3s the name and a voice meter ·
   2.3–2.9s the screen lets go · then the desktop icons pop in one by one. */
.boot{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:#0B0908;cursor:pointer;
  animation:boot-out .6s cubic-bezier(.6,0,.4,1) 2.3s forwards;
}
.boot__screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(ellipse at center,#2C221E 0%,#17110F 62%,#0B0908 100%);
  animation:crt-on .6s cubic-bezier(.2,.7,.2,1) both;
}
.boot__screen::after{ /* scan lines */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
}
.boot__en{margin:0;font-family:var(--f-sans);font-size:12px;letter-spacing:.42em;color:#D9B26A;opacity:0;animation:boot-rise .7s ease .55s forwards;}
.boot__ko{margin:0;font-family:"Gowun Batang",var(--f-display);font-size:clamp(34px,6vw,64px);color:var(--cream);letter-spacing:.06em;opacity:0;animation:boot-name .9s cubic-bezier(.2,.7,.2,1) .7s forwards;}
.boot__sub{margin:0;font-family:var(--f-sans);font-size:13px;letter-spacing:.2em;color:rgba(246,235,221,.6);opacity:0;animation:boot-rise .7s ease 1.2s forwards;}
.boot__meter{display:flex;align-items:center;gap:4px;height:64px;}
.boot__meter i{
  display:block;width:4px;height:100%;border-radius:2px;background:#D9B26A;
  transform:scaleY(.04);opacity:.9;
  animation:meter .3s ease-in-out calc(.8s + var(--k) * 12ms) 6 alternate both;
}
.boot__skip{position:absolute;bottom:28px;margin:0;font-size:12px;letter-spacing:.1em;color:rgba(246,235,221,.4);opacity:0;animation:boot-rise .5s ease 1s forwards;}
@keyframes crt-on{
  0%{transform:scale(0,.004);filter:brightness(4);}
  40%{transform:scale(1,.004);filter:brightness(3);}
  100%{transform:scale(1,1);filter:brightness(1);}
}
@keyframes boot-rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes boot-name{from{opacity:0;letter-spacing:.5em;filter:blur(6px);}to{opacity:1;letter-spacing:.06em;filter:blur(0);}}
@keyframes meter{from{transform:scaleY(.06);}to{transform:scaleY(var(--h));}}
@keyframes boot-out{
  0%{opacity:1;transform:none;}
  100%{opacity:0;transform:scale(1.06);visibility:hidden;}
}
/* the desktop arrives after the screen lets go */
.boot ~ .nav{animation:boot-rise .6s ease 2.5s both;}
.boot ~ .wavebed{animation:fade-in 1.2s ease 2.6s both;}
.boot ~ .icons .icon{
  animation:icon-pop .55s cubic-bezier(.34,1.56,.64,1) calc(2.55s + var(--i) * 75ms) both,
            icon-float calc(5s + var(--i) * .37s) ease-in-out calc(var(--i) * -.9s) infinite alternate;
}
@keyframes icon-pop{from{opacity:0;scale:.4;}to{opacity:1;scale:1;}}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}

/* ---------- home motion 2: a desktop that breathes ----------
   A voice line drifts along the bottom, the icons float a little. */
.wavebed{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:calc(56 * var(--s));pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.wavebed__line{position:absolute;inset:0;animation:wave-breath var(--breath) ease-in-out infinite alternate;}
.wavebed svg{display:block;width:200%;height:100%;animation:wave-flow var(--dur) linear infinite;}
.wavebed path{fill:none;stroke:rgba(255,246,236,var(--o));stroke-width:1.6;vector-effect:non-scaling-stroke;}
@keyframes wave-flow{to{transform:translateX(-50%);}}
@keyframes wave-breath{from{transform:scaleY(.45);}to{transform:scaleY(1.1);}}
.wall--live .icon{animation:icon-float calc(5s + var(--i) * .37s) ease-in-out calc(var(--i) * -.9s) infinite alternate;}
@keyframes icon-float{from{translate:0 0;}to{translate:0 calc(-4 * var(--s));}}
/* nothing moves behind an open photo scene */
body:has(.scene:not([hidden])) .wavebed *,
body:has(.scene:not([hidden])) .wall--live .icon{animation-play-state:paused;}

@media (max-width:760px){
  .wavebed{height:calc(90 * var(--s));}
  .boot__meter{height:44px;gap:3px;}
  .boot__meter i{width:3px;}
}
@media (prefers-reduced-motion:reduce){
  .boot{display:none;}
  .wavebed *, .wall--live .icon, .boot ~ .icons .icon{animation:none !important;}
}

/* ---------- about / contact: the blog's content as a scrapbook (tools/blog_content.py) ----------
   Flows below the reference stage, in plain px so long text stays readable on any screen. */
.scrap{
  position:relative;padding:8px 20px 90px;
  background-color:var(--cardboard);color:var(--cream);
  font-family:var(--f-sans);font-size:16px;line-height:1.6;
}
.scrap::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--fibers);opacity:.22;mix-blend-mode:overlay;}
.scrap > *{position:relative;}
.scrap a{color:inherit;}
.scrap--paper{background-color:var(--paper);color:var(--ink);padding-top:40px;}
.scrap--paper::before{background-image:var(--grain);opacity:.12;mix-blend-mode:multiply;}

.scrap__index{position:sticky;top:0;z-index:10;margin:0 -20px;padding:12px 20px;background:rgba(98,55,43,.92);backdrop-filter:blur(6px);}
.scrap__index ul{list-style:none;margin:0 auto;padding:0;max-width:1080px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;}
.scrap__index a{display:block;white-space:nowrap;padding:6px 14px;border:1px solid rgba(246,235,221,.6);border-radius:999px;font-size:14px;text-decoration:none;}
.scrap__index a:hover{background:rgba(246,235,221,.12);}

.scrap__block{max-width:1080px;margin:0 auto;padding-top:56px;}
.scrap__head{scroll-margin-top:70px;margin-bottom:22px;}
.scrap__kicker{margin:0;font-family:var(--f-hand);font-size:26px;line-height:1;color:var(--pink);transform:rotate(-2deg);transform-origin:left;}
.scrap--paper .scrap__kicker{color:var(--brown);}
.scrap__title{margin:6px 0 0;font-family:"Gowun Batang",var(--f-display);font-weight:400;font-size:clamp(28px,4vw,42px);line-height:1.2;}
.scrap__sub{margin:36px 0 12px;font-family:"Gowun Batang",serif;font-weight:400;font-size:22px;}
.scrap__lede{max-width:760px;margin:0 0 18px;font-size:17px;}
.scrap__note{margin:18px 0 0;font-size:14px;opacity:.85;}
.scrap__note a{text-underline-offset:3px;}
.scrap__cta{margin:26px 0 0;}
.pill-btn--light{height:auto;padding:10px 22px;font-size:15px;color:var(--cream);border-color:var(--cream);}
.pill-btn--light:hover{background:rgba(246,235,221,.12);}

/* photos: polaroid snaps with a strip of tape */
.snap{position:relative;margin:0;padding:8px 8px 10px;background:#FBFAF7;color:var(--ink);box-shadow:0 6px 18px rgba(20,10,5,.35);}
.snap::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:20px;transform:translateX(-50%) rotate(-3deg);background:rgba(240,228,200,.75);box-shadow:0 1px 2px rgba(0,0,0,.08);}
.snap img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
.snap figcaption{margin-top:7px;font-family:var(--f-hand);font-size:19px;line-height:1.2;text-align:center;}
.snap--tilt-l{transform:rotate(-3deg);}
.snap--tilt-r{transform:rotate(3deg);}
.snap--small{max-width:150px;}

/* paper cards */
.card{border-radius:4px;}
.card--paper{padding:24px 26px;background:var(--cream);color:var(--ink);box-shadow:0 8px 24px rgba(20,10,5,.3);}
.card--paper ul{margin:0;padding-left:1.1em;}
.card--paper li{margin:3px 0;}
.card__name{margin:0 0 10px;font-size:15px;color:var(--taupe);}
.card__name b{font-family:"Gowun Batang",serif;font-weight:400;font-size:30px;color:var(--ink);margin:0 6px;}
.card__name span{font-family:var(--f-hand);font-size:22px;color:var(--brown);}
.card__lead{list-style:none;padding:0 !important;margin:0 0 18px !important;display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:500;color:var(--brown);}
.card__lead li::before{content:"✓ ";}
.card__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px 28px;font-size:15px;}
.card h4,.card__col h4{margin:0 0 6px;font-family:"Gowun Batang",serif;font-weight:400;font-size:18px;color:var(--brown);}
.card__chips{list-style:none;padding:0 !important;margin:0;display:flex;flex-wrap:wrap;gap:6px;}
.card__chips li{margin:0;padding:3px 11px;border:1px solid rgba(110,59,40,.35);border-radius:999px;font-size:14px;}
.card__chips--light li{border-color:rgba(246,235,221,.5);}
/* 합격 소식 posted in the admin page (js/passboard.js) */
.card__chips--light li.pass-new{border-color:#E6CF9E;color:#F6E2B5;}
.agency li.pass-new{color:var(--brown);font-weight:500;}
.agency.pass-new h4::after{content:"NEW";margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--brown);color:#FBF3E4;font-size:10px;vertical-align:2px;}
.card__more{margin-top:16px;font-size:14px;}
.card__more summary{cursor:pointer;color:var(--brown);font-weight:500;}
.card__history{list-style:none;padding:0 !important;margin:10px 0 0 !important;columns:2 320px;column-gap:28px;}
.card__history li{break-inside:avoid;margin:0 0 6px;}
.card__history b{display:inline-block;min-width:82px;color:var(--brown);font-weight:500;}

/* teacher */
.teacher{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:30px;align-items:start;margin-bottom:34px;}
.teacher__photos{display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:12px;}
.teacher__photos .snap img{aspect-ratio:1;}
.teacher--dance .teacher__photos .snap img{aspect-ratio:9/10;object-position:top;}

/* curriculum */
.classes{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.classes li{padding:8px 20px;border-radius:999px;background:var(--manila-light);color:var(--ink);font-family:"Gowun Batang",serif;font-size:18px;}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.step{position:relative;padding:22px 22px 18px;background:var(--cream);color:var(--ink);border-radius:3px;box-shadow:0 6px 18px rgba(20,10,5,.3);
  background-image:repeating-linear-gradient(transparent 0 27px,rgba(110,59,40,.12) 27px 28px);background-position:0 58px;}
.step:nth-child(odd){transform:rotate(-.6deg);}
.step:nth-child(even){transform:rotate(.6deg);}
.step--wide{grid-column:1 / -1;}
.step__no{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--brown);color:var(--cream);font-size:12px;letter-spacing:.12em;}
.step h3{margin:8px 0 8px;font-family:"Gowun Batang",serif;font-weight:400;font-size:24px;}
.step ul{margin:0;padding-left:1.1em;font-size:15px;line-height:28px;}
.step--wide ul{columns:2 360px;column-gap:32px;}

/* why us */
.whys{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;}
.why{padding:20px;border:1px solid rgba(246,235,221,.45);border-radius:6px;background:rgba(0,0,0,.08);}
.why__no{font-family:var(--f-display);font-size:28px;color:var(--pink);}
.why h3{margin:4px 0 8px;font-family:"Gowun Batang",serif;font-weight:400;font-size:21px;}
.why ul{margin:0;padding-left:1.1em;font-size:15px;}
.faq{margin:30px 0 0;padding:22px 26px;background:var(--manila-light);color:var(--ink);transform:rotate(-.5deg);box-shadow:0 6px 18px rgba(20,10,5,.3);}
.faq__q{margin:0 0 8px;font-family:var(--f-hand);font-size:28px;line-height:1.2;color:var(--brown);}
.faq__a{margin:0;padding-left:1.1em;}
.motto{margin:34px auto 0;max-width:760px;text-align:center;}
.motto p{margin:0;font-family:"Gowun Batang",serif;font-size:clamp(20px,2.6vw,26px);line-height:1.5;}
.motto footer{margin-top:10px;font-size:14px;opacity:.8;}

/* audition care */
.care-wrap{display:grid;grid-template-columns:1fr minmax(200px,300px);gap:30px;align-items:start;}
.cares{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.care{padding:20px;background:var(--cream);color:var(--ink);border-radius:3px;box-shadow:0 6px 18px rgba(20,10,5,.3);}
.care h3{margin:0 0 8px;font-family:"Gowun Batang",serif;font-weight:400;font-size:21px;color:var(--brown);}
.care ul{margin:0;padding-left:1.1em;font-size:15px;}
.care-photos{display:flex;flex-direction:column;gap:26px;padding-top:10px;}
.partners{margin:28px 0 0;}
.partners p{margin:0 0 10px;}
.partners .card__chips li{border-color:rgba(246,235,221,.5);}
.online{margin-top:30px;}
.online p{margin:0 0 14px;}
.online__dance{list-style:none;padding:0 !important;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:4px 24px;font-size:15px;}
.online__dance b{color:var(--brown);font-weight:500;margin-right:4px;}

/* results */
.debuts{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:16px;}
.debut{display:flex;flex-direction:column;padding:16px 22px;background:#1E1A18;color:var(--cream);border-radius:4px;transform:rotate(-1deg);box-shadow:0 6px 18px rgba(0,0,0,.35);}
.debut:nth-child(2){transform:rotate(1.2deg);}
.debut b{font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.1;color:#E8C27A;}
.debut span{font-family:"Gowun Batang",serif;font-size:22px;}
.debut small{font-size:13px;opacity:.8;}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.stats li{padding:14px 18px;border-top:2px solid rgba(246,235,221,.5);}
.stats b{display:block;font-family:var(--f-display);font-weight:400;font-size:40px;line-height:1.1;}
.stats span{font-size:14px;opacity:.85;}
.agencies{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.agency{padding:12px 14px;background:#FBFAF7;color:var(--ink);border-radius:8px;box-shadow:0 3px 10px rgba(20,10,5,.25);}
.agency h4{margin:0 0 4px;font-size:15px;font-weight:500;}
.agency ul{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.5;color:var(--taupe);}
.more{margin-top:10px;}
.more summary{cursor:pointer;display:inline-block;margin-bottom:12px;padding:6px 16px;border:1px solid rgba(246,235,221,.6);border-radius:999px;font-size:14px;}

/* rooms */
.facts{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px 24px;}
.facts li::before{content:"✓ ";color:var(--pink);}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:30px 22px;padding-top:12px;align-items:start;}
.gallery .snap:nth-child(3n+1){transform:rotate(-1.6deg);}
.gallery .snap:nth-child(3n+2){transform:rotate(1.2deg);}
.gallery .snap:nth-child(3n){transform:rotate(-.6deg);}
.gallery .snap--wide{grid-column:span 2;}
.gallery .snap--wide img{aspect-ratio:2/1;}

/* one-point lessons + channels */
.tips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px 24px;}
.tips a{display:block;padding:10px 0;border-bottom:1px dashed rgba(246,235,221,.4);text-decoration:none;}
.tips a::before{content:"♪ ";color:var(--pink);}
.tips a:hover{text-decoration:underline;}
.channels{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.channels a{display:block;padding:7px 15px;border:1px solid currentColor;border-radius:999px;font-size:14px;text-decoration:none;}

/* contact: find us */
.findus{display:grid;grid-template-columns:minmax(260px,1fr) 1fr;gap:34px;align-items:start;}
.findus .snap img{aspect-ratio:auto;}
.findus__addr{margin:0 0 4px;font-family:"Gowun Batang",serif;font-size:22px;}
.findus__steps{margin:14px 0;padding-left:1.3em;}
.findus a{color:var(--brown);}

@media (max-width:760px){
  .scrap{font-size:15px;padding:0 16px 70px;}
  .scrap__index{margin:0 -16px;padding:10px 16px;}
  .scrap__block{padding-top:44px;}
  .teacher,.care-wrap,.findus{grid-template-columns:1fr;}
  .teacher__photos{flex-direction:row;justify-content:center;align-items:flex-start;}
  .teacher__photos .snap{max-width:200px;}
  .teacher__photos .snap--small{max-width:130px;}
  .care-photos{flex-direction:row;}
  .care-photos .snap{flex:1;}
  .card--paper{padding:20px 18px;}
  .gallery{grid-template-columns:1fr 1fr;gap:22px 14px;}
  .gallery .snap figcaption{font-size:16px;}
  .agencies{grid-template-columns:1fr 1fr;}
  .stats b{font-size:32px;}
}

/* ---------- footer: 개인정보처리방침 on every page ---------- */
.legal{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;padding:14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background:var(--paper);color:var(--ink-body);font-size:12.5px;line-height:1.5;text-align:center;}
.legal a{color:var(--brown);}
.legal b{font-weight:500;}

/* ---------- privacy.html ---------- */
.policy{padding-bottom:20px;color:var(--ink-body);line-height:1.7;font-size:15px;}
.policy__name{margin:0 0 10px;font-family:var(--f-serif);font-weight:500;font-size:22px;color:var(--brown);}
.policy__lede{margin:0 0 26px;}
.policy section{margin:0 0 26px;}
.policy h3{margin:0 0 10px;font-size:17px;font-weight:500;color:var(--ink);}
.policy p,.policy ul{margin:0 0 10px;}
.policy ul{padding-left:20px;}
.policy__aside{margin:-14px 0 26px;font-size:14px;}
.policy__table{overflow-x:auto;margin:0 0 12px;-webkit-overflow-scrolling:touch;}
.policy table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;line-height:1.55;background:rgba(255,255,255,.55);}
.policy th,.policy td{padding:9px 10px;border:1px solid rgba(90,60,40,.18);text-align:left;vertical-align:top;}
.policy thead th{background:rgba(90,60,40,.07);font-weight:500;}
.policy tbody th{font-weight:500;white-space:nowrap;}
@media (max-width:600px){
  /* phones: each row becomes a small card instead of a table that scrolls sideways */
  .policy table{min-width:0;background:none;}
  .policy thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .policy tr{display:block;margin:0 0 10px;border:1px solid rgba(90,60,40,.18);border-radius:10px;background:rgba(255,255,255,.6);}
  .policy th,.policy td{display:block;border:0;padding:4px 12px;}
  .policy tbody th{padding-top:10px;white-space:normal;color:var(--brown);}
  .policy td:last-child{padding-bottom:10px;}
  .policy td[data-label]::before{content:attr(data-label) " · ";color:var(--ink);font-weight:500;}
}

/* 월말평가 리포트 (내 폴더) */
.evalr{background:#FFFDF8;border-radius:6px;padding:16px 18px 14px;box-shadow:0 2px 6px rgba(60,40,20,.12);font-size:15px;line-height:1.5;color:#2B2522;}
.evalr p{margin:0;}
.evalr .evalc__month{line-height:1.3;}
.evalr__song{margin-top:2px !important;font-size:14px;color:#5A4636;}
.evalr__total{margin:12px 0 10px;padding:12px 14px;border-radius:10px;background:#F6EEE2;}
.evalr__score{font-size:15px;color:#5A4636;}
.evalr__score b{font-family:var(--f-display, Georgia, serif);font-weight:400;font-size:38px;line-height:1;color:var(--brown);}
.evalr__stage{display:inline-block;margin:6px 0 8px !important;padding:2px 10px;border-radius:999px;background:var(--brown);color:#FBF3E4;font-size:13px;}
.evalr__track{position:relative;height:10px;margin:2px 0 6px;border-radius:999px;background:#E6D9C6;overflow:hidden;}
.evalr__fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--brown);}
.evalr__tick{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#FFFDF8;z-index:1;}
.evalr__next{font-size:13px;font-weight:500;color:#2E6B45;}
.evalr__say{margin-top:4px !important;font-size:13.5px;color:#5A4636;}
.evalr__items{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px;}
.evalr__items li{display:grid;grid-template-columns:6.5em 1fr 2.4em 2.6em;align-items:center;gap:8px;}
.evalr__bar{height:8px;border-radius:999px;background:#EDE3D4;overflow:hidden;}
.evalr__bar span{display:block;height:100%;border-radius:999px;background:#B07A5A;}
.evalr__num{font-variant-numeric:tabular-nums;text-align:right;font-weight:500;}
.evalr__pages{display:grid;grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));gap:8px;margin:6px 0;}
.evalr__page{padding:0;border:1px solid #E2D5C2;border-radius:6px;background:#fff;cursor:zoom-in;overflow:hidden;}
.evalr__page img{display:block;width:100%;height:auto;}
.evalr__secret{margin-top:6px !important;font-size:11.5px;color:#8A7564;}
.evalr__zoom{position:fixed;inset:0;z-index:100;overflow:auto;background:rgba(20,14,10,.92);padding:56px 8px 24px;-webkit-overflow-scrolling:touch;}
.evalr__zoom img{display:block;width:100%;max-width:900px;height:auto;margin:0 auto;}
.evalr__close{position:fixed;top:10px;right:10px;z-index:1;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:#FBF3E4;color:#2B2522;font:inherit;font-size:14px;cursor:pointer;}

/* ---------- audition.html: 오디션 소식 ---------- */
.news__sec{margin:0 0 30px;}
.news__sec h2{margin:0 0 6px;font-family:var(--f-serif);font-weight:500;font-size:22px;color:var(--brown);}
.news__lede{margin:0 0 12px;color:var(--ink-body);font-size:14.5px;line-height:1.6;}
.news__lede a{color:var(--brown);}
.news__list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px;}
.news__card{display:grid;grid-template-columns:6.2em 1fr auto;align-items:center;gap:10px;min-height:48px;padding:10px 14px;
  border:1px solid rgba(90,60,40,.16);border-radius:12px;background:rgba(255,255,255,.65);color:var(--ink);text-decoration:none;}
.news__card:hover{background:#fff;}
.news__card time{font-size:13px;color:#8A7564;font-variant-numeric:tabular-nums;}
.news__what{font-size:15px;line-height:1.45;}
.news__what b{font-weight:500;}
.news__apply{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:4px 0 12px;}
.news__applybtn{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;background:var(--brown);border:1px solid var(--brown);color:#FBF3E4 !important;text-decoration:none;font-size:15px;font-weight:500;}
.news__applybtn:hover{background:#5A2F20;}
.news__applynote{font-size:13px;color:#7A6656;}
.news__go{color:var(--brown);}
.news__more summary{cursor:pointer;margin:4px 0 10px;color:var(--brown);font-size:14px;}
.news__empty{color:#8A7564;}
.news__foot{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 10px;}
.news__foot .pill-btn{display:inline-flex;align-items:center;height:40px;padding:0 18px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);text-decoration:none;font-size:14px;}
@media (max-width:760px){
  .nav a{width:calc(58 * var(--s));font-size:calc(11.5 * var(--s));}
  .news__card{grid-template-columns:1fr auto;gap:2px 10px;}
  .news__card time{grid-column:1;}
  .news__what{grid-column:1;grid-row:2;}
  .news__go{grid-row:1 / span 2;grid-column:2;}
}
/* 오디션 소식: the academy's own posts (js/auditions.js) open in place */
.news__card--own{display:block;padding:0;}
.news__card--own summary{display:grid;grid-template-columns:7.4em 1fr auto;align-items:center;gap:10px;min-height:48px;padding:10px 14px;cursor:pointer;list-style:none;}
.news__card--own summary::-webkit-details-marker{display:none;}
.news__list--own .news__card{border-color:rgba(110,59,40,.35);background:#FFFDF8;}
.news__badge{padding:2px 9px;border-radius:999px;background:var(--brown);color:#FBF3E4;font-size:12px;white-space:nowrap;}
.news__badge.is-empty{background:none;color:var(--brown);font-size:16px;}
.news__card--own[open] .news__badge.is-empty{transform:rotate(45deg);}
.news__body{padding:0 14px 14px;font-size:14.5px;line-height:1.65;color:var(--ink-body);}
.news__meta{margin:0 0 6px;font-weight:500;color:var(--brown);}
.news__text{margin:0 0 10px;white-space:pre-wrap;}
.news__poster{display:block;width:100%;max-width:420px;height:auto;margin:6px 0 10px;border-radius:8px;}
.news__link{color:var(--brown);}
@media (max-width:760px){
  .news__card--own summary{grid-template-columns:1fr auto;gap:2px 10px;}
  .news__card--own summary time{grid-column:1;}
  .news__card--own summary .news__what{grid-column:1;grid-row:2;}
  .news__card--own summary .news__badge{grid-row:1 / span 2;grid-column:2;}
}
/* Audition sub-menu: audition news · results */
.subnav{position:relative;z-index:2;display:flex;justify-content:center;gap:8px;padding:0 20px;margin:0 0 calc(26 * var(--s));}
.subnav a{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:999px;border:1px solid rgba(43,37,34,.35);
  color:var(--ink);font-family:var(--f-serif);font-size:15px;text-decoration:none;background:rgba(255,255,255,.4);}
.subnav a:hover{background:rgba(255,255,255,.8);}
.subnav a[aria-current="page"]{background:var(--brown);border-color:var(--brown);color:#FBF3E4;}
@media (max-width:760px){ .subnav{padding-top:14px;margin-bottom:0;} }

/* ---------- moved blog posts: post.html · tips.html ---------- */
.news__sub{color:#5A4636;font-size:14px;}
.post{color:var(--ink-body);font-size:15.5px;line-height:1.75;}
.post__back{display:inline-block;margin:0 0 14px;color:var(--brown);font-size:14px;}
.post__date{margin:0 0 4px;font-size:13px;color:#8A7564;}
.post__title{margin:0 0 18px;font-family:var(--f-serif);font-weight:500;font-size:clamp(22px, 5.2vw, 30px);line-height:1.35;color:var(--ink);}
.post__pass{margin:0 0 18px;padding:14px 16px;border-radius:12px;background:#F6EEE2;}
.post__pass p{margin:2px 0;}
.post__company{font-family:var(--f-serif);font-size:20px;color:var(--brown);}
.post__body p{margin:0 0 14px;}
.post__body blockquote{margin:0 0 14px;padding:10px 16px;border-left:3px solid var(--brown);background:rgba(255,255,255,.5);}
.post__body hr{border:0;border-top:1px dashed rgba(90,60,40,.3);margin:20px 0;}
.post__body a{color:var(--brown);word-break:break-all;}
.post__img{display:block;width:100%;max-width:560px;margin:0 auto 14px;padding:0;border:0;background:none;cursor:zoom-in;}
.post__img img{display:block;width:100%;height:auto;border-radius:8px;}
.post__yt{position:relative;display:block;width:100%;max-width:640px;aspect-ratio:16/9;margin:0 auto 14px;padding:0;border:0;border-radius:10px;overflow:hidden;background:#000;cursor:pointer;}
.post__yt img{width:100%;height:100%;object-fit:cover;opacity:.85;}
.post__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:44px;border-radius:12px;background:#E33;color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;}
.post__ytframe{display:block;width:100%;max-width:640px;aspect-ratio:16/9;margin:0 auto 14px;border:0;border-radius:10px;}
.post__link{display:block;margin:0 0 14px;padding:12px 14px;border:1px solid rgba(90,60,40,.18);border-radius:10px;background:rgba(255,255,255,.6);text-decoration:none;}
.post__table{border-collapse:collapse;margin:0 0 14px;font-size:14px;}
.post__table td{border:1px solid rgba(90,60,40,.2);padding:6px 8px;}
.tips-grid{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));gap:12px;}
.tip{display:flex;flex-direction:column;height:100%;border:1px solid rgba(90,60,40,.16);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.7);color:var(--ink);text-decoration:none;}
.tip img,.tip__noimg{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#E9DECF;}
.tip__noimg{display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--brown);}
.tip__title{padding:10px 12px 4px;font-size:14.5px;line-height:1.45;}
.tip time{padding:0 12px 10px;margin-top:auto;font-size:12px;color:#8A7564;}
/* English icon names; the two everyone must find keep a small Korean line */
.icon__label{text-align:center;}
.icon__label small{display:block;font-size:.82em;line-height:1.15;opacity:.9;}
/* new 오디션 소식: red dot + a wiggle every few seconds (js/newsbadge.js) */
.icon--new .icon__img{position:relative;animation:icon-wiggle 3.2s ease-in-out infinite;transform-origin:50% 90%;}
.icon--new .icon__img::after{content:"N";position:absolute;top:calc(-6 * var(--s));right:calc(-6 * var(--s));
  min-width:calc(14 * var(--s));height:calc(14 * var(--s));padding:0 calc(3 * var(--s));border-radius:999px;
  background:#E5372E;color:#fff;font:700 calc(9 * var(--s))/calc(14 * var(--s)) var(--f-sans);text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.35);}
@keyframes icon-wiggle{0%,72%,100%{transform:rotate(0)}76%{transform:rotate(-9deg)}80%{transform:rotate(8deg)}84%{transform:rotate(-6deg)}88%{transform:rotate(4deg)}92%{transform:rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){ .icon--new .icon__img{animation:none;} }
@media (max-width:760px){ .icon--new .icon__img::after{top:-6px;right:-6px;min-width:16px;height:16px;font-size:10px;line-height:16px;padding:0 4px;} }

/* 내 폴더: 8 tabs. On a computer they wrap so every tab shows (제휴 업체 was hidden past the edge);
   on phones one row scrolls sideways, with the right edge fading to say there's more */
.book__tabs [role=tab]{flex:0 0 auto;white-space:nowrap;}
@media (max-width:600px){
  .book__tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);}
  .book__tabs::-webkit-scrollbar{display:none;}
}
.rec{background:#FFFDF8;border-radius:6px;padding:14px 16px;box-shadow:0 2px 6px rgba(60,40,20,.12);}
.rec__title{margin:0 0 4px;font-size:16px;font-weight:500;color:var(--brown);}
.rec__list{list-style:none;margin:10px 0 6px;padding:0;display:grid;gap:8px;}
.rec__item{display:grid;grid-template-columns:112px 1fr;gap:10px;align-items:center;color:#2B2522;text-decoration:none;font-size:14px;line-height:1.4;}
.rec__item img{width:112px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#E9DECF;}
.rec__more{font-size:13.5px;color:var(--brown);}
.fold__sum{background:#FFFDF8;border-radius:6px;padding:12px 16px;box-shadow:0 2px 6px rgba(60,40,20,.12);font-size:15px;}
.fold__sum p{margin:0;}
.fold__card{background:#FFFDF8;border-radius:6px;padding:12px 16px;box-shadow:0 2px 6px rgba(60,40,20,.12);font-size:15px;line-height:1.5;}
.fold__card p{margin:0;}
.fold__date{font-size:13px;color:#7A6656;}
.fold__main{font-size:16px;}
.fold__main b{font-weight:500;}
.fold__meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px !important;}
.fold__tag{padding:1px 9px;border-radius:999px;border:1px solid rgba(110,59,40,.35);font-size:12.5px;color:var(--brown);}
.fold__tag.is-done{background:#2E6B45;border-color:#2E6B45;color:#fff;}
/* 제휴 업체 신청 (내 폴더) */
.partner__state--ok{background:#2E6B45;border-color:#2E6B45;color:#fff;}
.partner__state--wait{background:#F6E7C8;}
.partner__state--off{opacity:.6;}
.partner__reply{margin-top:8px !important;padding:8px 10px;border-left:3px solid #2E6B45;background:#F1F6F0;white-space:pre-wrap;font-size:14px;color:#2F3B2F;}
.partner__info{margin-top:6px;white-space:pre-wrap;}
.fold__body{margin-top:6px !important;white-space:pre-wrap;color:#4A3B30;font-size:14.5px;}
.fold__actions{display:flex;gap:14px;margin-top:8px;}
.fold__go{align-self:flex-start;}
.fold__visits{background:#FFFDF8;border-radius:6px;padding:12px 16px;box-shadow:0 2px 6px rgba(60,40,20,.12);}
.fold__visit{margin:6px 0;font-size:14.5px;}
.fold__notice{background:#FFFDF8;border-radius:6px;padding:12px 16px;box-shadow:0 2px 6px rgba(60,40,20,.12);font-size:15px;}
.fold__notice summary{cursor:pointer;}
.fold__add{background:rgba(255,255,255,.55);border-radius:6px;padding:10px 14px;}
.fold__add summary{cursor:pointer;color:var(--brown);font-weight:500;}
.fold__form{display:grid;gap:8px;margin-top:8px;}
.fold__form--log{background:#FFFDF8;border-radius:6px;padding:12px 16px;box-shadow:0 2px 6px rgba(60,40,20,.12);margin-top:0;}
.fold__week{display:flex;gap:6px;margin-top:8px !important;}
.fold__week span{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;border:1px solid rgba(110,59,40,.3);color:#7A6656;}
.fold__week span.is-on{background:var(--brown);border-color:var(--brown);color:#FBF3E4;}
.fold__del{margin-top:4px;font-size:13px;}
.fold__plan{padding:8px 0;border-top:1px dashed rgba(110,59,40,.2);}
.fold__plan:first-of-type{border-top:0;}
.fold__plan .fold__visit{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 6px;}
.fold__plan .fold__notice{box-shadow:none;padding:0;background:none;}
.fold__planlink{color:#2B2522;font-size:15px;}
.fold__ask{background:#FFFDF8;border-radius:6px;padding:12px 16px;box-shadow:0 2px 6px rgba(60,40,20,.12);}
.fold__steps{margin:6px 0 4px;padding-left:20px;font-size:14.5px;line-height:1.6;color:#4A3B30;}
.songrec__voice{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:6px 0 12px;font-size:14.5px;line-height:1.5;}
.songrec__voice dt{color:#7A6656;}
.songrec__voice dd{margin:0;}
.songrec__song{padding:10px 0;border-top:1px dashed rgba(110,59,40,.2);}
.songrec__song p{margin:0;}
.songrec__song .fold__actions{flex-wrap:wrap;}
@media (max-width:480px){.songrec__voice{grid-template-columns:1fr;gap:0;}.songrec__voice dd{margin-bottom:6px;}}
.songrec__rec{display:grid;gap:6px;padding:10px 12px;border:1px dashed rgba(110,59,40,.35);border-radius:8px;}
.songrec__label{margin:0;font-size:14px;color:#4A3B30;font-weight:500;}
.songrec__takes{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.songrec__takes li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;}
.songrec__takes audio{height:34px;max-width:100%;}
.songrec__btns{align-items:center;flex-wrap:wrap;margin-top:2px;}
.songrec__recbtn.is-on{background:#B3261E;border-color:#B3261E;}
.songrec__pick{cursor:pointer;}
.fold__apply{display:flex;width:fit-content;margin:10px 0 8px;text-decoration:none;}
.fold__sum .rec__more{display:block;}
.fold__planapply{margin:6px 0 0 !important;}
.fold__wait{margin:4px 0 6px;padding:8px 12px;border-radius:8px;background:#F6EBDD;color:#5A4636;font-size:14px;line-height:1.5;}

/* audition news: the audition account's Instagram (its own embed page, newest posts) */
.news__instaframe{display:block;width:100%;max-width:540px;height:640px;margin:8px auto 0;border:1px solid rgba(90,60,40,.18);border-radius:12px;background:#fff;}
@media (max-width:480px){.news__instaframe{height:560px;}}

/* 홈으로 · 맨 위로 (js/pagenav.js): bottom right of the long pages, after a little scrolling */
.pagenav{position:fixed;z-index:20;right:max(14px, env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s, transform .2s;}
.pagenav.is-on{opacity:1;transform:none;pointer-events:auto;}
.pagenav__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:52px;height:52px;padding:0;
  border:1px solid rgba(246,235,221,.6);border-radius:50%;background:rgba(62,34,24,.88);color:#F6EBDD;text-decoration:none;cursor:pointer;
  font:500 10.5px/1 'Jost','Noto Sans KR',sans-serif;letter-spacing:.04em;box-shadow:0 4px 14px rgba(0,0,0,.28);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.pagenav__btn svg{width:20px;height:20px;}
.pagenav__btn:hover{background:rgba(110,59,40,.95);}
.pagenav__btn:focus-visible{outline:2px solid #E6CF9E;outline-offset:2px;}
/* the same two at the very end of the page */
.pageend{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;padding:36px 16px 28px;}
.pageend__btn{display:inline-flex;align-items:center;justify-content:center;min-width:140px;height:48px;padding:0 22px;
  border:1px solid rgba(246,235,221,.6);border-radius:999px;background:#3E2218;color:#F6EBDD;text-decoration:none;cursor:pointer;
  font:500 15px/1 'Noto Sans KR',sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.22);}
.pageend__btn:hover{background:var(--brown);}
.pageend__btn:focus-visible{outline:2px solid #E6CF9E;outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.pagenav{transition:none;}}

/* 내방 오디션 신청서 (apply.html, js/apply.js) */
.apply{display:grid;gap:14px;margin-top:10px;}
.apply__head{display:grid;gap:6px;padding:14px 16px;border-radius:10px;background:#FFFDF8;border:1px solid rgba(90,60,40,.15);}
.apply__poster{width:100%;max-width:360px;border-radius:8px;}
.apply__title{margin:0;font-size:20px;font-weight:600;}
.apply__facts{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;font-size:14px;color:var(--brown);}
.apply__body{margin:0;white-space:pre-wrap;font-size:14.5px;line-height:1.6;color:#4A3B30;}
.apply__form{display:grid;gap:12px;}
.apply__set{border:0;margin:0;padding:0;display:grid;gap:4px;}
.apply__set legend{padding:0;margin-bottom:2px;font-size:14px;}
.apply__help{display:block;font-size:12.5px;line-height:1.5;color:#7A6656;}
.apply__radios{display:flex;flex-wrap:wrap;gap:6px 16px;}
.apply__music{padding:10px 12px;border:1px dashed rgba(110,59,40,.35);border-radius:8px;}
/* 선생님 화면 (teacher.html, js/teacher.js) */
.tch__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;}
.tch__head .sys-h{margin:0;}
.tch__find{width:100%;margin:6px 0 10px;padding:10px 12px;border:1px solid rgba(62,42,30,.3);border-radius:8px;font:inherit;background:#FFFDF8;}
.tch__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.tch__student{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid rgba(62,42,30,.25);border-radius:10px;background:#FFFDF8;font:inherit;text-align:left;cursor:pointer;}
.tch__student:hover{border-color:var(--brown);}
.tch__student b{font-weight:500;font-size:16px;}
.tch__last{font-size:12.5px;color:#7A6656;}
.tch__back{margin:4px 0;}
.tch__name{margin:6px 0 10px;font-size:20px;font-weight:500;}
.tch__form{background:#FFFDF8;border-radius:10px;padding:14px 16px;box-shadow:0 2px 6px rgba(60,40,20,.12);margin-bottom:16px;}
.tch__memo span{color:#8A4B2E;}
.tch__memo textarea{background:#FBF1E6;}
.tch__memotext{background:#FBF1E6;padding:6px 8px;border-radius:6px;}
.tch__tabs{margin:6px 0 10px;}
.tch__page{display:grid;gap:10px;}
/* 홈페이지 사용법 (guide.html, tools/guide.py) */
.guide__step{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px;border-radius:10px;background:#FFFDF8;box-shadow:0 2px 6px rgba(60,40,20,.10);}
.guide__num{margin:0;width:40px;height:40px;border-radius:50%;background:var(--brown);color:#FBF3E4;display:flex;align-items:center;justify-content:center;font-family:var(--f-serif);font-size:20px;}
.guide__step h3{margin:6px 0 2px;}
.guide__lede{margin:0 0 8px;color:#7A6656;font-size:14px;}
.guide__step ul{margin:0 0 4px;padding-left:18px;}
.guide__step li{margin:3px 0;}
.guide__go{display:inline-block;margin-top:8px;}
.guide__faq{margin:8px 0;padding:10px 14px;border-radius:8px;background:#FFFDF8;}
.guide__faq summary{cursor:pointer;font-weight:500;}
.guide__faq p{margin:8px 0 0;}
.guide__help{text-align:center;}
@media (max-width:600px){.guide__step{grid-template-columns:1fr;gap:6px;padding:14px;}}