/* ───── 키치 디자인 시스템: 문방구 × Y2K × 세대별 스킨 ───── */
:root{
  --ink:#1a1a1a; --cream:#fff8e7; --pink:#ff5fa2; --yellow:#ffd93d; --blue:#4d96ff;
  --green:#6bcb77; --purple:#b983ff; --orange:#ff9f45; --red:#ff4438;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Jua",sans-serif; color:var(--ink); min-height:100vh; padding:0 0 60px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,95,162,.22) 0 90px, transparent 91px),
    radial-gradient(circle at 88% 16%, rgba(77,150,255,.20) 0 110px, transparent 111px),
    radial-gradient(circle at 80% 85%, rgba(107,203,119,.18) 0 100px, transparent 101px),
    repeating-linear-gradient(45deg, rgba(255,217,61,.10) 0 22px, transparent 22px 44px),
    var(--cream);
}
.serif{font-family:"Nanum Myeongjo",serif}

/* 상단 티커 */
.ticker{background:var(--ink); color:#fff; overflow:hidden; white-space:nowrap; font-size:13px; padding:7px 0;}
.ticker span{display:inline-block; padding-left:100%; animation:tick 18s linear infinite;}
@keyframes tick{to{transform:translateX(-100%)}}

.wrap{max-width:640px; margin:0 auto; padding:22px 16px 0;}

/* 로고 */
.logo{text-align:center; margin:6px 0 18px; position:relative;}
.logo h1{
  font-family:"Black Han Sans",sans-serif; font-size:44px; margin:0; line-height:1.05; letter-spacing:1px;
  color:var(--pink);
  text-shadow:2.5px 2.5px 0 var(--ink), 5px 5px 0 var(--yellow);
  transform:rotate(-2deg);
}
.logo h1 .b{color:var(--blue)}
.logo .badge{
  display:inline-block; background:var(--yellow); border:3px solid var(--ink); border-radius:999px;
  box-shadow:var(--shadow-sm); padding:4px 14px; font-size:13.5px; margin-top:10px; transform:rotate(1.5deg);
}
.logo .stk{position:absolute; font-size:26px; animation:wob 2.6s ease-in-out infinite;}
.stk1{left:4%; top:-6px; animation-delay:.2s} .stk2{right:5%; top:2px; animation-delay:.8s}
.stk3{left:12%; bottom:-10px; animation-delay:1.4s}
@keyframes wob{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.12)}}
.sub{ text-align:center; font-size:14.5px; line-height:1.75; margin:0 0 16px; color:#333;}
.sub b{background:linear-gradient(transparent 60%, var(--yellow) 60%); padding:0 2px;}

/* 카드 공통 */
.card{background:#fff; border:3.5px solid var(--ink); border-radius:18px; box-shadow:var(--shadow); padding:16px;}

/* 입력 */
textarea{
  width:100%; min-height:76px; background:#fff; border:3px solid var(--ink); border-radius:14px;
  padding:13px; font:inherit; font-size:17px; line-height:1.6; resize:vertical; box-shadow:inset 3px 3px 0 rgba(0,0,0,.06);
}
textarea:focus{outline:none; border-color:var(--pink); background:#fff6fb;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.chip{
  background:#fff; border:2.5px solid var(--ink); border-radius:999px; padding:7px 13px; font-size:13px;
  cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .06s;
}
.chip:nth-child(4n+1){background:#ffe3f0}.chip:nth-child(4n+2){background:#e3f0ff}
.chip:nth-child(4n+3){background:#e9ffe3}.chip:nth-child(4n){background:#fff6d8}
.chip:hover{transform:translate(-1px,-1px) rotate(-1deg);}
.chip:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink);}
.go{
  width:100%; margin-top:14px; font-family:"Black Han Sans",sans-serif; font-size:19px; letter-spacing:1px;
  background:linear-gradient(180deg,var(--pink),#ff3d8b); color:#fff; border:3.5px solid var(--ink);
  border-radius:16px; padding:15px; cursor:pointer; box-shadow:var(--shadow);
  text-shadow:1.5px 1.5px 0 rgba(0,0,0,.25); transition:transform .06s, box-shadow .06s;
}
.go:hover{transform:translate(-1px,-1px); box-shadow:8px 8px 0 var(--ink);}
.go:active{transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink);}
.go:disabled{opacity:.5; cursor:default; transform:none; box-shadow:var(--shadow);}

/* 원문 말풍선 */
.orig{
  margin:6px auto 16px; max-width:92%; text-align:center; background:#fff; border:3px solid var(--ink);
  border-radius:999px; box-shadow:var(--shadow-sm); padding:11px 18px; font-size:15.5px; transform:rotate(-.6deg);
}
.orig b{color:var(--red)}

/* ───── 세대별 패널 스킨 ───── */
@keyframes pop{from{opacity:0; transform:translateY(14px) scale(.97)}to{opacity:1; transform:none}}
.panel{border:3.5px solid var(--ink); border-radius:18px; box-shadow:var(--shadow); padding:14px 16px;
  margin:14px 0; animation:pop .35s; position:relative; background:#fff;}
.panel:nth-child(odd){transform:rotate(.5deg)} .panel:nth-child(even){transform:rotate(-.5deg)}
.panel .ph{display:flex; align-items:center; gap:8px; margin-bottom:9px;}
.panel .pl{font-size:17px; letter-spacing:.5px;}
.panel .pb{margin-left:auto; font-size:10.5px; background:var(--ink); color:#fff; border-radius:999px; padding:3px 9px;}
.panel .pt{font-size:15.5px; line-height:1.85; word-break:break-all; white-space:pre-wrap;}
.panel .spin{font-size:13.5px; opacity:.75}
.panel .copy{
  margin-top:10px; background:#fff; border:2.5px solid var(--ink); border-radius:999px; padding:5px 12px;
  font:inherit; font-size:12px; cursor:pointer; box-shadow:var(--shadow-sm);
}
.panel .copy:active{transform:translate(2px,2px); box-shadow:0 0 0 var(--ink);}

/* 🧒 잼민이 = 문방구 알림장 */
.sk-jaem{background:
  repeating-linear-gradient(transparent 0 30px, rgba(255,95,162,.25) 30px 31.5px), #fff0f7;}
.sk-jaem .pt{font-family:"Nanum Pen Script",cursive; font-size:24px; line-height:1.55;}
.sk-jaem .pl{color:#ff2d88}
.sk-jaem::after{content:"⭐"; position:absolute; top:-14px; right:14px; font-size:26px; transform:rotate(14deg);}

/* 🕶️ Z세대 = Y2K 네온 */
.sk-z{background:#12121f; border-color:#000;}
.sk-z .pt{color:#5dff9d; font-family:ui-monospace,Menlo,monospace; font-size:14.5px;
  text-shadow:0 0 7px rgba(93,255,157,.75);}
.sk-z .pl{color:#5dff9d; text-shadow:0 0 8px rgba(93,255,157,.8);}
.sk-z .pb{background:#5dff9d; color:#0a0a14;}
.sk-z .copy{background:#12121f; color:#5dff9d; border-color:#5dff9d; box-shadow:3px 3px 0 #5dff9d33;}
.sk-z::after{content:"👾"; position:absolute; top:-13px; right:16px; font-size:24px;}

/* 💼 밀레니얼 = 업무 카톡 */
.sk-mill{background:#ffe94d;}
.sk-mill .pt{background:#fff; border:2.5px solid var(--ink); border-radius:4px 18px 18px 18px;
  padding:11px 13px; font-size:14.5px;}
.sk-mill .pl{color:#5f4b00}
.sk-mill::after{content:"💬"; position:absolute; top:-13px; right:15px; font-size:24px;}

/* 👔 부장님 = 아침인사 일출짤 */
.sk-boss{background:linear-gradient(180deg,#ffd166 0%, #ff9f45 45%, #ff6b6b 100%); border-color:#5a2d00;}
.sk-boss .pt{font-family:"Nanum Myeongjo",serif; font-weight:800; color:#fff; font-size:16.5px;
  text-shadow:1.5px 1.5px 0 rgba(90,45,0,.65);}
.sk-boss .pl{color:#5a2d00}
.sk-boss .pb{background:#5a2d00}
.sk-boss::after{content:"🌅"; position:absolute; top:-14px; right:14px; font-size:26px;}

/* 📜 조선 = 한지 두루마리 */
.sk-joseon{background:
  radial-gradient(circle at 30% 20%, rgba(160,120,60,.10) 0 60px, transparent 61px),
  radial-gradient(circle at 75% 70%, rgba(160,120,60,.10) 0 80px, transparent 81px), #f4e8cf;
  border-color:#5c4423;}
.sk-joseon .pt{font-family:"Nanum Myeongjo",serif; font-weight:700; color:#3f2d14; font-size:16px; line-height:2;}
.sk-joseon .pl{color:#5c4423}
.sk-joseon .pb{background:#5c4423}
.sk-joseon::after{content:"印"; position:absolute; top:10px; right:12px; font-size:15px; color:#fff;
  background:#c0392b; border-radius:4px; padding:3px 5px; font-family:"Nanum Myeongjo",serif;}

/* 공유 */
.share{display:flex; gap:10px; margin-top:20px;}
.share button{
  flex:1; font-family:"Jua",sans-serif; font-size:15px; background:#fff; border:3px solid var(--ink);
  border-radius:14px; padding:14px; cursor:pointer; box-shadow:var(--shadow-sm);
}
.share .prime{background:var(--blue); color:#fff;}
.share button:active{transform:translate(2px,2px); box-shadow:0 0 0 var(--ink);}
.foot{text-align:center; font-size:12.5px; color:#7a6a50; margin-top:18px; line-height:1.8;}
.hidden{display:none}
a{color:var(--blue)}