/* 스토리크루 사이트 공통 스타일.
 *
 * 원칙: 여백과 타이포그래피로 말한다. 카드·그림자·이모지를 쓰지 않는다.
 * 색은 무채색 네 단계(바탕·타일·본문·보조)와 링크 파랑 하나뿐이고, 서비스의 색은 그 서비스 아이콘이 맡는다.
 * 페이지별 <style>을 두지 않는다 — 모든 규칙이 이 파일에 있어야 페이지끼리 어긋나지 않는다. */

@font-face{font-family:'Pretendard';src:url('/fonts/Pretendard-Regular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Pretendard';src:url('/fonts/Pretendard-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Pretendard';src:url('/fonts/Pretendard-Bold.woff2') format('woff2');font-weight:700;font-display:swap;}

:root{
  --bg:#ffffff;--tile:#f5f5f7;--ink:#1d1d1f;--ink-2:#6e6e73;--line:#d2d2d7;
  --link:#0066cc;--btn:#0071e3;--btn-hover:#0077ed;
  --nav:rgba(255,255,255,.72);
  /* 늘 어두운 타일(코멘트팩토리). 밝은/어두운 모드와 상관없이 어둡다. */
  --night:#000000;--night-ink:#f5f5f7;--night-ink-2:#a1a1a6;--night-line:#424245;--night-link:#2997ff;
  --wrap:980px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000;--tile:#161617;--ink:#f5f5f7;--ink-2:#a1a1a6;--line:#424245;
    --link:#2997ff;--nav:rgba(22,22,23,.72);--night:#161617;
  }
}
:root[data-theme="dark"]{
  --bg:#000000;--tile:#161617;--ink:#f5f5f7;--ink-2:#a1a1a6;--line:#424245;
  --link:#2997ff;--nav:rgba(22,22,23,.72);--night:#161617;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  background:var(--bg);color:var(--ink);font-size:17px;line-height:1.6;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  /* 한국어는 어절 안에서 줄이 갈리면 읽기 나빠진다('합니/다'). 어절 단위로만 넘긴다. */
  word-break:keep-all;overflow-wrap:break-word;}
a{color:var(--link);text-decoration:none;}
a:hover{text-decoration:underline;}
img{display:block;max-width:100%;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;}

/* ── 내비게이션: 얇고, 반투명하고, 위에 붙어 있다 ── */
.nav{position:sticky;top:0;z-index:10;background:var(--nav);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);}
.nav .wrap{height:48px;display:flex;align-items:center;}
.nav .brand{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.02em;}
.nav .brand:hover{text-decoration:none;}
.nav .links{margin-left:auto;display:flex;gap:28px;font-size:13px;}
.nav .links a{color:var(--ink);opacity:.75;}
.nav .links a:hover,.nav .links a[aria-current="page"]{opacity:1;text-decoration:none;}

/* ── 제목 체계 ── */
.display{font-size:clamp(40px,7vw,80px);font-weight:700;line-height:1.08;letter-spacing:-.035em;}
.headline{font-size:clamp(36px,5.2vw,56px);font-weight:700;line-height:1.1;letter-spacing:-.03em;}
.title{font-size:clamp(28px,3.6vw,40px);font-weight:700;line-height:1.15;letter-spacing:-.025em;}
.lede{font-size:clamp(19px,2.2vw,24px);line-height:1.45;color:var(--ink-2);letter-spacing:-.015em;}
.eyebrow{font-size:clamp(17px,1.8vw,21px);font-weight:600;color:var(--ink-2);margin-bottom:8px;letter-spacing:-.01em;}

/* ── 버튼과 링크 ── */
.actions{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:center;margin-top:28px;}
.pill{display:inline-block;background:var(--btn);color:#fff;border-radius:980px;padding:11px 22px;font-size:17px;line-height:1.2;}
.pill:hover{background:var(--btn-hover);text-decoration:none;}
.more{font-size:clamp(17px,1.8vw,19px);}
.more::after{content:'\00a0›';}

/* ── 전면 타일: 위아래 여백이 곧 디자인이다. 타일 사이는 12px 틈으로만 나눈다 ── */
.tile{text-align:center;padding:clamp(64px,10vw,112px) 22px;background:var(--bg);}
.tile.gray{background:var(--tile);}
.tile.night{background:var(--night);color:var(--night-ink);}
.tile.night .lede,.tile.night .eyebrow{color:var(--night-ink-2);}
.tile.night a{color:var(--night-link);}
.tile.night .pill{color:#fff;}
.tile + .tile{margin-top:12px;}
.tile .icon{width:clamp(80px,9vw,104px);height:auto;margin:0 auto 24px;border-radius:22.5%;}
.tile .lede{max-width:700px;margin:16px auto 0;}
.anchor{scroll-margin-top:48px;}

/* ── 기능 목록: 상자 없이, 가는 선과 글자만 ── */
.features{max-width:var(--wrap);margin:clamp(48px,7vw,72px) auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px 44px;text-align:left;}
.features div{border-top:1px solid var(--line);padding-top:18px;}
.tile.night .features div{border-top-color:var(--night-line);}
.features b{display:block;font-size:17px;font-weight:600;margin-bottom:6px;letter-spacing:-.015em;}
.features p{font-size:15px;line-height:1.6;color:var(--ink-2);}
.tile.night .features p{color:var(--night-ink-2);}
.fineprint{max-width:680px;margin:clamp(44px,6vw,60px) auto 0;font-size:13px;line-height:1.65;color:var(--ink-2);}
.tile.night .fineprint{color:var(--night-ink-2);}

/* ── 원칙 세 줄 ── */
.principles{max-width:var(--wrap);margin:52px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:44px;text-align:left;}
.principles h3{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px;}
.principles p{font-size:16px;color:var(--ink-2);line-height:1.65;}

/* ── 문서형 페이지(약관·방침) ── */
.doc{max-width:692px;margin:0 auto;padding:clamp(56px,9vw,96px) 22px 48px;}
.doc h1{font-size:clamp(34px,5vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:12px;}
.doc .date{color:var(--ink-2);font-size:14px;margin-bottom:44px;}
.doc h2{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:48px 0 14px;}
.doc p,.doc li{font-size:16px;line-height:1.75;margin-bottom:10px;}
.doc ul,.doc ol{padding-left:20px;}
.doc .table-scroll{overflow-x:auto;margin:12px 0 18px;}
.doc table{width:100%;border-collapse:collapse;font-size:14px;}
.doc th,.doc td{border-bottom:1px solid var(--line);padding:11px 12px 11px 0;text-align:left;vertical-align:top;}
.doc th{font-weight:600;color:var(--ink-2);font-size:13px;white-space:nowrap;}
.doc .summary{background:var(--tile);border-radius:18px;padding:22px 24px;margin:8px 0 12px;}
.doc .summary p{margin:0;}

/* ── 404 ── */
.center{text-align:center;padding:clamp(96px,14vw,160px) 22px;}

/* ── 푸터: 작고, 회색이고, 정돈되어 있다 ── */
footer{background:var(--tile);color:var(--ink-2);font-size:12px;line-height:1.75;margin-top:12px;}
footer .wrap{padding-top:22px;padding-bottom:30px;}
footer .links{display:flex;flex-wrap:wrap;row-gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line);}
footer .links a{color:var(--ink);opacity:.75;padding-right:12px;margin-right:12px;border-right:1px solid var(--line);line-height:1;}
footer .links a:last-child{border-right:0;}
footer .biz{margin-top:16px;}
footer .biz span{display:inline-block;margin-right:16px;}
footer .biz a{color:var(--ink-2);}
footer .copy{margin-top:4px;}

@media (max-width:734px){
  body{font-size:16px;}
  .nav .links{gap:20px;}
  .features,.principles{grid-template-columns:1fr;gap:28px;}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }