/* ==========================================================================
   consent.css - cookie consent, v3 "마유의 말풍선" (2026-07-28).
   The banner is Mayu herself asking: her round face (favicon art) sits on the
   top edge of a Warm Notebook paper card, a sparkle doodle in the corner,
   centered sentence, and the two pill buttons beneath. Slight overshoot on
   entry so it pops in like the rest of her world; face follows with a tiny
   stagger. Uses the :root tokens from style.css (loaded on every page),
   with inline fallbacks.
   The two buttons are deliberately identical: consent and refusal must cost
   the visitor the same effort.
   ========================================================================== */

.cc{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:400;                    /* above sections and the hatch layer (z200) */
  padding:0 clamp(14px,4vw,28px) clamp(14px,4vw,24px);
}

.cc-inner{
  position:relative;
  max-width:540px;                 /* ko 둘째 줄이 한 줄로 들어가는 폭 */
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  padding:40px 24px 20px;          /* top clears the overlapping face */
  border-radius:var(--r-card-lg,24px);
  color:var(--ink,#56473A);
  background:var(--paper,#FDF6E3);
  border:1.5px solid var(--card-edge,#C9B8A5);
  box-shadow:0 12px 34px var(--shadow-lift,rgba(120,95,60,.16));
  /* Enter: pop with a small overshoot (playful, matches her world). Transition,
     not keyframes, so a quick dismiss never fights the entrance. */
  opacity:1;
  transform:none;
  transition:opacity .42s cubic-bezier(.3,1.36,.4,1),transform .42s cubic-bezier(.3,1.36,.4,1);
}
.cc.cc-enter{pointer-events:none}     /* never intercept clicks before it is visible */
.cc.cc-enter .cc-inner{opacity:0;transform:translateY(16px) scale(.96)}

/* Mayu's face, half over the top edge - the card reads as her speech bubble. */
.cc-avatar{
  position:absolute;
  top:-26px;
  left:50%;
  width:52px;
  height:52px;
  border-radius:50%;
  border:2px solid var(--card-edge,#C9B8A5);
  background:var(--cream,#FAF0DE);
  box-shadow:0 4px 12px var(--shadow,rgba(120,95,60,.13));
  transform:translateX(-50%) rotate(-3deg);
  transition:opacity .38s cubic-bezier(.3,1.36,.4,1) 70ms,transform .38s cubic-bezier(.3,1.36,.4,1) 70ms;
}
.cc.cc-enter .cc-avatar{opacity:0;transform:translateX(-50%) rotate(-3deg) scale(.7)}

/* One sparkle doodle, corner charm. */
.cc-doodle{
  position:absolute;
  top:12px;
  right:16px;
  width:18px;
  opacity:.9;
  transform:rotate(10deg);
  pointer-events:none;
}

.cc-text{
  margin:0;
  font-size:var(--fs-15,16px);
  line-height:1.7;
}
/* 저장 조건 문장은 항상 제 줄에서 시작하고 데스크톱에선 한 줄 유지(전 언어 —
   en도 축약 카피로 한 줄에 들어감). 폭이 모자라는 화면(≤520px)만 자연 줄바꿈. */
.cc-text2{display:block;white-space:nowrap}
@media (max-width:520px){
  .cc-text2{white-space:normal}
}

.cc-actions{display:flex;gap:10px;justify-content:center}

.cc-btn{
  font-family:inherit;
  font-size:var(--fs-13,14px);
  font-weight:700;
  padding:9px 24px;
  border-radius:var(--r-pill,999px);
  cursor:pointer;
  color:var(--ink,#56473A);
  background:var(--cream,#FAF0DE);
  border:1.5px solid var(--line,#ECE3D6);
  transition:background var(--t-fast,120ms) var(--e,ease),border-color var(--t-fast,120ms) var(--e,ease),transform 140ms cubic-bezier(.23,1,.32,1);
}
.cc-btn:active{transform:scale(.97)}
.cc-btn:focus-visible{outline:2px solid var(--rose,#E8899E);outline-offset:3px}

@media (hover:hover) and (pointer:fine){
  .cc-btn:hover{
    background:var(--pink-soft,#FBE3E7);
    border-color:var(--pink,#EC9BAC);
    transform:translateY(-2px);
  }
}

/* Withdrawal affordance appended to the existing footer link rows. */
.cc-reopen{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}
.cc-reopen:focus-visible{outline:2px solid var(--rose,#E8899E);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .cc-inner,.cc-avatar{transition:opacity .2s ease}
  .cc.cc-enter .cc-inner{transform:none}
  .cc.cc-enter .cc-avatar{transform:translateX(-50%) rotate(-3deg)}
  .cc-btn{transition:background .2s ease,border-color .2s ease}
  .cc-btn:active{transform:none}
}

@media (max-width:520px){
  .cc-inner{padding:38px 16px 18px;border-radius:var(--r-card,20px)}
  .cc-actions{width:100%}
  .cc-btn{flex:1}
}