/* 첫 페이지 전용 */

/* 첫 화면: 왼쪽 말, 오른쪽 앱 목록 (휴대폰은 위아래) */
.hero{padding-top:56px;padding-bottom:72px}
.hero__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.hero__kicker{margin:0 0 14px;font-size:16px;font-weight:600;color:var(--lamp-ink)}
.hero__title{margin:0;font-size:clamp(32px,5.2vw,54px);line-height:1.2;letter-spacing:-.03em;font-weight:800}
.lm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.lm>span{display:inline-block}
.hero__lead{margin:20px 0 0;font-size:18px;color:var(--ink-2);max-width:30em}

.apps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.app{display:flex;gap:18px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.app__body{min-width:0}
.app__name{margin:0;font-size:22px;line-height:1.3;letter-spacing:-.01em}
.app__en{font-size:15px;font-weight:600;color:var(--muted);margin-left:4px}
.app__kind{margin:2px 0 0;font-size:15px;color:var(--muted)}
.app__line{margin:8px 0 0;color:var(--ink-2);font-size:16px;line-height:1.6}
.app__links{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);
  color:var(--ink);text-decoration:none;font-size:15px;font-weight:600;background:var(--paper)}
.chip:hover{border-color:var(--muted)}
.chip--go{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip--go:hover{background:var(--ink-2);border-color:var(--ink-2)}

@media (max-width:860px){
  .hero{padding-top:28px;padding-bottom:48px}
  .hero__in{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero__lead{font-size:17px}
}
@media (max-width:420px){
  .app{padding:18px;gap:14px}
  .app .icon{width:52px;height:52px}
}

/* 칸 공통 */
.sec-kicker{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--lamp-ink)}
.sec-title{margin:0;font-size:clamp(26px,3.6vw,36px);line-height:1.3;letter-spacing:-.02em}
.sec-lead{margin:14px 0 0;color:var(--ink-2)}
.sec-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin:18px 0 0;font-weight:600;font-size:16px}

/* Owlight: 메뉴 막대에서 내려온 스위치 목록 */
.owl{padding-top:88px;padding-bottom:88px;border-top:1px solid var(--line)}
.owl__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.panel{position:relative;margin:0;background:var(--night);color:var(--night-ink);border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 40px rgba(23,22,43,.22)}
.panel__bar{display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 14px;background:var(--night-2)}
.panel__dots{display:flex;gap:6px}
.panel__dots i{width:28px;height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
.panel__owl{display:inline-flex;padding:3px;border-radius:6px;background:rgba(255,255,255,.16)}
.panel__owl img{display:block;border-radius:4px}
.panel__tag{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;line-height:1.6;color:var(--night-muted);border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:0 7px}
.feats{list-style:none;margin:0;padding:10px 12px 14px}
.feat{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;padding:12px 10px;border-radius:12px}
.feat+.feat{border-top:1px solid rgba(255,255,255,.07)}
.feat b{font-size:17px;line-height:1.4}
.feat span:last-child{grid-column:2;font-size:15px;line-height:1.5;color:var(--night-muted)}
.sw{grid-row:1/3;align-self:center;position:relative;width:38px;height:22px;border-radius:11px;background:var(--lamp);transition:background .35s}
.sw--off{background:rgba(255,255,255,.2)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transform:translateX(16px);transition:transform .35s cubic-bezier(.3,.7,.3,1)}
@media (max-width:860px){.owl{padding-top:64px;padding-bottom:64px}.owl__in{grid-template-columns:minmax(0,1fr);gap:32px}}

/* 세트노트: 지난번 → 오늘 */
.set{padding-top:88px;padding-bottom:88px;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.set__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:center}
.facts{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:12px}
.facts li{position:relative;padding-left:22px;color:var(--ink-2)}
.facts li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--lamp)}
.facts b{color:var(--ink)}
.log{position:relative;margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.log__tag{position:absolute;top:14px;right:14px;font-size:13px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 7px;background:var(--card)}
.log__head{display:flex;flex-direction:column;gap:2px;margin:0 0 14px}
.log__head b{font-size:19px}
.log__head span{font-size:15px;color:var(--muted)}
.sets{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.setrow{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:10px 14px;font-variant-numeric:tabular-nums}
.setrow__n{font-weight:700;color:var(--muted);font-size:15px}
.setrow__prev{color:var(--muted);font-size:16px}
.setrow__now{font-weight:700;font-size:17px;justify-self:end;background:var(--lamp-soft);border-radius:8px;padding:2px 10px}
.log figcaption{margin-top:14px;font-size:15px;color:var(--muted)}
@media (max-width:860px){.set{padding-top:64px;padding-bottom:64px}.set__in{grid-template-columns:minmax(0,1fr);gap:32px}}

/* 문의: 밤 바탕 한 칸 */
.contact{background:var(--night);color:var(--night-ink);padding-top:84px;padding-bottom:88px}
.contact__lead{max-width:36em}
.contact__title{margin:0;font-size:clamp(26px,3.6vw,36px);line-height:1.3;letter-spacing:-.02em}
.contact__lead{margin:14px 0 28px;color:var(--night-muted)}
.contact__mail{margin:0}
.btn--lamp{background:var(--lamp);color:#1B1A24;padding-left:28px;padding-right:28px}
.contact__mail{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.contact__addr{color:var(--night-ink);font-weight:600;font-size:17px;user-select:all}
.btn--lamp:hover{filter:brightness(1.06)}
.contact a:focus-visible{outline-color:var(--lamp)}
.foot{margin-top:0}

/* 움직임 (html.anim 일 때만 숨김) */
.anim .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.anim .rv.in{opacity:1;transform:none}
.anim .hero__title.rv{opacity:1;transform:none}
.anim .hero__title .lm>span{transform:translateY(105%);transition:transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.anim .hero__title.in .lm>span{transform:none}
.anim .hero__title.in .lm+.lm>span{transition-delay:calc(var(--d,0s) + .08s)}
.anim .brand .mark .core{transform-origin:11px 11px;transform:scale(.35);transition:transform .7s cubic-bezier(.2,.7,.2,1) .15s}
.anim .brand .mark .glow{opacity:0;transition:opacity .9s ease .35s}
.anim .top.on .brand .mark .core{transform:none}
.anim .top.on .brand .mark .glow{opacity:.28}
.anim .feats:not(.in) .sw{background:rgba(255,255,255,.2)}
.anim .feats:not(.in) .sw::after{transform:none}
.anim .feats .sw,.anim .feats .sw::after{transition-delay:var(--d,0s)}
.anim .sets:not(.in) .setrow__now{opacity:0;transform:translateX(-8px)}
.anim .setrow__now{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}

/* 휴대폰: 아이콘 옆엔 이름만, 설명과 버튼은 카드 전체 폭으로 */
@media (max-width:560px){
  .app{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
  .app__body{display:contents}
  .app__name,.app__kind{grid-column:2}
  .app__name{align-self:end}
  .app__kind{align-self:start}
  .app .icon{grid-row:1/3}
  .app__line,.app__links{grid-column:1/-1}
  .app__line{margin-top:14px}
}

.sw--off::after{transform:none}
.app__status{margin:6px 0 0}
.app__status span{display:inline-block;font-size:13px;font-weight:700;color:var(--lamp-ink);background:var(--lamp-soft);border-radius:6px;padding:1px 8px}
@media (max-width:560px){.app__status{grid-column:1/-1;margin-top:10px}}