/* Foundation and navigation
   색·글꼴·그림자는 여기 없습니다 — styles/tokens.css 한 곳에 모여 있습니다. */

  *{box-sizing:border-box; margin:0; padding:0;}
  /* 내용이 짧으면 body 아래로 html 의 배경이 드러납니다. 그래서 종이색은 여기에도
     걸립니다 — 어두운 값은 tokens.css 의 `html.dark` 가 같은 이름으로 줍니다. */
  html{background:var(--paper);}
  body{background:var(--paper); color:var(--ink); font-family:var(--ui); -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden;
       min-height:100vh;}
  /* 종이결. 색을 탁하게 만드는 대신 배경 위에만 조용히 얹습니다. */
  body::before{content:''; position:fixed; inset:0; pointer-events:none; opacity:var(--texture-opacity); z-index:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='18'/><feColorMatrix type='matrix' values='1 0 0 0 .72 0 1 0 0 .68 0 0 1 0 .56 0 0 0 .045 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");}
  #app{position:relative; z-index:1;}

  /* ================= top bar ================= */
  /* 위쪽 여백에 안전 영역을 더합니다. 브라우저에서는 0 이라 그대로이고, 아이폰
     노치·다이내믹 아일랜드 아래에서는 그만큼 내려갑니다 — 네이티브 셸에서 로고가
     시계와 겹쳐 있었습니다. */
  #topbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px;
    padding:calc(16px + env(safe-area-inset-top)) 26px 16px;
    background:var(--bar-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--bar-line);}
  #logo{display:flex; align-items:center; cursor:pointer; user-select:none;}
  #logo .mark{font-family:var(--display); font-size:25px; font-weight:600; letter-spacing:-1.35px; color:var(--brand-strong);}
  #topbar nav{margin-left:auto; display:flex; gap:18px; align-items:center;}
  .navbtn{border:none; background:transparent; padding:8px 0; border-radius:0; font-size:17px;
    cursor:pointer; color:var(--soft); font-family:var(--display); font-weight:500; letter-spacing:-.35px; text-transform:none;}
  .navbtn.on{background:transparent; color:var(--blue-deep);}
  .navbtn:hover{background:var(--nav-hover); color:var(--blue);}
  #login-nudge{position:absolute;left:var(--login-nudge-x);top:var(--login-nudge-y);width:9px;height:9px;border:2px solid var(--home-background);border-radius:50%;background:var(--settings-danger);pointer-events:none;visibility:hidden;}
  #login-nudge.on{visibility:visible;}

  .view{display:none;} .view.on{display:block;}

/* Neutral keyboard focus, with no sticky touch ring on native WebKit. */
:is(button,a,[role="button"],summary){-webkit-tap-highlight-color:transparent;}
:is(button,a,[role="button"],summary):focus-visible{outline-color:var(--soft)!important;}
html[data-input-modality="pointer"] :is(button,a,[role="button"],summary):focus{outline:none!important;}