/* 몽글 홈페이지 · 공통 디자인 시스템
   글자·간격·색은 아래 토큰으로만 정합니다. 섹션별 값을 따로 덧씌우지 마세요.
   글자 크기는 6단계(제목·섹션 제목·소제목·리드·본문·작은 글)만 씁니다.
   얇은 구분선과 평상시 그림자는 쓰지 않아요. 면의 밝기 차이와 여백으로 나눕니다.
   예외: data-ui를 붙인 앱 화면 조각 안쪽은 실제 앱처럼 선·그림자·작은 글자를 써요. */
@font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:100 900;font-display:swap;src:url('./pretendard-variable.woff2') format('woff2')}

:root{
  color-scheme:light;
  /* 색 */
  --ink:#111113;          /* 제목·주요 버튼 */
  --text:#1f2024;         /* 본문 (흰 바탕 16:1) */
  --muted:#5c5e66;        /* 보조 글자만 (흰 바탕 6.3:1, 회색 바탕 5.8:1) */
  --surface:#f4f4f6;      /* 보조 구역 바탕 */
  --surface-2:#e9e9ee;    /* 회색 구역 안의 한 단계 더 진한 면 */
  --field:#eceff6;        /* 앱 화면 조각을 받치는 바탕 (Mac 배경화면 톤) */
  --dark:#0e0f12;         /* 마지막 다운로드 구역 */
  --dark-text:#c9cad1;    /* 어두운 바탕 위 본문 (11:1) */
  /* 글자 크기 */
  --fs-display:clamp(34px,8.6vw,88px);
  --fs-h2:clamp(30px,4.6vw,56px);
  --fs-h3:24px;
  --fs-lead:20px;
  --fs-body:17px;
  --fs-small:15px;        /* 가장 작은 글자. 앱 화면 조각 밖에서는 이보다 작게 쓰지 않아요 */
  /* 간격 */
  --max:1200px;
  --gutter:32px;
  --section:clamp(96px,11vw,160px);
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  /* 움직임 */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --t-press:140ms;
  --t-hover:180ms;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Pretendard Variable',system-ui,sans-serif;font-size:var(--fs-body);line-height:1.7;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;word-break:keep-all}
h1,h2,h3,p,ol,ul,figure,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{color:var(--ink);font-weight:700;letter-spacing:-.035em}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
canvas,svg,img{display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
a,button,summary,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.symbol-library{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;top:-80px;left:16px;z-index:100;padding:12px 16px;background:var(--ink);color:#fff;border-radius:var(--radius-sm)}
.skip:focus{top:12px}

/* 버튼 · 링크 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-size:var(--fs-small);font-weight:600;white-space:nowrap;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease}
.btn:active{transform:scale(.97)}
.btn-sm{min-height:40px;padding:0 18px}
.btn-lg{min-height:54px;padding:0 28px;font-size:var(--fs-body)}
.btn-light{background:#fff;color:var(--ink)}
.btn-quiet{background:var(--surface-2);color:var(--ink)}
.os-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font-size:var(--fs-small);font-weight:600;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;transition:text-decoration-color var(--t-hover) ease}
.link-arrow .icon{transition:transform 240ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:#34353b}
  .btn-light:hover{background:#e6e6eb}
  .btn-quiet:hover{background:#dcdce3}
  .download-inner .btn-quiet:hover{background:#2f3037}
  .link-arrow:hover{text-decoration-color:currentColor}
  .link-arrow:hover .icon{transform:translateX(3px)}
}

/* 공지 띠 */
.announcement{background:var(--surface);font-size:var(--fs-small);color:var(--text)}
.announcement a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px var(--gutter);text-align:center}
.announcement a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.announcement .icon{width:16px;height:16px}

/* 섹션 공통 */
.section{padding-block:var(--section)}
.section-heading{display:flex;flex-direction:column;gap:20px;max-width:760px;margin-bottom:clamp(48px,6vw,80px)}
.section-heading-center{align-items:center;text-align:center;margin-inline:auto}
.section-heading-split{max-width:none;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 64px}
.section-heading-split .section-copy{max-width:30em}
.section-title{font-size:var(--fs-h2);line-height:1.16}
.section-copy{max-width:34em;font-size:var(--fs-lead);line-height:1.65;color:var(--text)}

/* 첫 화면 */
.hero{padding-top:clamp(56px,8vw,112px)}
.hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero h1{font-size:var(--fs-display);line-height:1.08;letter-spacing:-.05em}
.lines .line{display:block;overflow:clip;padding-bottom:.06em}
.lines [data-line]{display:inline-block}
.hero-description{max-width:27em;margin-top:28px;font-size:var(--fs-lead);line-height:1.65;color:var(--text)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;margin-top:40px}
.platform-note{margin-top:16px;font-size:var(--fs-small);color:var(--muted)}
.platform-note span{white-space:nowrap}
.hero-visual{margin-top:clamp(56px,7vw,88px)}

/* 할 수 있는 일 */
.feature-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.feature-row+.feature-row{margin-top:clamp(72px,9vw,128px)}
.feature-row-flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature-row-flip .feature-text{order:2}
.feature-text{display:flex;flex-direction:column;gap:16px;max-width:30em}
.feature-text h3{font-size:var(--fs-h2);line-height:1.16}
.feature-text p{font-size:var(--fs-lead);line-height:1.65}
.feature-text .feature-hint{font-size:var(--fs-small);color:var(--muted)}
.creator-visual figcaption{margin-top:14px;font-size:var(--fs-small);color:var(--muted)}

/* 대화·일 돕기 예시: 앱 화면 조각(light-design.css의 .app-*)을 바탕 위에 띄워요 */
.ui-chat,.ui-task{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:560px;padding:60px clamp(20px,4vw,48px) 32px;border-radius:var(--radius-lg);background:var(--field)}
.ui-chat .app-bubble,.ui-task-stack{width:100%;max-width:360px}
.ui-chat-pet canvas{display:block;width:170px;height:170px;margin-top:4px}
.ui-task-stack{display:flex;flex-direction:column;align-items:center;gap:4px}
.ui-task-stack>*{width:100%}
.ui-task-pet.ui-task-pet{width:110px;height:110px}
.ui-label{position:absolute;top:18px;left:24px;font-size:13px;font-weight:600;color:#5d5f68}

/* 일곱 가지 움직임 */
.moods{background:var(--surface)}
.mood-stage{display:flex;flex-direction:column;align-items:center;padding:clamp(32px,4vw,56px) 24px clamp(40px,5vw,64px);border-radius:var(--radius-lg);background:#fff}
.mood-pet{width:min(440px,100%);aspect-ratio:1}
.mood-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:720px;margin-top:16px}
.mood-picker button{min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:600;transition:background-color var(--t-hover) ease,color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.mood-picker button:active{transform:scale(.96)}
.mood-picker button[aria-pressed="true"]{background:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){.mood-picker button[aria-pressed="false"]:hover{background:var(--surface-2)}}
.mood-text{margin-top:24px;font-size:var(--fs-lead);font-weight:600;color:var(--ink)}

/* 사용 방법 */
.start-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.start-steps{display:flex;flex-direction:column;gap:32px;margin-top:clamp(40px,5vw,56px)}
.start-steps h3{font-size:var(--fs-h3);line-height:1.35}
.start-steps p{margin-top:6px;max-width:30em}
.start-visual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;aspect-ratio:1;border-radius:var(--radius-lg);background:var(--surface)}
.keys{display:flex;gap:16px}
.keys kbd{display:grid;place-items:center;width:clamp(88px,10vw,128px);aspect-ratio:1;border-radius:24px;background:#fff;color:var(--ink);font-family:inherit;font-size:clamp(36px,4vw,52px);transform-origin:50% 100%}
.start-visual .scene-controls{margin:0;background:#fff}
.keys kbd.key-wide{width:auto;aspect-ratio:auto;height:clamp(88px,10vw,128px);padding:0 32px;font-size:var(--fs-lead);font-weight:600}
.start-bubble{width:min(100%,280px)}

/* 스킨 마켓 */
.ui-market{overflow:hidden;border-radius:var(--radius-lg);background:#fff;box-shadow:0 0 0 1px #e7e7ec,0 40px 80px -56px rgba(32,35,65,.45)}
.ui-market-bar{display:flex;align-items:center;gap:12px;height:60px;padding:0 24px;border-bottom:1px solid #ececf0;font-size:14px;color:#5d5f68}
.ui-market-bar strong{font-size:16px;color:#1d1e22}
.ui-soon{padding:3px 10px;border-radius:999px;background:#f1f1f4;font-size:12px;font-weight:600;color:#3d3f46}
.ui-market-search{margin-left:auto;width:min(260px,40%);padding:8px 14px;border-radius:999px;background:#f4f4f6;color:#666872;font-size:13px}
.ui-market-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center;padding:32px}
.ui-skin-hero{display:grid;place-items:center;aspect-ratio:4/3;border-radius:20px;background:var(--field)}
.ui-skin-hero canvas{width:min(320px,80%);aspect-ratio:1}
.ui-skin-info{display:flex;flex-direction:column;align-items:flex-start}
.ui-skin-kind{font-size:14px;font-weight:600;color:#5d5f68}
.ui-skin-name{margin-top:4px;font-size:36px;font-weight:700;letter-spacing:-.04em;color:#1d1e22}
.ui-skin-desc{margin-top:12px;max-width:26em;font-size:15px;line-height:1.65;color:#4d4f58}
.ui-skin-meta{display:flex;gap:28px;margin-top:24px}
.ui-skin-meta dt{font-size:13px;color:#666872}
.ui-skin-meta dd{margin-top:2px;font-size:15px;font-weight:600;color:#1d1e22}
.ui-skin-btn{display:inline-flex;align-items:center;gap:8px;margin-top:28px;padding:11px 18px;border-radius:999px;background:#f1f1f4;font-size:14px;font-weight:600;color:#24262b}
.ui-skin-btn .icon{width:16px;height:16px}
.ui-market-shelf{padding:0 32px 32px}
.ui-market-shelf>p{margin-bottom:12px;font-size:14px;font-weight:600;color:#1d1e22}
.ui-shelf-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ui-shelf-row span{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;aspect-ratio:5/4;padding:14px;border-radius:16px;background:#f4f4f6;font-size:14px;font-weight:600;color:#3d3f46}
.ui-shelf-row small{font-size:13px;font-weight:500;color:#666872}
.market-links{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:28px}

/* 크리에이터 */
.creators{background:var(--surface)}
.creator-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:center}
.creator-intro{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.creator-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:8px}
.creator-policy{font-size:var(--fs-small);color:var(--muted)}
.ui-editor{overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 0 0 1px #e3e3e8,0 40px 80px -56px rgba(32,35,65,.45)}
.ui-editor-bar{display:flex;align-items:center;gap:16px;height:48px;padding:0 16px;border-bottom:1px solid #ececf0;font-size:13px;font-weight:600;color:#3d3f46}
.ui-editor-save{margin-left:auto;padding:5px 12px;border-radius:999px;background:#24262b;color:#fff;font-size:12px}
.ui-editor-body{display:grid;grid-template-columns:132px minmax(0,1fr);min-height:360px}
.ui-editor-moods{display:flex;flex-direction:column;gap:2px;padding:14px 10px;border-right:1px solid #ececf0;background:#fafafb;font-size:13px;color:#5d5f68}
.ui-editor-moods li{padding:7px 10px;border-radius:8px}
.ui-editor-moods li.on{background:#24262b;color:#fff;font-weight:600}
.ui-editor-canvas{display:grid;place-items:center;background:#f3f4f8}
.ui-editor-canvas canvas{width:min(280px,80%);aspect-ratio:1;border-radius:20px;background:#fff}
.traffic{display:flex;gap:8px}
.traffic i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.traffic i:nth-child(2){background:#febc2e}.traffic i:nth-child(3){background:#28c840}

/* 자주 묻는 질문 */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-list details{border-radius:var(--radius-md);background:var(--surface);transition:background-color var(--t-hover) ease}
.faq-list details[open]{background:var(--surface-2)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:20px 24px;list-style:none;cursor:pointer;font-size:var(--fs-body);font-weight:600;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.plus{position:relative;flex:none;width:16px;height:16px}
.plus::before,.plus::after{content:'';position:absolute;top:7px;left:0;width:16px;height:2px;border-radius:2px;background:var(--ink);transition:transform 240ms var(--ease-out)}
.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(0)}
.faq-answer{max-width:36em;padding:0 56px 24px 24px;color:var(--text)}
.faq-answer a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* 마지막 다운로드 */
.download-section{padding-block:var(--section);background:var(--dark);color:var(--dark-text)}
.download-section :focus-visible{outline-color:#fff}
.download-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.download-pet{width:240px;height:240px;margin-bottom:16px}
.download-inner .section-title{color:#fff}
.download-inner .section-copy{margin-top:20px;color:var(--dark-text)}
.download-inner .os-buttons{margin-top:40px}
.download-inner .btn-quiet{background:#24252b;color:#fff}
.download-inner .platform-note{color:#9fa1aa}

/* 바닥글 */
.footer{padding-block:72px 48px;font-size:var(--fs-small);color:var(--muted)}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px}
.footer-brand p{margin-top:12px}
.footer-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.footer-links h3{margin-bottom:8px;font-size:var(--fs-small);font-weight:600;letter-spacing:-.01em}
.footer-links a,.footer-links button{display:flex;align-items:center;min-height:40px;padding:0;border:0;background:none;color:var(--muted);font-size:var(--fs-small);text-align:left;transition:color var(--t-hover) ease}
.footer-links a:hover,.footer-links button:hover{color:var(--ink)}
.footer-links .is-strong{font-weight:700;color:var(--text)}
.company{display:flex;flex-direction:column;gap:4px;margin-top:56px;padding:24px;border-radius:var(--radius-md);background:var(--surface);line-height:1.8}
.company span{display:inline-block;margin-right:20px}

/* 안내 대화상자 */
.dialog{width:calc(100% - 40px);max-width:440px;padding:32px;border:0;border-radius:var(--radius-lg);background:#fff;color:var(--text);box-shadow:0 24px 64px rgba(17,17,19,.22)}
.dialog::backdrop{background:rgba(17,17,19,.4)}
.dialog h2{font-size:var(--fs-h3);line-height:1.35}
.dialog p{margin:14px 0 28px;font-size:var(--fs-small);line-height:1.8;color:var(--text);white-space:pre-line}
.dialog .btn{width:100%}

/* 로그인·회원가입·신청 창 (assets/auth.js가 만들어요). 선 대신 바탕 톤으로 칸을 나눠요. */
.auth-dialog{width:calc(100% - 32px);max-width:420px;max-height:calc(100svh - 32px);padding:40px 32px 28px;overflow-y:auto;border:0;border-radius:var(--radius-lg);background:#fff;color:var(--text);box-shadow:0 24px 64px rgba(17,17,19,.22)}
.auth-dialog::backdrop{background:rgba(17,17,19,.4)}
.auth-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--muted)}
.auth-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.auth-close:hover{background:var(--surface);color:var(--ink)}
.auth-body h2{font-size:var(--fs-h3);line-height:1.35;color:var(--ink)}
.auth-lead{margin-top:8px;font-size:var(--fs-small);line-height:1.7;white-space:pre-line}
.auth-lead:empty{display:none}
.auth-body form{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.auth-social{display:flex;flex-direction:column;gap:8px;margin-top:24px}
.auth-provider{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 48px;border:0;border-radius:999px;background:var(--surface);color:var(--ink);font-size:var(--fs-small);font-weight:600}
.auth-provider svg{position:absolute;left:18px;width:20px;height:20px}
.auth-provider:hover{background:var(--surface-2)}
.auth-or{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:13px;color:var(--muted)}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--surface-2)}
.auth-or+form{margin-top:16px}
.auth-field{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.auth-field input,.auth-field select,.auth-field textarea{width:100%;min-height:48px;padding:12px 16px;border:0;border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-weight:400}
.auth-field textarea{resize:vertical;line-height:1.6}
.auth-field input:focus-visible,.auth-field select:focus-visible,.auth-field textarea:focus-visible{outline:2px solid #6d6c68;outline-offset:0;background:#fff}
.auth-field small{font-size:13px;font-weight:400;color:var(--muted)}
.auth-agree{display:flex;flex-direction:column;gap:2px;margin:4px 0 0;padding:12px 16px;border:0;border-radius:12px;background:var(--surface)}
.auth-agree label{display:flex;align-items:center;gap:10px;min-height:36px;font-size:var(--fs-small)}
.auth-agree label:first-of-type{font-weight:600}
.auth-agree input{width:18px;height:18px;accent-color:var(--ink)}
.auth-agree a{text-decoration:underline;text-underline-offset:.2em}
.auth-submit{width:100%;margin-top:6px}
.auth-body>.auth-submit{margin-top:24px}
.auth-submit:disabled{opacity:.5}
.auth-link{min-height:44px;padding:0;border:0;background:none;color:var(--ink);font-size:var(--fs-small);font-weight:600;text-decoration:underline;text-underline-offset:.25em}
.auth-body>.auth-link{margin-top:8px}
.auth-switch{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--surface-2);font-size:var(--fs-small);color:var(--muted)}
.auth-fine{margin-top:12px;font-size:13px;color:var(--muted);text-align:center}
.auth-msg{margin-top:12px;font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.auth-msg:empty{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 내 계정 페이지 */
.account{padding-block:clamp(56px,8vw,112px) var(--section)}
.account-inner{max-width:640px}
.account h1{font-size:clamp(32px,4.6vw,48px);line-height:1.15;letter-spacing:-.04em;color:var(--ink)}
.account-lead{margin-top:16px;font-size:var(--fs-lead);line-height:1.6}
.account-error{margin-top:16px;font-weight:600;color:var(--ink)}
.account-error:empty{display:none}
.account-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.account h2{margin-top:56px;font-size:var(--fs-h3);color:var(--ink)}
.account-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.account-list li{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:18px 20px;border-radius:16px;background:var(--surface)}
.account-list strong{font-size:var(--fs-small);color:var(--ink)}
.account-list time{font-size:13px;color:var(--muted)}
.account-list p{grid-column:1/-1;font-size:var(--fs-small);line-height:1.6;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.account-list .account-empty{display:block;color:var(--muted)}
.account-danger{margin-top:56px;padding-top:24px;border-top:1px solid var(--surface-2)}
.account-confirm{margin-top:16px;padding:20px;border-radius:16px;background:var(--surface)}
.account-confirm p{font-size:var(--fs-small);line-height:1.7}
.account-confirm .account-actions{margin-top:16px}

/* 움직임: 움직임 줄이기를 켠 사용자에게는 처음부터 완성된 화면을 보여 줘요. */
@media (prefers-reduced-motion:no-preference){
  .js .hero [data-line]{transform:translateY(105%);animation:load-line 900ms var(--ease-expo) forwards;animation-delay:calc(100ms + var(--i) * 90ms)}
  .js .hero [data-load]{opacity:0;transform:translateY(16px);animation:load-rise 700ms var(--ease-out) forwards;animation-delay:var(--d)}
  .js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-expo)}
  .js [data-reveal].is-in{opacity:1;transform:none}
  .js .start-steps li:nth-child(2){transition-delay:90ms}
  .js .start-steps li:nth-child(3){transition-delay:180ms}
  .js .feature-row .feature-figure{transition-delay:120ms}
  .keys kbd{animation:key-press 3.2s var(--ease-out) infinite}
  .keys kbd:nth-child(2){animation-delay:.22s}
  .start-bubble{animation:bubble-in 3.2s var(--ease-out) infinite}
}
@keyframes load-line{to{transform:none}}
@keyframes load-rise{to{opacity:1;transform:none}}
@keyframes key-press{0%,8%,100%{transform:none;background:#fff}4%{transform:scale(.92) translateY(4px);background:#e9e9ee}}
@keyframes bubble-in{0%,14%{opacity:0;transform:translateY(10px) scale(.96)}22%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-4px)}}

/* 반응형 */
@media (max-width:1024px){
  .feature-row,.feature-row-flip{grid-template-columns:1fr;gap:40px}
  .feature-row-flip .feature-text{order:0}
  .start-grid,.creator-grid,.faq-grid{grid-template-columns:1fr}
  .start-visual{aspect-ratio:16/10}
  .feature-text,.section-copy,.section-heading,.start-steps p{max-width:none}
  .ui-market-body{grid-template-columns:1fr;gap:24px}
  .footer-top{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--gutter:20px;--fs-body:16px;--fs-lead:18px;--fs-h3:21px}
  .hero-cta{flex-direction:column;gap:4px}
  .os-buttons{flex-direction:column;align-items:stretch;width:min(100%,320px)}
  .ui-chat,.ui-task{min-height:0;padding:52px 16px 20px}
  .ui-chat-pet canvas{width:140px;height:140px}
  .ui-label{left:16px}
  .mood-stage{padding:24px 12px 32px}
  .mood-picker button{padding:0 16px}
  .start-visual{aspect-ratio:auto;padding:48px 16px}
  .ui-market-bar{padding:0 16px}
  .ui-market-search{display:none}
  .ui-market-body{padding:16px}
  .ui-market-shelf{padding:0 16px 20px}
  .ui-shelf-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ui-editor-body{grid-template-columns:1fr;min-height:0}
  .ui-editor-moods{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid #ececf0}
  .ui-editor-canvas{padding:24px}
  .faq-list summary{min-height:64px;padding:18px 20px}
  .faq-answer{padding:0 20px 20px}
  .download-pet{width:180px;height:180px}
  .footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .company{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}