/* MomoLab home: one restrained studio banner, a plain app list, then support. */
.intro { display: grid; grid-template-columns: minmax(320px, .72fr) minmax(560px, 1.28fr); align-items: center; gap: 64px; padding-top: 72px; padding-bottom: 72px; }
.intro-copy { display: grid; gap: 12px; align-content: center; }
.intro-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--blue); }
.intro h1 { font-family: var(--font-display); font-size: clamp(56px, 4vw + 18px, 82px); font-weight: 700; letter-spacing: -.055em; line-height: .96; }
.intro-line { max-width: 330px; font-size: clamp(22px, .9vw + 15px, 28px); font-weight: 700; letter-spacing: -.035em; line-height: 1.35; margin-top: 10px; }

/* Tagline: "아이디어" gets a marker highlight that sweeps in once. */
.intro-line .hl { position: relative; z-index: 0; background: none; color: inherit; }
.intro-line .hl::before { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.04em; top: .18em; bottom: .02em; background: var(--hl); border-radius: .08em; transform: skewX(-6deg) scaleX(0); transform-origin: left; animation: hl-in .7s var(--ease) .5s forwards; }
@keyframes hl-in { to { transform: skewX(-6deg) scaleX(1); } }

/* Banner visual: a terminal session typed out once; the bulb flickers on when the last step lands. */
.term { display: grid; grid-template-columns: 1fr 190px; align-items: center; gap: 12px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 44px rgba(20, 19, 15, .08); overflow: hidden; font-family: var(--font-mono); animation: term-card .7s var(--ease) .1s both; }
.term-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 16px 22px; border-bottom: 1px solid var(--line); background: var(--paper); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.term-bar i:nth-child(1) { background: #FF5F57; }
.term-bar i:nth-child(2) { background: #FEBC2E; }
.term-bar i:nth-child(3) { background: #28C840; }
.term-bar span { margin-left: 12px; font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.term-lines { padding: 20px 8px 28px 26px; display: grid; gap: 4px; font-size: 14px; }
.term-lines li { min-height: 30px; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.term-prompt { color: var(--muted); }
.term-cmd { color: var(--blue); clip-path: inset(0 100% 0 0); animation: term-type calc(var(--n) * 45ms) steps(var(--n)) var(--d) forwards; }
.term-out { padding-left: 18px; color: var(--ink); font-family: var(--font-body); font-size: 15px; }
.term-ok { display: inline-block; color: var(--mint); font-family: var(--font-mono); animation: term-pop .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d) + .05s) both; }
.term-tag { display: inline-block; font-size: 10px; letter-spacing: .12em; padding: 3px 7px; border-radius: 5px; background: var(--blue-fill); color: #fff; animation: term-pop .7s cubic-bezier(.34, 1.56, .64, 1) calc(var(--d) + .7s) both; }
.term-caret::after { content: ""; display: inline-block; width: 9px; height: 17px; vertical-align: -3px; background: var(--blue); animation: term-blink 1s steps(1) calc(var(--d) + .3s) infinite; }
.term-sprout { width: 18px; height: 18px; overflow: visible; }
.term-sprout g { transform-box: fill-box; transform-origin: 50% 100%; animation: term-grow .7s var(--ease) calc(var(--d) + .05s) both; }
.term-bulb { width: 150px; height: auto; margin: 0 auto 10px; overflow: visible; }
.term-step { opacity: 0; animation: term-in .45s var(--ease) var(--d) forwards; }
.term-off { animation: term-off .3s ease-out 4.4s forwards; }
.term-lit { opacity: 0; animation: term-flicker .75s ease-out 4.4s forwards; }
.term-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: term-ring 1s ease-out 4.5s forwards; }
.term-glow { opacity: 0; animation: term-lit .8s ease-out 4.5s forwards, term-breathe 4s ease-in-out 5.4s infinite; }
@keyframes term-card { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes term-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes term-type { to { clip-path: inset(0 0 0 0); } }
@keyframes term-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes term-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes term-lit { to { opacity: 1; } }
@keyframes term-off { to { opacity: 0; } }
@keyframes term-flicker { 0% { opacity: 0; } 25% { opacity: .8; } 40% { opacity: .2; } 55% { opacity: 1; } 70% { opacity: .55; } 100% { opacity: 1; } }
@keyframes term-ring { from { opacity: .7; transform: scale(.6); } to { opacity: 0; transform: scale(1.8); } }
@keyframes term-breathe { 50% { opacity: .72; } }
@keyframes term-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .intro-line .hl::before { animation: none; transform: skewX(-6deg); }
  .term, .term-step, .term-lit, .term-glow, .term-ok, .term-tag { animation: none; opacity: 1; transform: none; }
  .term-cmd { animation: none; clip-path: none; }
  .term-sprout g { animation: none; transform: none; }
  .term-off, .term-ring { animation: none; opacity: 0; }
  .term-caret::after { animation: none; }
}

.section-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }

.apps { background: var(--surface); border-top: 1px solid var(--line); padding: 48px 0 72px; }
.apps .section-title { margin-bottom: 20px; }

/* Desktop: info stacks in column 1, screens span column 2. */
.app-entry { display: grid; grid-template-columns: 420px 1fr; grid-template-rows: auto auto auto 1fr; gap: 24px 64px; padding-top: 32px; border-top: 1.5px solid var(--ink); scroll-margin-top: 24px; }
.entry-identity { display: flex; align-items: center; gap: 18px; }
.entry-identity img { border-radius: 18px; border: 1px solid var(--line); }
.entry-identity h3 { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.entry-line { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.entry-meta > div { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.entry-meta dt { font-size: 14px; color: var(--muted); }
.entry-meta dd { font-size: 15px; }
.entry-actions { display: flex; align-items: center; gap: 24px; align-self: start; }
.entry-screens { grid-column: 2; grid-row: 1 / -1; display: flex; justify-content: center; align-items: flex-start; gap: 20px; height: 500px; padding: 40px 32px 0; background: var(--blue-tint); border-radius: 24px; overflow: hidden; }
.entry-screens .phone { width: 200px; flex: none; aspect-ratio: 460 / 1000; box-shadow: 0 16px 36px rgba(30, 58, 138, 0.14); transition: transform 0.4s var(--ease); }
.entry-screens:hover .phone { transform: translateY(-6px); }

.support { padding-top: 48px; padding-bottom: 56px; display: grid; gap: 8px; }
.support > p { font-size: 15px; color: var(--ink-2); }
.support-list { margin-top: 12px; max-width: 640px; }
.support-list a { display: grid; grid-template-columns: 40px 1fr 20px; align-items: center; gap: 16px; min-height: 72px; padding: 14px 8px 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color 0.2s; }
.support-list a:hover { background: var(--surface); }
.support-list img { border-radius: 10px; border: 1px solid var(--line); }
.support-text { display: grid; gap: 2px; }
.support-text b { font-size: 17px; }
.support-text small { font-size: 14px; color: var(--muted); }
.support-list svg { width: 20px; height: 20px; transition: transform 0.2s var(--ease); }
.support-list a:hover svg { transform: translateX(3px); }

@media (max-width: 1100px) {
  .intro { grid-template-columns: minmax(280px, .8fr) minmax(460px, 1.2fr); gap: 40px; }
  .app-entry { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .entry-screens .phone:nth-child(3) { display: none; }
}

/* Mobile: icon and name, line, screens, details, download — in reading order. */
@media (max-width: 760px) {
  .intro { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; padding-bottom: 32px; }
  .intro-copy { gap: 9px; }
  .intro-label { font-size: 10px; }
  .intro h1 { font-size: clamp(48px, 15vw, 62px); }
  .intro-line { font-size: 21px; margin-top: 8px; }
  .term { grid-template-columns: 1fr 110px; border-radius: 20px; }
  .term-lines { padding: 14px 4px 18px 16px; font-size: 12px; }
  .term-out { font-size: 13px; padding-left: 10px; }
  .term-bulb { width: 90px; }
  .nav .wrap { gap: 16px; }
  .nav-links { margin-left: auto; gap: 0; flex: 0 0 auto; }
  .nav-links a:not(.btn) { padding: 0 7px; font-size: 14px; }
  .apps { padding: 32px 0 48px; }
  .apps .section-title { margin-bottom: 14px; }
  .app-entry { display: flex; flex-direction: column; gap: 18px; padding-top: 20px; }
  .entry-identity { gap: 14px; }
  .entry-identity img { width: 56px; height: 56px; border-radius: 14px; }
  .entry-identity h3 { font-size: 26px; }
  .entry-line { font-size: 15px; }
  .entry-screens { order: 1; height: 300px; padding: 24px 0 0; gap: 12px; border-radius: 20px; }
  .entry-screens .phone { width: 136px; }
  .entry-meta { order: 2; }
  .entry-meta > div { grid-template-columns: 76px 1fr; gap: 12px; }
  .entry-meta dd { font-size: 14px; }
  .entry-actions { order: 3; flex-direction: column; align-items: stretch; gap: 8px; align-self: stretch; }
  .entry-actions .detail { justify-content: center; border: 1px solid var(--line); border-radius: var(--radius); }
  .support { padding-top: 36px; padding-bottom: 44px; }
}