/* Shared app-detail layout. Each app changes only its six color tokens. */
* { box-sizing: border-box; }
body { margin: 0; }
.detail-header { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; padding: 30px clamp(22px, 5vw, 72px); font-family: "DM Sans", "Nanum Gothic", sans-serif; }
.home-button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--app-muted) 25%, transparent); border-radius: 9px; color: var(--app-text); background: color-mix(in srgb, var(--app-background) 80%, transparent); font-size: .9rem; font-weight: 700; text-decoration: none; transition: background .2s, transform .2s; }.home-button:hover { color: var(--app-text); background: var(--app-background); transform: translateX(-2px); }.home-button span { font-size: 1.15rem; line-height: 1; }
.app-page { overflow: hidden; background-color: var(--app-background); background-image: radial-gradient(circle, color-mix(in srgb, var(--app-accent-alt) 55%, transparent) 1.4px, transparent 1.5px); background-size: 62px 62px; color: var(--app-text); font-family: "DM Sans", "Nanum Gothic", sans-serif; line-height: 1.5; }.app-page a { color: inherit; }.app-section { width: min(1280px, calc(100% - 48px)); margin-left: auto; margin-right: auto; }.download-section { width: 100%; }
.app-hero { min-height: 780px; padding: 190px 24px 120px; display: grid; place-items: center; text-align: center; }.hero-copy { width: min(780px, 100%); }.app-icon { width: 142px; height: 142px; display: block; margin: 0 auto 37px; border-radius: 32px; box-shadow: 0 24px 42px color-mix(in srgb, var(--app-accent) 25%, transparent); }.app-page h1, .app-page h2 { margin: 0; color: var(--app-text); font-weight: 700; letter-spacing: -.07em; line-height: 1.04; }.app-page h1 { font-size: clamp(3.7rem, 8vw, 7.5rem); }.hero-description { width: min(760px, 100%); margin: 27px auto 35px; color: var(--app-muted); font-size: clamp(1.05rem, 2vw, 1.43rem); line-height: 1.55; }.app-store-link { display: inline-block; transition: transform .2s ease; }.app-store-link:hover { transform: translateY(-3px); }.app-store-link img { display: block; width: 160px; height: auto; }
.app-section { margin-bottom: 132px; }.section-heading { margin: 0 auto 48px; text-align: center; }.section-label { display: inline-block; margin: 0 0 19px; padding: 7px 16px; border: 1px solid color-mix(in srgb, var(--app-accent) 45%, transparent); border-radius: 999px; color: var(--app-accent); background: color-mix(in srgb, var(--app-background) 76%, transparent); font-size: .76rem; font-weight: 700; letter-spacing: .14em; }.app-page h2 { font-size: clamp(2.35rem, 4.5vw, 4.35rem); }
.highlights { width: min(1080px, calc(100% - 48px)); }.highlight-list { display: grid; gap: 84px; }.highlight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .88fr); gap: clamp(18px, 4vw, 56px); align-items: center; }.highlight:nth-child(even) .highlight-visual { order: 2; }.highlight-visual { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 28px; background: linear-gradient(145deg, color-mix(in srgb, var(--app-surface) 80%, var(--app-background)), color-mix(in srgb, var(--app-accent-alt) 35%, var(--app-surface))); }.highlight-visual::before, .highlight-visual::after { content: ""; position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--app-accent) 17%, transparent); }.highlight-visual::before { width: 52%; height: 52%; right: -16%; top: -12%; }.highlight-visual::after { width: 34%; height: 34%; left: -10%; bottom: -8%; background: color-mix(in srgb, var(--app-accent-alt) 45%, transparent); }.highlight-copy { max-width: 420px; }.highlight-copy .section-label { margin-bottom: 18px; }.highlight-copy h3 { margin: 0 0 16px; color: var(--app-text); font-size: clamp(1.85rem, 3.4vw, 3.25rem); letter-spacing: -.065em; line-height: 1.08; }.highlight-copy p { margin: 0; color: var(--app-muted); font-size: 1.03rem; line-height: 1.72; }
.feature-section { padding-top: 25px; }.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }.feature-card { min-height: 270px; padding: 35px; border: 1px solid color-mix(in srgb, var(--app-muted) 20%, transparent); border-radius: 21px; background: color-mix(in srgb, var(--app-background) 92%, transparent); box-shadow: 0 6px 14px color-mix(in srgb, var(--app-text) 5%, transparent); }.feature-mark { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 15px; color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 10%, var(--app-background)); font-size: .8rem; font-weight: 700; letter-spacing: .07em; }.feature-card h3 { margin: 29px 0 12px; color: var(--app-text); font-size: 1.32rem; letter-spacing: -.045em; }.feature-card p { margin: 0; color: var(--app-muted); font-size: .95rem; line-height: 1.65; }
.highlight-icon { position: relative; z-index: 1; width: 70%; height: auto; color: var(--app-accent); filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--app-accent) 22%, transparent)); }
.faq-section { width: min(810px, calc(100% - 48px)); }.faq-list { border-top: 1px solid color-mix(in srgb, var(--app-muted) 25%, transparent); }.faq-list details { border-bottom: 1px solid color-mix(in srgb, var(--app-muted) 25%, transparent); }.faq-list summary { position: relative; padding: 23px 40px 23px 0; cursor: pointer; list-style: none; color: var(--app-text); font-weight: 700; font-size: 1.06rem; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary::after { content: "+"; position: absolute; right: 3px; top: 18px; color: var(--app-accent); font-size: 1.55rem; font-weight: 400; }.faq-list details[open] summary::after { content: "−"; }.faq-list p { max-width: 650px; margin: -3px 0 23px; color: var(--app-muted); line-height: 1.7; }
.download-section { margin-bottom: 0; padding: 86px 28px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; background: color-mix(in srgb, var(--app-surface) 78%, transparent); }.download-section > img { width: 91px; height: 91px; border-radius: 22px; box-shadow: 0 14px 25px color-mix(in srgb, var(--app-accent) 20%, transparent); }.download-section strong { color: var(--app-text); font-size: 1.75rem; letter-spacing: -.05em; }.download-section .app-store-link img { width: 149px; }
.app-footer { margin: 0; border-top: 1px solid color-mix(in srgb, var(--app-muted) 14%, transparent); background: color-mix(in srgb, var(--app-surface) 86%, var(--app-accent) 14%); }
@media (max-width: 800px) { .app-hero { min-height: 680px; padding-top: 160px; }.app-icon { width: 118px; height: 118px; border-radius: 27px; }.highlight-list { gap: 58px; }.highlight { gap: 22px; }.feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .detail-header { padding: 21px 16px; }.home-button { padding: 8px 11px; font-size: .84rem; }.app-section, .download-section { width: 100%; }.app-hero { min-height: 610px; padding: 133px 22px 84px; }.app-icon { width: 102px; height: 102px; margin-bottom: 29px; border-radius: 24px; }.app-page h1 { font-size: 3.7rem; }.hero-description { font-size: 1rem; }.app-section { margin-bottom: 84px; }.section-heading { padding: 0 20px; margin-bottom: 34px; }.app-page h2 { font-size: 2.4rem; }.highlights { width: calc(100% - 40px); }.highlight-list { gap: 56px; }.highlight { grid-template-columns: 1fr; gap: 14px; }.highlight:nth-child(even) .highlight-visual { order: 0; }.highlight-visual { border-radius: 22px; }.highlight-copy { max-width: none; }.highlight-copy h3 { font-size: 2rem; }.feature-section { padding: 0 20px; }.feature-grid { grid-template-columns: 1fr; gap: 14px; }.feature-card { min-height: 0; padding: 27px; }.feature-card h3 { margin-top: 22px; }.faq-section { width: calc(100% - 40px); }.download-section { padding: 68px 22px; }.app-footer { text-align: center; } }