/* ============================================================
   TITLE SCENE (clean)
   ============================================================ */
.title{justify-content:flex-start;align-items:center;text-align:center}

.title-top{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px}
.title-top .iconbtn{
  width:38px;height:38px;border-radius:var(--r-s);display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);color:var(--txt-3);
  transition:color .15s,border-color .15s;
}
.title-top .iconbtn:active{color:var(--txt)}
.title-top .iconbtn.on{color:var(--accent);border-color:var(--accent-line)}
.title-top .iconbtn svg{width:18px;height:18px}

/* ---------- logo ---------- */
.logo{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:auto;padding:0 0 min(5vh,36px)}
.logo-crest{width:52px;height:52px;margin-bottom:14px;color:var(--accent)}
.logo-kicker{font-size:10px;font-weight:600;letter-spacing:.28em;text-indent:.28em;color:var(--txt-3)}
.logo-word{display:flex;flex-direction:column;align-items:center;line-height:.92;font-family:var(--f-num);font-weight:400}
.logo-word em{
  font-style:normal;font-size:clamp(26px,8vw,34px);letter-spacing:.30em;text-indent:.30em;color:var(--txt-2);
}
.logo-word strong{
  font-weight:400;font-size:clamp(54px,17vw,78px);letter-spacing:.01em;color:var(--txt);
}
.logo-word .shine{display:none}
.logo-sub{margin-top:8px;font-size:12px;font-weight:500;letter-spacing:.22em;text-indent:.22em;color:var(--txt-3)}

/* ---------- menu ---------- */
.title-menu{width:min(100%,360px);display:flex;flex-direction:column;gap:8px;margin-bottom:auto}
.menu-item{
  display:flex;align-items:center;gap:12px;
  min-height:56px;padding:0 14px;border-radius:var(--r-m);text-align:left;
  background:var(--surface);border:1px solid var(--line);
  transition:background .15s,border-color .15s;
}
.menu-item:active{background:var(--surface-2)}
.menu-item.is-hero{border-color:var(--accent-line);background:var(--accent-soft)}
.menu-item.is-hero .menu-ico{color:var(--accent);border-color:var(--accent-line)}
.menu-item[disabled]{opacity:.4;pointer-events:none}
.menu-ico{
  width:34px;height:34px;flex:none;border-radius:var(--r-s);display:grid;place-items:center;
  background:transparent;border:1px solid var(--line-2);color:var(--txt-2);overflow:hidden;
}
.menu-ico svg{width:17px;height:17px}
.menu-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.menu-txt b{font-size:15px;font-weight:600;letter-spacing:-.02em}
.menu-txt span{font-size:11.5px;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-arrow{color:var(--txt-3);flex:none}
.menu-arrow svg{width:15px;height:15px}

.menu-item.continue .menu-ico{padding:0;background:var(--surface-2)}
.menu-item.continue .menu-ico svg{width:100%;height:100%}

.title-foot{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:14px}
.title-foot .ver{font-size:10px;letter-spacing:.14em;color:var(--txt-3)}

/* 등장 */
.stagger>*{animation:riseIn .28s var(--ease) both}
.stagger>*:nth-child(2){animation-delay:.04s}
.stagger>*:nth-child(3){animation-delay:.08s}
.stagger>*:nth-child(4){animation-delay:.12s}
@keyframes riseIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* landscape */
@media (orientation:landscape) and (max-height:520px){
  .title{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
  .title-top{position:absolute;top:calc(var(--sat) + 12px);left:16px;right:16px;width:auto}
  .logo{flex:1 1 46%;padding:30px 0 0}
  .logo-crest{width:38px;height:38px;margin-bottom:8px}
  .logo-word strong{font-size:clamp(44px,9vw,60px)}
  .title-menu{flex:1 1 46%;max-width:330px;padding-top:26px}
  .menu-item{min-height:48px}
  .title-foot{flex:1 1 100%}
}