/* 만든 것 모아보기 — 치이카와·MBTI 페이지와 같은 시각 언어(종이·잉크·파란 포인트·SUIT).
 * 토큰은 studio/chiikawa-mbti/style.css 의 :root 와 같은 값이다. 새 색을 더하지 않는다. */
@font-face{font-family:SUIT;src:url('./assets/suit.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--paper:#f9f9f6;--ink:#20211e;--muted:#6a6c66;--line:#ddded8;--accent:#304cf5;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:SUIT,system-ui,sans-serif;letter-spacing:-.018em;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
h1,h2,h3,p{margin:0}
.skip{position:absolute;left:20px;top:-80px;z-index:50;background:var(--paper);padding:12px}
.skip:focus{top:10px}

.shell{width:min(1440px,100% - 96px);margin:auto;min-height:100svh;display:flex;flex-direction:column}
main{flex:1}

/* 상단 바 — 치이카와와 같은 높이·구분선 */
.topbar{min-height:100px;display:flex;align-items:center;gap:32px;border-bottom:1px solid var(--line)}
.brand{font-size:28px;font-weight:750;letter-spacing:-1.5px;text-decoration:none;white-space:nowrap}
.brand-divider{color:var(--accent);padding:0 5px}
.brand-dot{font-size:20px;display:inline-block;color:var(--accent);margin-left:12px;vertical-align:middle}
.nav-note{font-size:13px;color:var(--muted)}
.nav-link{margin-left:auto;font-size:14px;font-weight:650;text-decoration:none;white-space:nowrap}
.nav-link span{margin-left:8px;color:var(--accent)}
.nav-link:hover{color:var(--accent)}

/* 머리 */
.hero{padding:62px 0 40px;max-width:860px}
.eyebrow{display:flex;flex-direction:column;gap:13px;font-size:13px;color:var(--muted)}
.eyebrow>span:first-child{font-size:11px;letter-spacing:.07em;color:var(--accent)}
h1{font-size:clamp(40px,5.05vw,76px);line-height:1.18;font-weight:800;letter-spacing:-.065em;margin-top:26px;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
.hero-copy{font-size:17px;line-height:1.85;color:var(--muted);margin-top:25px;text-wrap:pretty}
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.jump a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:100px;font-size:14px;font-weight:650;text-decoration:none;transition:border-color .2s,color .2s}
.jump a:hover{border-color:var(--accent);color:var(--accent)}
.jump a b{font-weight:500;color:var(--muted)}

/* 묶음 */
.group{padding:46px 0 18px;border-top:1px solid var(--line)}
.group-head{display:grid;grid-template-columns:auto 1fr;column-gap:24px;row-gap:10px;align-items:baseline;max-width:860px}
.kicker{font-size:12px;letter-spacing:.08em;color:var(--accent);font-weight:700}
.group h2{font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.05em;line-height:1.2}
.group-note{grid-column:2;font-size:15px;line-height:1.75;color:var(--muted);text-wrap:pretty}

.cards{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{position:relative;display:flex;flex-direction:column;gap:12px;min-height:168px;padding:22px 22px 18px;border:1px solid var(--line);border-radius:22px;background:#fff;transition:transform .25s var(--ease),border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card-top{display:flex;align-items:center;gap:12px}
.card-icon{width:40px;height:40px;border-radius:12px;flex:none;object-fit:cover;background:var(--paper)}
.card h3{font-size:19px;font-weight:750;letter-spacing:-.04em;line-height:1.3}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:22px}  /* 카드 전체가 눌린다 */
.card p{font-size:14.5px;line-height:1.7;color:var(--muted);flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:11.5px;letter-spacing:.02em;padding:4px 9px;border-radius:100px;border:1px solid var(--line);color:var(--muted)}
.tags span.free{border-color:transparent;background:#304cf514;color:var(--accent)}
.card-where{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);margin-top:2px}
.card-where b{font-weight:600;color:var(--ink)}
.card-where .arrow{color:var(--accent);font-size:18px;line-height:1}
.card-alt{position:relative;z-index:1;font-size:13px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:transparent}
.card-alt:hover{color:var(--accent);text-decoration-color:currentColor}

/* 접힌 묶음 — app.js 가 showFirst 뒤 카드에 hidden-item 을 붙인다 */
.card.hidden-item{display:none}
.more{margin:18px 0 0;display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 10px 0 22px;border:0;border-radius:100px;background:var(--accent);color:#fff;font-weight:650;font-size:15px;transition:transform .2s var(--ease),background .2s}
.more:hover{background:#203be0;transform:translateY(-2px)}
.more>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#ffffff24;font-size:20px;font-weight:400}

.footer{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;padding:40px 0 48px;margin-top:40px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.footer>span{font-weight:650;color:var(--ink)}
.footer a{text-underline-offset:4px}

@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .shell{width:min(100% - 40px,1440px)}
  .topbar{min-height:76px;gap:14px}
  .brand{font-size:22px}
  .nav-note{display:none}
  .hero{padding:40px 0 28px}
  .group{padding:36px 0 12px}
  .group-head{grid-template-columns:1fr}
  .group-note{grid-column:1}
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
}
@media (prefers-reduced-motion:reduce){.card,.more{transition:none}.card:hover,.more:hover{transform:none}}

/* 기존 종이·잉크·파란 포인트를 사용한 서비스 미리보기 */
.hero{max-width:none;display:grid;grid-template-columns:1.3fr 1fr;gap:52px;align-items:center;padding:64px 0 58px}
h1{font-size:clamp(38px,4.2vw,66px);letter-spacing:-.06em;line-height:1.2}
.eyebrow{flex-direction:row;align-items:center;gap:16px}.eyebrow>span:first-child{font-size:13px;letter-spacing:0;font-weight:700}
#hero-count{font-size:12px}.hero-copy{margin-top:20px;line-height:1.8}
.hero-board{position:relative;height:350px;background:var(--accent);border-radius:30px;isolation:isolate;background-image:radial-gradient(#ffffff35 1px,transparent 1px);background-size:18px 18px}
.board-note{position:absolute;left:25px;top:22px;color:white;font-size:14px;transform:rotate(-5deg)}
.paper-preview{position:absolute;width:72%;left:9%;top:62px;background:var(--paper);border:1px solid var(--ink);padding:18px 14px;border-radius:12px;transform:rotate(-7deg);box-shadow:5px 7px 0 #20211e26;text-align:center}
.paper-preview>span{font-size:13px;font-weight:650}.paper-preview>b{font-size:15px}.cast{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:14px 0}
.friend{display:block;flex:none;width:74px;height:104px;background-image:url('./assets/characters.png');background-repeat:no-repeat;background-size:828.52px auto}
.friend.chiikawa{background-position:0 bottom;height:80px;background-position:0 0}
.friend.hachiware{background-position:-75.46px 0;height:83px}
.friend.usagi{background-position:-151.8px 0}
.memo-preview{position:absolute;right:-10px;bottom:39px;padding:16px 20px;transform:rotate(8deg);border:1px solid var(--ink);border-radius:8px;background:white;font-size:13px;line-height:1.6;box-shadow:4px 5px 0 #20211e26}.memo-preview strong{color:var(--accent)}
.board-star{position:absolute;right:23px;top:38px;font-size:56px;color:white;transform:rotate(12deg)}
.board-caption{position:absolute;left:24px;bottom:18px;font-size:12px;color:white}
.group{scroll-margin-top:24px;padding:42px 0 34px}.group-head{max-width:none}.group-note{font-size:15px}.group h2{font-size:32px}
.card{padding:22px;border-radius:22px;overflow:hidden;gap:14px}.card h3{font-size:21px}.card p{font-size:15px;line-height:1.7}.card-where{padding-top:14px;border-top:1px solid var(--line);font-size:12px}.card-where .arrow{font-size:23px}
.card-visual{height:172px;margin:-22px -22px 3px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line)}
.visual-chiikawa{gap:15px;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:16px 16px;align-items:flex-end;padding-bottom:26px}
.visual-chiikawa .friend{transition:transform .3s var(--ease)}.card:hover .friend:nth-child(2){transform:translateY(-6px) rotate(4deg)}
.visual-mbti{background:var(--accent);flex-direction:column;gap:12px}.bubble{padding:12px 22px;background:white;font-weight:750;font-size:18px;border-radius:18px}.bubble.me{transform:translateX(-25px) rotate(-7deg);border-bottom-left-radius:4px}.bubble.you{transform:translateX(25px) rotate(5deg);border-bottom-right-radius:4px;background:var(--paper)}
.orbit{position:absolute;width:105px;height:105px;border:2px solid var(--accent);border-radius:50%;top:24px}.orbit-one{left:calc(50% - 82px);background:#304cf511}.orbit-two{right:calc(50% - 82px);background:#304cf511}.orbit:after{content:'';position:absolute;width:10px;height:10px;border-radius:50%;background:var(--accent);top:15px;left:12px}.orbit-label{position:absolute;bottom:16px;font-size:13px;color:var(--accent);font-weight:700}
.group-apps .cards{grid-template-columns:repeat(5,minmax(0,1fr))}.group-apps .card-top{align-items:flex-start;flex-direction:column;gap:20px}.group-apps .card-icon{width:64px;height:64px;border-radius:18px}.group-apps .card{padding:22px 18px}.group-apps .card h3{font-size:21px}.group-apps .card p{font-size:14px}.group-apps .card-where{flex-wrap:wrap}.group-tools .cards{grid-template-columns:1fr}.group-tools .card{padding:28px 32px 28px 124px;min-height:160px}.group-tools .card:before{content:'↗';position:absolute;left:30px;top:28px;background:var(--accent);color:white;width:68px;height:68px;display:grid;place-items:center;border-radius:20px;font-size:42px}.group-tools .card p{max-width:700px}.group-tools .card-where{max-width:700px}
.group-yeonri .cards{grid-template-columns:repeat(4,minmax(0,1fr))}.group-yeonri .card{background:transparent}.group-yeonri .card h3{font-size:19px}.group-yeonri .card p{font-size:14px}.group-yeonri .card-where b{font-weight:500}.more>span{flex:none}
@media(max-width:1100px){.hero{gap:32px}.group-apps .cards{grid-template-columns:repeat(3,minmax(0,1fr))}.group-yeonri .cards{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-board{height:320px}.memo-preview{right:0}.cast{gap:0}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.hero{grid-template-columns:1fr;padding:40px 0;gap:30px}.hero-text{max-width:650px}.hero-board{width:min(100%,450px);justify-self:center;height:315px}.hero h1{font-size:clamp(38px,7vw,58px)}.cards{grid-template-columns:1fr}.group-apps .cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card-visual{height:180px}.nav-note{display:none}.group-note{grid-column:1/-1}}
@media(max-width:420px){.group-apps .cards,.group-yeonri .cards{grid-template-columns:1fr}.group-apps .card-top{flex-direction:row;align-items:center}.hero-board{height:390px}.paper-preview{width:78%;left:5%;top:52px}.board-star{right:10px;top:32px;font-size:42px}.memo-preview{font-size:12px;bottom:38px;right:12px;padding:12px 16px}.group-tools .card{padding:22px}.group-tools .card:before{position:static;width:48px;height:48px;font-size:30px;border-radius:14px}.brand{font-size:20px}.nav-link{font-size:12px}.jump a{padding:0 14px}.group h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){.visual-chiikawa .friend{transition:none}.card:hover .friend:nth-child(2){transform:none}}

/* 페이지 내부 메뉴·선택·드래그·핀치 확대 차단. 한 손가락 스크롤은 허용한다. */
html{touch-action:pan-x pan-y}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img,a{-webkit-user-drag:none}