/* 색 토큰. --band 는 머리·소개 띠, --fig 는 다크 모드에서도 밝게 둔다 (ポコ 그림의 머리 하이라이트가 투명해서 어두운 바탕이면 회색 점으로 보임) */
:root{
  --bg:#f4f6f3; --ink:#14211a; --muted:#5d6b62; --line:#d5ddd6; --accent:#1f5c3f; --fig:#e3e9e3;
  --band:#1c3a2b; --band-ink:#eef3ee; --band-muted:#a9bdb0;
  --serif:"Noto Serif KR","Nanum Myeongjo",serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1511; --ink:#e3ebe4; --muted:#93a59a; --line:#243229; --accent:#8cc4a3; --fig:#d3dcd5;
    --band:#12251b; --band-ink:#e3ebe4; --band-muted:#8ea596;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1511; --ink:#e3ebe4; --muted:#93a59a; --line:#243229; --accent:#8cc4a3; --fig:#d3dcd5;
  --band:#12251b; --band-ink:#e3ebe4; --band-muted:#8ea596;
  color-scheme:dark;
}
/* 일본어는 Noto Serif JP (KR 조각에는 자주 쓰는 한자만 있어 글자가 섞임). 로마자는 JP 조각에 없으니 KR 로 */
:lang(ja){--serif:"Noto Serif JP","Noto Serif KR",serif}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Hiragino Sans","Yu Gothic UI",sans-serif;
  font-size:17px; line-height:1.7; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; word-break:keep-all; overflow-wrap:anywhere;
}
:lang(ja) body,body:lang(ja){word-break:normal;line-break:strict}
a{color:inherit;text-decoration-line:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:5px}
a:hover{text-decoration-color:currentColor}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:920px;margin:0 auto;padding:0 24px}

/* 머리·소개 띠 */
.hero{background:var(--band);color:var(--band-ink)}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:28px;padding-bottom:28px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--band-ink)}
.mark{height:42px;width:auto;flex:none;margin:-8px -2px -8px -5px}.word{font-weight:700;font-size:17px;letter-spacing:-.01em}
.word-ko{font-size:14px;color:var(--band-muted)}
.lang{display:flex;gap:2px}
.lang button{font:inherit;font-size:13px;padding:4px 6px;border:0;background:none;color:var(--band-muted);cursor:pointer;text-underline-offset:5px}
.lang button:hover{color:var(--band-ink)}
.lang button[aria-pressed="true"]{color:var(--band-ink);font-weight:600;text-decoration:underline}
.intro{padding-top:96px;padding-bottom:112px}
.intro h1{font-family:var(--serif);font-size:clamp(30px,5.2vw,54px);font-weight:600;line-height:1.45;letter-spacing:-.015em;max-width:18em;text-wrap:balance}
.nb{white-space:nowrap}
:lang(ja) .intro h1{word-break:auto-phrase} /* 道具 같은 낱말이 줄 끝에서 갈리지 않게 (Chrome·Edge) */
.intro p{margin-top:28px;color:var(--band-muted)}
.intro .home a{color:var(--band-ink);font-weight:600;text-decoration-color:var(--band-muted)}
.intro .home a::after{content:" →"}

/* 줄: 왼쪽 이름표, 오른쪽 내용 */
main{padding-top:24px}
.row{display:grid;grid-template-columns:168px 1fr;gap:32px;padding:40px 0 64px}
.row+.row{border-top:1px solid var(--line)}
.row h2{font-size:14px;font-weight:600;color:var(--muted);line-height:2.2;letter-spacing:0}

/* 도구 */
.tool{display:grid;grid-template-columns:1fr 168px;gap:40px;align-items:start}
.tool h3{font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.4;letter-spacing:-.01em;margin-bottom:12px}
.status{display:inline-flex;align-items:center;gap:6px;margin-left:8px;font-family:"Pretendard Variable",Pretendard,sans-serif;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0;vertical-align:4px;white-space:nowrap}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.feat{list-style:none;margin:18px 0 24px;color:var(--muted);font-size:16px}
.feat li{position:relative;padding-left:20px}
.feat li::before{content:"–";position:absolute;left:0}
.go{font-weight:600;color:var(--accent)}
.go::after{content:" →"}
.go.soon{color:var(--muted)} .go.soon::after{content:none}
.tool-fig{background:var(--fig);border-radius:4px;aspect-ratio:3/4;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.tool-fig img{width:84%}

/* 만드는 방식 */
.way{display:grid;gap:22px}
.way dt{font-family:var(--serif);font-weight:600;font-size:18px}
.way dd{color:var(--muted)}

/* 문의 */
.contact p{color:var(--muted);margin-bottom:10px}
.mail{font-family:var(--serif);font-size:clamp(20px,2.6vw,26px);font-weight:600;color:var(--accent)}

/* 바닥 */
.foot{border-top:1px solid var(--line);padding-top:24px;padding-bottom:56px;font-size:13px;line-height:1.9;color:var(--muted)}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}

@media (max-width:720px){
  .wrap{padding:0 16px}
  .top{padding-top:20px;padding-bottom:20px}
  .intro{padding-top:48px;padding-bottom:64px}
  main{padding-top:8px}
  .row{grid-template-columns:1fr;gap:12px;padding:28px 0 48px}
  .tool{grid-template-columns:1fr;gap:28px}
  .tool-fig{width:148px}
}
@media (max-width:400px){
  .word-ko{display:none}
}