/* ListeningMind App Design System · shell components v1.0.0
   Requires lm-app-tokens.css. Add class="lm-app" to <body>.
   Rules enforced here: one shadow, no hover lift or scale, no uppercase or wide tracking,
   red speaks (hero, eyebrow, highlight, tool link), violet operates (submit, focus, selected). */

/* ---------- base ---------- */
.lm-app{margin:0;font:var(--lm-t-body);color:var(--lm-ink);background:var(--lm-white);-webkit-font-smoothing:antialiased;word-break:keep-all}
html[lang="ja"] .lm-app{font-family:var(--lm-font-ja)}
html[lang="ko"] .lm-app{font-family:var(--lm-font-ko)}
.lm-app *,.lm-app *::before,.lm-app *::after{box-sizing:border-box}
:where(.lm-app) a{color:inherit} /* zero specificity so component colors (CTA white, tool link coral) always win */
.lm-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lm-app :focus-visible{outline:var(--lm-bw-accent) solid var(--lm-violet);outline-offset:2px}

/* ---------- app tile (app logo symbol) ---------- */
.lm-tile{display:inline-grid;place-items:center;background:var(--lm-grad-tile);color:#fff;flex:none}
.lm-tile svg{display:block}
.lm-tile--20{width:20px;height:20px;border-radius:5px}.lm-tile--20 svg{width:13px;height:13px}
.lm-tile--32{width:32px;height:32px;border-radius:8px}.lm-tile--32 svg{width:20px;height:20px}
.lm-tile--40{width:40px;height:40px;border-radius:10px}.lm-tile--40 svg{width:24px;height:24px}

/* ---------- 48px app rail ---------- */
.lm-rail{position:fixed;left:0;top:0;bottom:0;width:var(--lm-rail-w);background:var(--lm-white);border-right:var(--lm-bw) solid var(--lm-line);display:flex;flex-direction:column;align-items:center;padding:12px 0;z-index:610;overflow-y:auto;overflow-x:visible}
html.lm-has-rail body{padding-left:var(--lm-rail-w)}
.lm-rail__home{width:32px;height:32px;display:grid;place-items:center;margin-bottom:8px;border-radius:8px}
.lm-rail__home img{width:24px;height:auto;display:block}
.lm-rail__group{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;border-top:var(--lm-bw) solid var(--lm-line-soft);width:100%}
.lm-rail__app{position:relative;width:36px;height:36px;display:grid;place-items:center;border-radius:8px;color:var(--lm-muted);text-decoration:none;transition:color var(--lm-dur-color) ease,background-color var(--lm-dur-color) ease}
.lm-rail__icon{width:32px;height:32px;display:grid;place-items:center;border-radius:8px}
.lm-rail__icon svg{width:20px;height:20px}
.lm-rail__app:hover{color:var(--lm-ink);background:var(--lm-surface)}
.lm-rail__app.is-current{background:transparent}
.lm-rail__app.is-current .lm-rail__icon{background:var(--lm-grad-tile);color:#fff}
.lm-tip{position:fixed;z-index:700;background:var(--lm-charcoal);color:#fff;font:var(--lm-t-chip);padding:6px 10px;border-radius:var(--lm-r-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease}
.lm-tip.is-on{opacity:1}

/* ---------- GNB 56px ---------- */
.lm-gnb{position:sticky;top:0;z-index:600;height:var(--lm-gnb-h);background:var(--lm-white);border-bottom:var(--lm-bw) solid var(--lm-line)}
.lm-gnb__in{max-width:calc(var(--lm-container) + 2*var(--lm-gutter));height:100%;margin:0 auto;padding:0 var(--lm-gutter);display:flex;align-items:center;gap:28px}
.lm-lockup{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--lm-ink);flex:none}
.lm-lockup__name{font:700 16px/24px var(--lm-font);letter-spacing:-.01em;color:var(--lm-ink)}
.lm-lockup__div{width:var(--lm-bw);height:20px;background:var(--lm-line);margin:0 4px}
.lm-lockup__lm{position:relative;display:inline-flex}
.lm-lockup__lm img{height:20px;width:auto;display:block}
.lm-ver{font:var(--lm-t-chip);padding:2px 8px;border-radius:var(--lm-r-sm);background:var(--lm-line-soft);color:var(--lm-ink-2)}
.lm-gnb__nav{display:flex;align-self:stretch;gap:24px}
.lm-gnb__link{display:flex;align-items:center;font:var(--lm-t-nav);color:var(--lm-ink-2);text-decoration:none;border-bottom:var(--lm-bw-accent) solid transparent;margin-bottom:calc(-1 * var(--lm-bw));transition:color var(--lm-dur-color) ease}
.lm-gnb__link:hover{color:var(--lm-ink)}
.lm-gnb__link.is-current{color:var(--lm-ink);border-bottom-color:var(--lm-coral)}
.lm-gnb__right{margin-left:auto;display:flex;align-items:center;gap:8px}
.lm-lang{position:relative}
.lm-lang__btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:var(--lm-bw) solid var(--lm-line);border-radius:var(--lm-r-pill);background:var(--lm-white);font:var(--lm-t-nav);color:var(--lm-ink-2);cursor:pointer;transition:border-color var(--lm-dur-color) ease,color var(--lm-dur-color) ease}
.lm-lang__btn:hover{border-color:var(--lm-line-strong);color:var(--lm-ink)}
.lm-lang__btn svg{width:16px;height:16px}
.lm-lang__menu{position:absolute;right:0;top:42px;min-width:140px;margin:0;padding:6px;list-style:none;background:var(--lm-white);border:var(--lm-bw) solid var(--lm-line);border-radius:var(--lm-r);box-shadow:var(--lm-shadow);z-index:620}
.lm-lang__menu li{padding:8px 12px;border-radius:var(--lm-r-sm);font:var(--lm-t-small);color:var(--lm-ink);cursor:pointer}
.lm-lang__menu li:hover{background:var(--lm-surface)}
.lm-lang__menu li[aria-selected="true"]{color:var(--lm-violet);font-weight:700}

/* ---------- hero ---------- */
.lm-hero{max-width:var(--lm-container);margin:0 auto;padding:64px var(--lm-gutter) var(--lm-section);display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start}
.lm-eyebrow{font:var(--lm-t-eyebrow);color:var(--lm-coral);margin:0 0 12px}
.lm-h1{font:var(--lm-t-h1);letter-spacing:var(--lm-tracking-head);color:var(--lm-ink);margin:0 0 16px;max-width:21em;word-break:keep-all}
.lm-hl{font-style:normal;color:var(--lm-coral)}
.lm-lead{font:var(--lm-t-lead);color:var(--lm-ink-2);max-width:560px;margin:0 0 24px}
.lm-benefits{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px}
.lm-benefits li{display:flex;align-items:center;gap:10px;font:500 16px/24px var(--lm-font);color:var(--lm-ink)}
.lm-benefits svg{width:20px;height:20px;color:var(--lm-maroon);flex:none}
.lm-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.lm-datameta{font:var(--lm-t-caption);color:var(--lm-muted);margin:0}
.lm-hero [data-lm-head],.lm-hero [data-lm-body]{animation:lm-fade .35s ease both}
.lm-searchbar{display:flex;gap:8px;max-width:560px;margin:0 0 14px}
.lm-searchbar .lm-input{flex:1}

/* ---------- buttons (three kinds, no more) ---------- */
.lm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:var(--lm-t-label);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:opacity var(--lm-dur-btn) var(--lm-ease),background-color var(--lm-dur-btn) var(--lm-ease),box-shadow var(--lm-dur-btn) var(--lm-ease)}
.lm-btn--cta{height:40px;padding:0 20px;border-radius:var(--lm-r-pill);background:var(--lm-grad-cta);color:#fff}          /* speaking layer */
.lm-btn--cta:hover{opacity:.88}
.lm-btn--outline{height:40px;padding:0 20px;border-radius:var(--lm-r-pill);background:transparent;color:var(--lm-ink);box-shadow:inset 0 0 0 var(--lm-bw) var(--lm-line-strong)}
.lm-btn--outline:hover{background:rgba(0,0,0,.06)}
.lm-btn--product{height:48px;padding:0 24px;border-radius:var(--lm-r);background:var(--lm-violet);color:#fff;font:700 16px/24px var(--lm-font)} /* operating layer */
.lm-btn--product:hover{background:var(--lm-violet-hover)}
.lm-btn[disabled],.lm-btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.lm-link{font:700 16px/24px var(--lm-font);color:var(--lm-coral);text-decoration:none}
.lm-link:hover{color:var(--lm-red-deep)}

/* ---------- signature card (example report) ---------- */
.lm-sigcard{background:var(--lm-white);border-radius:var(--lm-r);box-shadow:var(--lm-shadow);overflow:hidden}
.lm-sigcard__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 24px;background:var(--lm-surface);transition:background var(--lm-dur-color) ease}
.lm-sigcard__title{font:var(--lm-t-label);color:var(--lm-ink-2);margin:0;transition:color var(--lm-dur-color) ease}
.lm-sigcard__cap{font:var(--lm-t-caption);color:var(--lm-ink-3);margin:2px 0 0}
.lm-sigcard__icon{width:28px;height:28px;color:var(--lm-maroon);flex:none}
.lm-sigcard__body{padding:20px 24px 12px;min-height:280px}
.lm-sigcard__foot{padding:12px 24px 18px;border-top:var(--lm-bw) solid var(--lm-line-soft)}
.lm-sigcard:hover .lm-sigcard__head{background:linear-gradient(90deg,rgba(255,91,96,0),rgba(255,91,96,.10)),var(--lm-surface)}
.lm-sigcard:hover .lm-sigcard__title{color:var(--lm-red-deep)}
.lm-sig svg{display:block;width:100%;height:auto;overflow:visible}
.lm-sig text{font-family:var(--lm-font)}
.lm-sig .lm-grow{transform-box:fill-box;transform-origin:left center;animation:lm-grow .6s var(--lm-ease-out) both}
.lm-sig .lm-rise{transform-box:fill-box;transform-origin:center bottom;animation:lm-rise .6s var(--lm-ease-out) both}
.lm-sig .lm-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:lm-draw .9s var(--lm-ease-out) forwards}
.lm-sig .lm-pop{transform-box:fill-box;transform-origin:center;animation:lm-pop .45s var(--lm-ease-out) both}
.lm-sig .lm-fadein{animation:lm-fade .5s ease both}

/* ---------- sections ---------- */
.lm-section{max-width:var(--lm-container);margin:0 auto;padding:var(--lm-section) var(--lm-gutter)}
.lm-band{background:var(--lm-band)}
.lm-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin:0 0 24px}
.lm-section-eyebrow{font:var(--lm-t-eyebrow);color:var(--lm-red-deep);margin:0 0 6px}
.lm-h2{font:var(--lm-t-h2);color:var(--lm-ink);margin:0}
.lm-h3{font:var(--lm-t-h3);color:var(--lm-ink-2);margin:0}
.lm-rule{height:var(--lm-bw);border:0;background:var(--lm-grad-rule);margin:24px 0}

/* ---------- stepper (brand step diagram) ---------- */
.lm-stepper{display:flex;align-items:center;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.lm-step{display:flex;align-items:center;gap:8px;font:500 13px/18px var(--lm-font);color:var(--lm-muted)}
.lm-step+.lm-step::before{content:"";width:28px;height:var(--lm-bw);background:var(--lm-line);margin:0 10px}
.lm-step__n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--lm-surface);border:var(--lm-bw) solid var(--lm-line);font:700 14px/1 var(--lm-font);color:var(--lm-muted)}
.lm-step.is-current{color:var(--lm-ink)}
.lm-step.is-current .lm-step__n{color:var(--lm-red-deep);border:var(--lm-bw-strong) solid var(--lm-red-deep)}
.lm-step.is-done{color:var(--lm-ink-2)}
.lm-step.is-done .lm-step__n{color:var(--lm-red-deep);border-color:var(--lm-red-deep)}

/* ---------- form (operating layer) ---------- */
.lm-form{background:var(--lm-white);border-radius:var(--lm-r);box-shadow:var(--lm-shadow);padding:24px 32px}
.lm-field{display:grid;gap:6px;margin:0 0 16px}
.lm-label{font:var(--lm-t-label);color:var(--lm-ink-2)}
.lm-help{font:var(--lm-t-caption);color:var(--lm-muted)}
.lm-input,.lm-select{width:100%;height:48px;padding:0 16px;font:var(--lm-t-body);color:var(--lm-ink);background:var(--lm-white);border:var(--lm-bw) solid var(--lm-line);border-radius:var(--lm-r-sm);transition:border-color var(--lm-dur-color) ease,box-shadow var(--lm-dur-color) ease}
.lm-input::placeholder{color:var(--lm-muted)}
.lm-input:hover,.lm-select:hover{border-color:var(--lm-line-strong)}
.lm-input:focus,.lm-select:focus{outline:none;border-color:var(--lm-violet);box-shadow:0 0 0 3px var(--lm-violet-soft)}
.lm-select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239691A2' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.lm-grid-2{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.lm-more{margin:4px 0 16px;border-top:var(--lm-bw) solid var(--lm-line-soft);padding-top:12px}
.lm-more>summary{cursor:pointer;list-style:none;font:var(--lm-t-label);color:var(--lm-ink-2);display:flex;align-items:center;gap:6px}
.lm-more>summary::-webkit-details-marker{display:none}
.lm-more>summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--lm-muted);border-bottom:1.5px solid var(--lm-muted);transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.lm-more[open]>summary::after{transform:rotate(225deg)}
.lm-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
.lm-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:0 0 16px}
.lm-opt{position:relative;display:block;padding:14px 16px;background:var(--lm-white);border:var(--lm-bw) solid var(--lm-line);border-radius:var(--lm-r);cursor:pointer;transition:border-color var(--lm-dur-color) ease,background-color var(--lm-dur-color) ease}
.lm-opt input{position:absolute;opacity:0;pointer-events:none}
.lm-opt:hover{background:var(--lm-surface)}
.lm-opt__t{display:block;font:var(--lm-t-label);color:var(--lm-ink)}
.lm-opt__d{display:block;font:var(--lm-t-caption);color:var(--lm-ink-3);margin-top:2px}
.lm-opt:has(input:checked),.lm-opt.is-selected{border:var(--lm-bw-strong) solid var(--lm-violet);background:var(--lm-violet-soft)}
.lm-opt:has(input:checked)::after,.lm-opt.is-selected::after{content:"";position:absolute;right:12px;top:12px;width:18px;height:18px;border-radius:50%;background:var(--lm-violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.lm-chips{display:flex;flex-wrap:wrap;gap:8px}
.lm-chip{display:inline-flex;align-items:center;font:var(--lm-t-chip);padding:4px 10px;border-radius:var(--lm-r-sm);background:var(--lm-line-soft);color:var(--lm-ink-2);border:0}
button.lm-chip{cursor:pointer;transition:background-color var(--lm-dur-color) ease,color var(--lm-dur-color) ease}
.lm-chip[aria-pressed="true"],.lm-chip.is-selected{background:var(--lm-violet);color:#fff}
.lm-chip--label{background:var(--lm-coral-soft);color:var(--lm-red-deep)}
.lm-seg{display:inline-flex;padding:3px;background:var(--lm-line-soft);border-radius:var(--lm-r-pill)}
.lm-seg button{border:0;background:transparent;font:var(--lm-t-nav);color:var(--lm-ink-2);padding:6px 14px;border-radius:var(--lm-r-pill);cursor:pointer}
.lm-seg button[aria-selected="true"]{background:var(--lm-violet);color:#fff}

/* ---------- table, states ---------- */
.lm-table{width:100%;border-collapse:separate;border-spacing:0;font:var(--lm-t-small);color:var(--lm-ink)}
.lm-table th{font:var(--lm-t-label);text-align:left;color:var(--lm-ink-2);background:var(--lm-surface);padding:12px 16px}
.lm-table th:first-child{border-radius:10px 0 0 10px}.lm-table th:last-child{border-radius:0 10px 10px 0}
.lm-table td{padding:12px 16px;border-bottom:var(--lm-bw) solid var(--lm-line-soft)}
.lm-table tr:last-child td{border-bottom:0}
.lm-num,.lm-table th.lm-num{text-align:right;font-variant-numeric:tabular-nums}
.lm-up{color:var(--lm-pos);font-weight:700}.lm-down{color:var(--lm-neg);font-weight:700}
.lm-state{background:var(--lm-surface);border-radius:var(--lm-r);padding:24px;text-align:center;font:var(--lm-t-small);color:var(--lm-ink-3)}
.lm-state b{display:block;font:var(--lm-t-label);color:var(--lm-ink);margin-bottom:4px}
.lm-state--error{background:var(--lm-coral-soft);color:var(--lm-red-deep)}
.lm-skel{border-radius:var(--lm-r-sm);background:linear-gradient(90deg,var(--lm-line-soft),var(--lm-surface),var(--lm-line-soft));background-size:200% 100%;animation:lm-shimmer 1.2s linear infinite}

/* ---------- footer ---------- */
.lm-footer{background:var(--lm-surface);border-top:var(--lm-bw) solid var(--lm-line-soft);color:var(--lm-ink-3);font:var(--lm-t-caption)}
.lm-footer__in{max-width:var(--lm-container);margin:0 auto;padding:24px var(--lm-gutter);display:grid;gap:12px}
.lm-footer a{color:var(--lm-ink-2);text-decoration:none}
.lm-footer a:hover{color:var(--lm-ink)}
.lm-footer__app{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--lm-ink-2)}
.lm-footer__app b{color:var(--lm-ink);font-weight:700}
.lm-footer__links{margin-left:auto;display:flex;gap:16px}
.lm-footer__tagline{margin:0;font:500 14px/21px var(--lm-font);color:var(--lm-ink-2)}
.lm-footer__corp{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lm-footer__corp img{height:12px;width:auto;display:block}
.lm-footer__legal{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:12px;border-top:var(--lm-bw) solid var(--lm-line-soft)}
.lm-sound{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;padding:4px 0;font:var(--lm-t-caption);color:var(--lm-ink-3);cursor:pointer}
.lm-sound svg{width:16px;height:16px}

/* ---------- common jingle: visual ripple on the ListeningMind mark ---------- */
.lm-ripple{position:absolute;left:14px;top:10px;width:0;height:0;pointer-events:none}
.lm-ripple::before,.lm-ripple::after{content:"";position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:8px;border:var(--lm-bw) solid var(--lm-coral);opacity:0}
.lm-ripple.is-on::before{animation:lm-ripple 1.1s var(--lm-ease-out) both}
.lm-ripple.is-on::after{animation:lm-ripple 1.1s var(--lm-ease-out) .18s both}

/* ---------- keyframes ---------- */
@keyframes lm-fade{from{opacity:0}to{opacity:1}}
@keyframes lm-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lm-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes lm-draw{to{stroke-dashoffset:0}}
@keyframes lm-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes lm-ripple{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.2);opacity:0}}
@keyframes lm-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- responsive ---------- */
@media (max-width:1023px){.lm-hero{grid-template-columns:1fr}}
@media (max-width:899px){.lm-gnb__nav{display:none}}
@media (max-width:599px){
  .lm-rail{display:none} html.lm-has-rail body{padding-left:0}
  .lm-h1{font:var(--lm-t-h1-m)}
  .lm-hero{padding:32px var(--lm-gutter) var(--lm-section-m)}
  .lm-section{padding:var(--lm-section-m) var(--lm-gutter)}
  .lm-lockup__div,.lm-lockup__lm{display:none}
  .lm-grid-2{grid-template-columns:1fr}
  .lm-form{padding:20px}
  .lm-btn--product{width:100%}
  .lm-footer__links{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .lm-app *,.lm-app *::before,.lm-app *::after{animation:none!important;transition:none!important}
  .lm-sig .lm-draw{stroke-dashoffset:0}
}

/* ja-wrap: 히어로 칸이 긴 제목에 끌려 늘어나지 않게, 일본어 제목은 넘칠 때만 강제 줄바꿈 */
.lm-hero>*{min-width:0}
:root:lang(ja) .lm-hero [data-lm-head],:root:lang(ja) .lm-h1{overflow-wrap:anywhere}
@supports (word-break:auto-phrase){:root:lang(ja) .lm-hero [data-lm-head],:root:lang(ja) .lm-hero [data-lm-body]{word-break:auto-phrase}}
/* ja-wrap2: 일본어 본문 줄바꿈 */
:root:lang(ja) .lm-app *{word-break:normal;line-break:strict}
:root:lang(ja) .lm-hero [data-lm-head],:root:lang(ja) .lm-hero [data-lm-body]{word-break:keep-all}
@supports (word-break:auto-phrase){:root:lang(ja) .lm-app *,:root:lang(ja) .lm-hero [data-lm-head],:root:lang(ja) .lm-hero [data-lm-body]{word-break:auto-phrase}}
/* an app with its own tint (registry "tint") keeps that colour in the rail */
.lm-rail__app[data-tint] .lm-rail__icon{color:var(--lm-app-tint)}
.lm-rail__app[data-tint].is-current .lm-rail__icon{background:var(--lm-app-tint);color:#fff}