/* Lucian UX/UI Prompt theme tokens · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/
   Tokens mapped to the Korean by Line palette (site is light-only). */
:root{
  color-scheme:light;
  --ux-page:var(--bg);
  --ux-surface:var(--paper);
  --ux-surface-2:#f5f5f5;
  --ux-surface-3:#e4e4e4;
  --ux-ink:var(--ink);
  --ux-ink-2:#4d4d48;
  --ux-ink-3:var(--muted);
  --ux-line:rgba(26,26,26,.09);
  --ux-line-2:rgba(26,26,26,.17);
  --ux-accent:#b89b00;
  --ux-accent-2:#1a1a1a;
  --ux-accent-soft:rgba(255,214,0,.25);
  --ux-accent-ink:#1a1a1a;
  --ux-mint:#1a1a1a;
  --ux-warn:#d6731e;
  --ux-danger:#d93a55;
  --ux-glass:rgba(255,255,255,.58);
  --ux-glass-line:rgba(255,255,255,.85);
  --ux-shadow:rgba(0,0,0,.14);
  --ux-shadow-strong:rgba(0,0,0,.3);
  --ux-grad:linear-gradient(120deg,#ffd600,#f0a500);
  --ux-ease:cubic-bezier(.2,.8,.2,1);
  --ux-spring:cubic-bezier(.34,1.45,.64,1);
}
/* 요소 공통 베이스 — 루트에 .ux 클래스를 붙입니다 */
.ux,.ux *,.ux *::before,.ux *::after{box-sizing:border-box}
.ux{
  font-family:inherit;
  color:var(--ux-ink);-webkit-font-smoothing:antialiased;letter-spacing:-.01em;
  -webkit-tap-highlight-color:transparent;
  word-break:keep-all;overflow-wrap:break-word;
}
:where(.ux) :is(button,input,textarea,select){font:inherit;color:inherit}
:where(.ux) button{cursor:pointer}
.ux :focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.ux [hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){
  .ux,.ux *,.ux *::before,.ux *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* Lucian UX/UI Prompt #007 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#007 */
.u007{--grad1:#8B6CFF;--grad2:#FF6B8B;position:relative;width:320px;height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.u007-info{text-align:center}
.u007-info b{display:block;font-size:19px;font-weight:740;letter-spacing:-.03em}
.u007-info span{display:block;margin-top:4px;font-size:13.5px;color:var(--ux-ink-3)}
.u007-disc{position:relative;width:160px;height:160px;margin:18px 0 16px;display:grid;place-items:center}
.u007-ring{position:absolute;inset:0;transform:rotate(-90deg)}
.u007-ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.u007-ring .u007-track{stroke:var(--ux-line-2)}
.u007-ring .u007-arc{stroke:url(#u007-g);stroke-dasharray:452.4;stroke-dashoffset:calc(452.4 * (1 - var(--p,0)))}
.u007-btn{position:relative;width:112px;height:112px;border:0;padding:0;border-radius:50%;color:#fff;background:linear-gradient(145deg,var(--grad1),var(--grad2));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),inset 0 -10px 18px -10px rgba(40,10,80,.45),0 24px 44px -20px color-mix(in srgb,var(--grad1) 80%,transparent);
  transition:transform .5s var(--ux-spring),box-shadow .5s var(--ux-ease)}
.u007-btn:hover{transform:scale(1.04)}
.u007-btn:active{transform:scale(.92)}
.u007-btn:focus-visible{outline:2px solid var(--ux-accent);outline-offset:6px}
.u007-btn svg{width:46px;height:46px;display:block;margin:auto}
.u007-btn polygon{fill:currentColor;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round}
.u007-pulse{position:absolute;inset:6px;border-radius:50%;background:linear-gradient(145deg,var(--grad1),var(--grad2));opacity:0;z-index:-1}
.u007.is-play .u007-pulse{animation:u007-pulse 2.4s var(--ux-ease) infinite}
@keyframes u007-pulse{0%{opacity:.45;transform:scale(.9)}100%{opacity:0;transform:scale(1.5)}}
.u007-wave{display:flex;align-items:center;gap:3px;height:40px;width:270px;cursor:pointer;touch-action:none;border-radius:8px}
.u007-wave:focus-visible{outline:2px solid var(--ux-accent);outline-offset:4px}
.u007-wave i{flex:1;height:calc(var(--h) * 1%);min-height:4px;border-radius:3px;background:var(--ux-line-2);transform-origin:50% 50%;transition:background-color .25s var(--ux-ease)}
.u007-wave i.on{background:linear-gradient(180deg,var(--grad1),var(--grad2))}
.u007.is-play .u007-wave i.on:nth-last-child(-n+40){animation:u007-eq .9s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -1s)}
@keyframes u007-eq{from{transform:scaleY(.82)}to{transform:scaleY(1.06)}}
.u007-time{display:flex;justify-content:space-between;width:270px;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}
.u007-time b{color:var(--ux-ink-2);font-weight:650}
/* Korean by Line color links (black disc, white glyph, accent progress ring) */
.u007{--grad1:#ffd600;--grad2:#f0a500;max-width:100%}
.u007-btn{color:#1a1a1a;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -10px 18px -10px rgba(90,70,0,.35),0 24px 44px -20px color-mix(in srgb,var(--grad2) 80%,transparent)}
.u007-info b{font-family:var(--font-ko)}

/* Lucian UX/UI Prompt #008 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#008 */
.u008{position:relative;width:340px;height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.u008-tabs{display:flex;gap:4px;align-self:flex-start;margin-left:12px}
.u008-tab{height:30px;padding:0 12px;border:0;border-radius:9px;background:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:600;color:var(--ux-ink-3);transition:background-color .3s var(--ux-ease),color .3s var(--ux-ease)}
.u008-tab[aria-selected="true"]{background:var(--ux-surface);color:var(--ux-ink);box-shadow:0 0 0 1px var(--ux-line)}
.u008-box{position:relative;display:flex;align-items:center;width:316px;height:62px;padding:0 8px 0 18px;border-radius:18px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line-2),0 18px 32px -24px var(--ux-shadow-strong);overflow:visible;transition:box-shadow .45s var(--ux-ease)}
.u008-code{position:relative;flex:1;min-width:0;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;white-space:nowrap;color:var(--ux-ink)}
.u008-code em{font-style:normal;color:var(--ux-mint);margin-right:8px;user-select:none}
.u008-code b{font-weight:500;color:var(--ux-accent)}
.u008-cmd{display:inline-block}
.u008-code::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--ux-mint) 30%,transparent) 50%,transparent 80%);transform:translateX(-110%);pointer-events:none}
.u008.is-copied .u008-code::after{animation:u008-sweep .7s var(--ux-ease)}
@keyframes u008-sweep{to{transform:translateX(110%)}}
.u008-btn{position:relative;flex:none;width:46px;height:46px;border:0;padding:0;border-radius:13px;background:var(--ux-surface-2);color:var(--ux-ink-2);display:grid;place-items:center;transition:background-color .35s var(--ux-ease),color .35s var(--ux-ease),transform .45s var(--ux-spring)}
.u008-btn:hover{background:var(--ux-surface-3);color:var(--ux-ink)}
.u008-btn:active{transform:scale(.88)}
.u008-btn:focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.u008-btn svg{position:absolute;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s var(--ux-ease),transform .5s var(--ux-spring)}
.u008-ok{opacity:0;transform:scale(.4) rotate(-30deg)}
.u008-ok path{stroke-width:2.6;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .4s var(--ux-ease) .1s}
.u008.is-copied .u008-btn{background:var(--ux-mint);color:var(--ux-accent-ink)}
.u008.is-copied .u008-cp{opacity:0;transform:scale(.4) rotate(30deg)}
.u008.is-copied .u008-ok{opacity:1;transform:none}
.u008.is-copied .u008-ok path{stroke-dashoffset:0}
.u008.is-copied .u008-box{box-shadow:0 0 0 1.5px var(--ux-mint),0 0 0 6px color-mix(in srgb,var(--ux-mint) 16%,transparent),0 18px 32px -24px var(--ux-shadow-strong)}
.u008-tip{position:absolute;right:-6px;top:-44px;padding:7px 12px;border-radius:10px;background:var(--ux-ink);color:var(--ux-page);font-size:13px;font-weight:650;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(8px) scale(.8);transform-origin:80% 100%;transition:opacity .25s var(--ux-ease),transform .5s var(--ux-spring)}
.u008-tip::after{content:"";position:absolute;right:24px;bottom:-5px;width:10px;height:10px;background:inherit;border-radius:2px;transform:rotate(45deg)}
.u008.is-copied .u008-tip{opacity:1;transform:none}
/* Korean by Line: share box — square corners, check turns accent; the copied text is the lesson URL */
.u008{max-width:100%;height:auto}
.u008-box{max-width:100%}
.u008.is-copied .u008-btn{background:var(--yellow);color:var(--ink)}
.u008-code{font-family:inherit;font-size:13.5px}
.u008-code em{color:var(--ux-ink-3)}