/* White-fox welcome: warm, legible, familiar controls throughout the service. */
:root { --paper:#fffaf6; --ink:#40312d; --muted:#79685f; --brand:#b94c3c; --brand-dark:#963c30; --line:#eddfd5; --blush:#fff0e9; --ivory:#f9eee5; --fox-peach:#ffe5d5; --fox-shadow:0 5px 18px #65422d07; }
body { background:var(--paper); }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button,a,summary { transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease; }
a:active,button:active { -webkit-tap-highlight-color:#b94c3c0c; }
button:disabled { cursor:not-allowed; }
.page { animation:fox-page-in .24s ease-out both; }
/* Release the fade's stacking context so fixed actions stay above the footer. */
.page:is(.service-detail-page,.service-input-page) { animation-fill-mode:backwards; }
@keyframes fox-page-in { from { opacity:0; } to { opacity:1; } }
.site-header { background:#fffaf6f7; border-bottom:1px solid #f1e6dc; backdrop-filter:blur(14px); }
.header-inner { max-width:1160px; gap:20px; }
.brand-wordmark { width:103px; }
.desktop-nav { gap:8px; }
.desktop-nav a { padding:10px 19px; border-radius: 8px; font-weight:600; }
.desktop-nav a[aria-current=page] { color:var(--brand-dark); background:#f9e9df; }
.desktop-nav a[aria-current=page]::after { display:none; }
.account-link { border-radius: 8px; background:#f5eae2; font-size:13px; padding:10px 15px; }
.header-actions .icon-button { width:44px; height:44px; }
.page.store-page { max-width:1160px; padding-top:25px; }
.page-title { font-weight:780; letter-spacing:-.04em; line-height:1.35; }
.page-intro,.settings-card p,.guest-library-note { font-size:14px; color:var(--muted); }
.eyebrow { letter-spacing:0; font-size: 13px; }
.primary-button,.secondary-button,.hero-secondary,.kakao-login-button { border-radius: 8px; font-size:15px; min-height:50px; font-weight:700; }
.primary-button { background:var(--brand); border-color:var(--brand); box-shadow:0 3px 0 #81392c0c; }
.primary-button:hover { background:var(--brand-dark); border-color:var(--brand-dark); }
.secondary-button { background:var(--surface); border-color:var(--line); }
.secondary-button:hover { background:#fff2e9; border-color:#dfbdac; }
.back-link { font-size:14px; padding:8px 12px 8px 0; margin-bottom:12px; }
.icon-button:hover { background:#f5e9e0; }
.fox-mascot { display:block; object-fit:contain; height:auto; flex:none; }
.welcome-scene { display:grid; grid-template-columns:.88fr 1.12fr; align-items:stretch; overflow:hidden; margin:0 0 24px; border-radius: 8px; background:#fff1e3; }
.welcome-entrance { order:2; min-width:0; }
.welcome-entrance > img { display:block; width:100%; height:100%; object-fit:cover; object-position:52% center; }
.welcome-copy { order:1; position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:24px 36px 30px; }
.welcome-greeter { width:170px; height:170px; margin-bottom:15px; }
.welcome-sign { width:206px; flex:none; position:relative; margin:0 0 21px; filter:drop-shadow(0 5px 3px #74513812); }
.welcome-sign-fox { position:relative; z-index:2; width:162px; height:auto; margin:0 auto -12px; }
.welcome-sign-board { position:relative; display:grid; place-items:center; min-height:77px; padding:7px 26px; border:6px solid #987359; border-radius:14px 10px 13px 11px; background:#fff8e7; box-shadow: none; }
.welcome-sign-board::before,.welcome-sign-board::after { content:''; position:absolute; width:4px; height:23px; border-radius:5px; background:#bc6551; top:18px; }
.welcome-sign-board::before { left:10px; }.welcome-sign-board::after { right:10px; }
.welcome-sign-board img { display:block; width:142px; height:auto; }
.welcome-copy h1 { font-size:clamp(24px,2.5vw,33px); line-height:1.42; letter-spacing:-.045em; font-weight:720; margin:0 0 10px; word-break:keep-all; }
.welcome-copy > p { color:#846653; font-size:14px; line-height:1.65; margin:0 0 21px; word-break:keep-all; }
.welcome-copy .primary-button { min-height:48px; padding:12px 22px; border-radius: 8px; font-size:14px; }
.friendly-portrait { background:#fff0e8; }
.library-intro,.library-jobs-heading { display:flex; align-items:center; gap:12px; }
.library-intro-fox { width:72px; height:72px; }.library-status-fox { width:64px; height:64px; }
.fox-status-art { width:104px; height:104px; margin:0 auto 16px; }
.fox-welcome { position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:337px; padding:32px 52px; margin:0 0 22px; border:1px solid #f7ddcc; border-radius: 8px; overflow:hidden; background:linear-gradient(115deg,#ffeddf 5%,#ffe4d4 100%); }
.fox-welcome::before { content:''; position:absolute; width:380px; height:380px; border-radius:50%; right:25px; top:-48px; background:#fff6e9a3; pointer-events:none; }
.fox-welcome-copy { position:relative; z-index:2; }
.fox-welcome-label { display:inline-block; border:1px solid #eed0b9; background:#fff8ec; color:#805638; padding:5px 12px; border-radius: 8px; font-size: 13px; font-weight:650; }
.fox-welcome h1 { font-size:41px; font-weight:750; line-height:1.27; letter-spacing:-.04em; margin:15px 0 11px; }
.fox-welcome-copy p { font-size:15px; color:#7a5a48; line-height:1.7; margin:0 0 19px; }
.fox-welcome-copy p br { display:none; }
.fox-welcome .primary-button { min-height:47px; padding:11px 19px; }
.fox-welcome-picture { position:relative; width:100%; height:294px; align-self:center; }
.fox-welcome-art { position:absolute; height:310px; width:310px; right:28px; bottom:-15px; max-width:none; filter:drop-shadow(0 12px 9px #a9744312); animation:fox-breathe 6s ease-in-out infinite; transform-origin:50% 85%; }
.fox-hello { position:absolute; right:5px; top:10px; z-index:1; background:var(--surface); border:1px solid #f1d8c5; border-radius:18px 18px 18px 4px; padding:9px 16px; color:#976443; font-size:14px; font-weight:700; transform:rotate(5deg); }
@keyframes fox-breathe { 0%,100% { transform:translateY(0) rotate(-.6deg); } 50% { transform:translateY(-4px) rotate(.6deg); } }
.store-home > .store-search { max-width:none; }
.store-search { background:var(--surface); border:1px solid #e8d9cd; border-radius: 8px; min-height:54px; box-shadow: none; }
.store-search input { font-size:16px; height:52px; padding-left:3px; }
.store-search input::placeholder { color:#927b6c; }
.store-search button { width:52px; height:52px; min-height:52px; border-radius: 8px; color:#795b4a; }
.store-search:focus-within { box-shadow:0 0 0 3px #edc0ad55; border-color:#bb7560; }
.service-shortcuts { gap:20px; padding:23px 8px; }
.shortcut { font-size:14px; font-weight:650; gap:8px; }
.shortcut-icon { width:58px; height:58px; border-radius: 8px; color:#9a6750; background:#f8e5d7; box-shadow: none; transition:transform .2s ease,box-shadow .2s ease; }
.shortcut-love .shortcut-icon { background:#ffe1e4; color:#a64d67; }
.shortcut-work .shortcut-icon { background:#deecf9; color:#4b6c93; }
.shortcut-study .shortcut-icon { background:#e8e1fa; color:#7a60a5; }
.shortcut-money .shortcut-icon { background:#faedc8; color:#987124; }
.shortcut-living .shortcut-icon { background:#dfeddf; color:#527551; }
.shortcut svg { width:28px; height:28px; stroke-width:1.8; }
.shortcut:hover .shortcut-icon { transform:translateY(-3px); box-shadow: none; }
.store-offer-line { min-height:48px; background:#f4eee7; color:#725b4a; border-radius: 8px; font-size:13px; }
.store-section { margin-top:37px; }
.store-section-heading { margin-bottom:15px; }
.store-section-heading h2 { font-size:23px; font-weight:780; letter-spacing:-.035em; }
.store-more { color:#786252; font-size:13px; min-height:44px; }
.spotlight-track { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; overflow:visible; padding:0; margin:0; }
.spotlight { display:grid; grid-template-columns:1fr 108px; min-height:180px; height:auto; border:1px solid #ecdfd4; border-radius: 8px; background:#fff1e5; color:var(--ink); overflow:hidden; }
.spotlight-bond { background:#ffeded; }.spotlight-moon { background:#eeebfa; }.spotlight-chief { background:#f4ebdf; }
.spotlight::after { display:none; }
.spotlight-art { grid-area:1/2; height:100%; min-height:180px; object-position:50% 20%; mask-image:linear-gradient(90deg,transparent,#000 20%); }
.spotlight-copy { position:relative; inset:auto; grid-area:1/1; padding:23px 0 20px 21px; min-width:0; z-index:1; }
.spotlight-copy > span { color:#846655; font-size: 13px; opacity:1; }
.spotlight-copy h3 { margin:7px 0; font-size:23px; font-weight:800; line-height:1.3; letter-spacing:-.045em; }
.spotlight-copy p { color:#715b50; font-size: 13px; line-height:1.7; }
.spotlight-copy .spotlight-open { display:flex; align-items:center; gap:3px; margin-top:10px; font-size: 13px; font-weight:700; color:#654c40; }
.spotlight-open svg { width:13px; height:13px; }
.service-grid { gap:22px 18px; }
.service-card,.service-card.concern-link { border:1px solid #eee1d7; border-radius: 8px; background:var(--surface); overflow:hidden; box-shadow: none; transition:transform .2s ease,box-shadow .2s ease; }
.service-card:hover { transform:translateY(-3px); box-shadow: none; }
.service-cover { border-radius:21px 21px 0 0; aspect-ratio:1/1.04; background:#fbf1e9; }
.service-cover::after { background:linear-gradient(0deg,#fff 0%,transparent 27%); }
.service-cover-image { object-position:center 18%; }
.service-card .service-cover-name { inset:12px auto auto 12px; max-width:calc(100% - 24px); padding:4px 10px; border-radius: 8px; background:#fffaf2f2; border:1px solid #eedac9; color:#785b43 !important; font-family:var(--sans); font-size: 13px; font-weight:700; line-height:1.5; letter-spacing:0; text-wrap:wrap; }
.service-card-copy { padding:13px 16px 18px; }
.service-guide { color:#846f61; font-size: 13px; }
.service-card-copy h3 { font-size:18px; margin:5px 0 6px; font-weight:750; }
.service-card-copy p { color:#7a695e; font-size:13px; }
.service-card-copy .service-offer { color:#9d4839; background:#fff0e8; border-radius:8px; padding:3px 8px; font-size: 13px; }
.service-card.service-card-compact { border-radius: 8px; padding:10px; grid-template-columns:92px minmax(0,1fr); gap:15px; }
.service-card-compact .service-cover { border-radius: 8px; }
.service-card-compact .service-card-copy { padding:4px 5px 4px 0; }
.service-card-compact .service-card-copy h3 { font-size:20px; }
.work-collection { padding:24px; background:#f0f0e8; border-radius: 8px; }
.overall-banner { background:#f3e7d7; border:1px solid #ebdbc8; border-radius: 8px; padding:25px 28px; }
.overall-banner h2 { font-weight:800; }
.overall-banner p,.overall-banner > div > span { color:#755c43; font-size:13px; }
.cast-avatar { border:4px solid #fff; box-shadow: none; }
.cast-shortcuts span { font-size:13px; }
.fox-note { display:flex; align-items:center; gap:20px; background:#fff1e5; padding:15px 23px; border:1px solid #efdfcf; border-radius: 8px; }
.fox-note > .fox-mascot { width:100px; height:100px; }
.fox-note strong { font-size:17px; font-weight:750; line-height:1.5; display:block; }
.fox-note p { margin:5px 0 0; color:#7c624e; font-size:14px; line-height:1.7; }
.fox-guide-link { display:flex; align-items:center; gap:12px; background:#fff1e5; border:1px solid #efdfcf; border-radius: 8px; padding-right:20px; margin-top:38px; }
.fox-guide-link .fox-note { border:0; background:none; flex:1; min-width:0; }
.fox-guide-link > svg { color:#9e7356; width:20px; }
.catalog-intro { color:var(--muted); margin:-10px 0 20px; font-size:15px; }
.store-filters.concern-filters { gap:8px; padding:11px 0; border:0; background:#fffaf6f5; backdrop-filter:blur(10px); margin:8px 0; }
.store-filters .filter { min-height:44px; padding:9px 17px; font-size:14px; border:1px solid #ebdcd0; border-radius: 8px; color:#7d6656; background:var(--surface); }
.store-filters .filter.selected { background:#7d5341; color:#fff; border-color:#7d5341; }
.catalog-count { font-size:13px; color:var(--muted); }
.catalog-empty .fox-mascot,.empty-state .fox-mascot { width:144px; height:144px; margin:0 auto 17px; }
.empty-state,.catalog-empty { background:#fff4e9; border:1px solid #f0e0d1; border-radius: 8px; padding:34px 22px; margin:22px 0; }
.empty-state h2,.catalog-empty h2 { font-size:22px; font-weight:750; margin:0 0 8px; }
.empty-state p,.catalog-empty p { font-size:14px; color:var(--muted); }
.feature-empty { text-align:center; padding:22px; border-radius: 8px; background:var(--surface); }
.feature-empty-fox { width:100px; height:100px; margin:0 auto 8px; }
.service-detail-cover { border-radius: 8px; height:530px; }
.service-detail-cover::after { background:linear-gradient(0deg,#f8e7d6f2,transparent 55%); }
.service-detail-cover-copy { color:#604739; }.service-detail-cover-copy strong { font-size:35px; font-weight:800; }
.service-detail-info h1 { font-weight:800; }
/* 목차는 점과 선으로 이어지는 타임라인 모양 (owner, 2026-10-29). */
.service-contents ol { position:relative; }
.service-contents li { position:relative; display:block; padding:0 0 22px 30px; font-size:15px; line-height:1.5; color:#4d3a2e; }
.service-contents li:last-child { padding-bottom:0; }
.service-contents li::before { content:''; position:absolute; left:5px; top:6px; width:10px; height:10px; border-radius:50%; background:#fffaf5; border:2px solid #c98a63; box-sizing:border-box; }
.service-contents li:first-child::before { background:#c98a63; }
.service-contents li::after { content:''; position:absolute; left:9px; top:20px; bottom:2px; width:2px; border-radius:1px; background:linear-gradient(#e7c3a8,#f1dccb); }
.service-contents li:last-child::after { display:none; }
.service-contents li span { display:block; margin-bottom:2px; font-size: 13px; font-weight:700; letter-spacing:.06em; color:#b8875f; }
.service-detail-description { font-size:14px; }
.service-start-dock { background:var(--paper); border-color:var(--line); }
.service-start-dock span { font-size: 13px; }
.service-input-title { font-weight:800; }
.input-fox-note { margin:0 0 20px; padding:9px 16px; gap:14px; }
.input-fox-note > .fox-mascot { width:80px; height:80px; }
.input-fox-note strong { font-size:16px; }.input-fox-note p { font-size:13px; }
.service-input-subject { padding:15px; border:1px solid var(--line); border-radius: 8px; background:var(--surface); }
.service-input-subject img { width:52px; height:62px; border-radius: 8px; }
.service-input-subject span { font-size: 13px; }
.profile-form input:not([type=checkbox]):not([type=hidden]),.profile-form select,.feature-field input:not([type=checkbox]),.feature-field select,.feature-field textarea,.feature-library-controls input,.feature-library-controls select { border:1px solid #dfcdbf; border-radius: 8px; background:var(--surface); min-height:50px; font-size:16px; padding:11px 12px; color:var(--ink); }
.profile-form select:disabled { background:#f4eee8; color:#a7978b; border-color:#eadfd5; }
.profile-form input:focus-visible,.profile-form select:focus-visible { outline:2px solid #bd735b; outline-offset:2px; }
.profile-form .field > label,.profile-form .field-heading > label { font-size:14px; font-weight:650; }
.profile-form .field small { font-size: 13px; line-height:1.75; color:#79675b; }
.profile-form fieldset { background:var(--surface); border:1px solid #efdfd3; border-radius: 8px; padding:20px; margin:0 0 20px; }
.profile-form fieldset > legend { font-size:16px; font-weight:750; padding:0 7px; }
.profile-form .name-analysis-fields { background:#fff9f3; }
.service-input-page .feature-profile-picker { background:#eaf2e9; border:1px solid #d7e5d3; border-radius: 8px; padding:4px 14px; }
.service-input-page .feature-profile-picker summary { color:#4f6b4c; font-size:14px; font-weight:650; }
.service-input-page .feature-profile-picker[open] { padding-bottom:12px; }
.service-input-page .concern-change > summary { font-size:13px; }
.service-input-page .form-actions { background:#fffaf6f7; backdrop-filter:blur(12px); }
.checkbox-label { white-space:normal; font-size:13px !important; }
.field-heading .checkbox-label { padding:8px 12px; background:#fff1e7; border-radius: 8px; min-height:44px; }
.checkbox-label input[type=checkbox] { width:20px; height:20px; min-height:20px; }
.concern-partner-choice { background:#fff0e8; border:1px solid #f0d9ca; border-radius: 8px; padding:15px 17px; }
.concern-partner-choice p,.chart-note { font-size:13px; color:#7a6456; }
.service-input-page .profile-submit-note { font-size: 13px; line-height:1.8; }
.settings-card { border-radius: 8px; background:var(--surface); border:1px solid #ecded3; box-shadow: none; }
.settings-card h2 { font-size:18px; font-weight:750; }.settings-card p { font-size:14px; }
.account-shortcuts { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:23px 0; }
.account-identity { display:flex; align-items:center; gap:20px; margin-bottom:25px; }.account-identity .fox-mascot { width:100px; height:100px; }.account-identity .page-title { margin:0; }
.account-shortcuts a { display:flex; align-items:center; gap:12px; padding:18px; border-radius: 8px; border:1px solid var(--line); background:var(--surface); }
.account-shortcuts a > svg:first-child { width:23px; height:23px; color:#a7654c; }
.account-shortcuts a > svg:last-child { width:15px; height:15px; margin-left:auto; color:#ae8f7e; }
.account-shortcuts span { min-width:0; }.account-shortcuts strong { display:block; font-size:15px; }.account-shortcuts small { display:block; font-size: 13px; margin-top:2px; color:var(--muted); }
.kakao-login-button:disabled { background:#f6efe5; color:#8b7a67; opacity:1; border:1px solid var(--line); }
.feature-menu { gap:8px; }.feature-menu .secondary-button { border-radius: 8px; }
.library-item,.library-job { background:var(--surface); border:1px solid var(--line); border-radius: 8px; padding:16px; margin-bottom:13px; }
.library-copy p { font-size:13px; }.library-count { background:#f5e5d8; border-radius: 8px; padding:3px 10px; font-size:13px; }
.reading-chapter { background:var(--surface); border:1px solid var(--line); border-radius: 8px; padding:25px; }
.reading-chapter h2 { font-weight:750; }.reading-chapter p { font-size:16px; }
.reading-toc { border-radius: 8px; background:#f8eee3; padding:18px; }
.reading-toc a { min-height:44px; display:flex; align-items:center; }
.reading-reference-details,.concern-summary { border-radius: 8px; }
.world-fox-note { margin:0 0 28px; }.world-heading { margin-bottom:26px; }
.guardian-card .guardian-portrait { border-radius: 8px; overflow:hidden; }
.guardian-copy { padding:15px 5px 0; }.guardian-name h3 { font-weight:800; }
.guardian-description,.guardian-quote { font-size:14px; }
.home-faq details { border-radius: 8px; padding:14px 18px; margin:10px 0; border:1px solid var(--line); background:var(--surface); }
.home-faq summary { min-height:44px; align-content:center; font-size:15px; }
.home-faq p { font-size:14px; }
.site-footer { position:relative; margin-top:60px; padding-top:30px; border-top:1px solid #eddfd3; }
.site-footer .footer-brand { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; margin-bottom:24px; }
.site-footer .welcome-sign { position:relative; display:block; width:170px; margin:0; }
.site-footer .welcome-sign-fox { width:130px; }
.site-footer .welcome-sign-board { min-height:64px; padding:5px 22px; }
.site-footer .welcome-sign-board img { width:118px; }
.footer-links a,.site-footer p { font-size: 13px; }
/* The footer starts below the first screen, so a short or loading page never squeezes the header and footer together. */
#main { min-height:calc(100svh - 72px); }
.initial-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:calc(100svh - 72px); padding:24px; font-size:15px; }
body:has(#app > .initial-loading, #app > .page > .initial-loading, #app > .page > .page-loading:only-child) .site-footer { display:none; }
.page-loading { display:flex; align-items:center; justify-content:center; min-height:calc(100svh - 200px); margin:0; color:var(--muted); font-size:15px; text-align:center; }
.initial-loading .fox-mascot { width:144px; margin:0 auto 15px; animation:fox-breathe 6s ease-in-out infinite; }
.toast { border-radius: 8px; font-size:14px; }
@media (max-width:960px) {
  .fox-welcome { padding:28px 35px; }.fox-welcome-art { right:0; }
  .spotlight-track { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .spotlight { grid-template-columns:1fr 76px; }.spotlight-copy { padding:18px 0 16px 15px; }.spotlight-copy h3 { font-size:21px; }
  .service-shortcuts { gap:12px; }.shortcut-icon { width:54px; height:54px; }
}
@media (max-width:600px) {
  .welcome-scene { display:block; margin-bottom:20px; border-radius: 8px; }
  .welcome-entrance > img { width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; }
  .welcome-copy { padding:28px 21px 22px; }
  .welcome-greeter { position:absolute; width:130px; height:130px; left:12px; top:-115px; margin:0; }
  .welcome-copy h1 { font-size:21px; line-height:1.45; font-weight:680; max-width:260px; margin-bottom:7px; }
  .welcome-copy > p { font-size: 13px; margin-bottom:16px; }
  .welcome-copy .primary-button { width:100%; justify-content:center; min-height:47px; font-size:14px; }
  html { scroll-padding-top:80px; }
  .site-header { height:65px; }#main,.initial-loading { min-height:calc(100svh - 130px - env(safe-area-inset-bottom)); }.header-inner { gap:8px; padding:0 18px; }.brand-wordmark { width:96px; }
  .header-actions { gap:4px; }.header-actions .icon-button { width:44px; height:44px; }.account-link { min-height:40px; font-size: 13px; padding:8px 11px; }
  .page { padding:24px 18px 35px; }.page.store-page { padding:16px 18px 35px; }.page-title { font-size:28px; }
  .page-intro,.guest-library-note { font-size:13px; }
  .fox-welcome { min-height:240px; padding:22px 20px; margin-bottom:17px; border-radius: 8px; grid-template-columns:1fr 43%; }
  .fox-welcome::before { width:240px; height:240px; top:20px; right:-42px; }
  .fox-welcome-label { font-size: 13px; padding:4px 8px; white-space:nowrap; }
  .fox-welcome h1 { font-size:29px; margin:13px 0 9px; line-height:1.25; }
  .fox-welcome-copy p { font-size: 13px; line-height:1.6; margin-bottom:16px; }.fox-welcome-copy p br { display:initial; }
  .fox-welcome .primary-button { font-size:13px; min-height:44px; padding:9px 12px; gap:6px; border-radius: 8px; }.fox-welcome .primary-button svg { width:16px; }
  .fox-welcome-picture { height:205px; }.fox-welcome-art { width:190px; height:190px; right:-36px; bottom:-6px; }
  .fox-hello { right:-9px; top:0; font-size: 13px; padding:7px 10px; }
  .store-search { min-height:52px; border-radius: 8px; margin-bottom:3px; }.store-search input { font-size:14px; height:50px; }.store-search button { height:50px; width:46px; min-height:50px; }
  .service-shortcuts { gap:18px 12px; padding:21px 2px; }.shortcut { font-size:13px; gap:6px; }.shortcut-icon { width:52px; height:52px; border-radius: 8px; }
  .shortcut svg { width:27px; height:27px; }.store-offer-line { font-size: 13px; padding-left:13px; gap:7px; }
  .store-section { margin-top:29px; }.store-section-heading h2 { font-size:21px; }.store-more { font-size: 13px; }
  .spotlight-track { display:flex; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; margin-right:-18px; padding:0 18px 5px 0; gap:12px; }
  .spotlight { flex:0 0 84%; grid-template-columns:minmax(0,1fr) 105px; min-height:171px; border-radius: 8px; height:auto; scroll-snap-align:start; }
  .spotlight-art { min-height:171px; }.spotlight-copy { padding:20px 0 16px 18px; }.spotlight-copy h3 { font-size:24px; }.spotlight-copy p { font-size: 13px; }
  .service-grid { gap:17px 12px; }.service-card,.service-card.concern-link { border-radius: 8px; }.service-cover { border-radius:18px 18px 0 0; aspect-ratio:1/1.1; }
  .service-card .service-cover-name { inset:9px auto auto 9px; font-size: 13px; padding:3px 8px; }
  .service-card-copy { padding:8px 12px 14px; }.service-guide { font-size: 13px; line-height:1.5; }.service-card-copy h3 { font-size:16px; margin:5px 0; }.service-card-copy p { font-size: 13px; }
  .service-card-copy .service-offer { font-size: 13px; margin-top:8px; }.service-card.service-card-compact { grid-template-columns:80px minmax(0,1fr); gap:14px; }.service-card-compact .service-card-copy h3 { font-size:18px; }
  .work-collection { margin-left:0; margin-right:0; padding:18px 13px; border-radius: 8px; }.work-collection .service-card.service-card-compact { grid-template-columns:67px minmax(0,1fr); gap:10px; }
  .service-rail .service-card { flex-basis:57%; }.overall-banner { border-radius: 8px; padding:21px; }.overall-banner p,.overall-banner > div > span { font-size: 13px; }
  .cast-avatar { width:62px; height:62px; }.cast-shortcuts span { font-size: 13px; }
  .fox-note { padding:13px 15px; gap:14px; border-radius: 8px; }.fox-note > .fox-mascot { width:90px; height:90px; }.fox-note strong { font-size:15px; }.fox-note p { font-size: 13px; }
  .fox-guide-link { border-radius: 8px; padding-right:13px; margin-top:28px; }.fox-guide-link .fox-note { padding-right:0; gap:10px; }.fox-guide-link .fox-mascot { width:85px; height:85px; }
  .store-page > .page-title { font-size:27px; margin-bottom:18px; }.catalog-intro { font-size:14px; margin-top:-8px; }
  .store-filters.concern-filters { top:65px; margin:8px -18px 7px; padding:10px 18px; gap:7px; }.store-filters .filter { min-height:44px; font-size:13px; padding:9px 15px; }
  .catalog-count { font-size: 13px; }.empty-state,.catalog-empty { padding:29px 20px; }
  .service-detail-cover { height:290px; border-radius: 8px; }.service-detail-image { object-position:center top; }.service-detail-cover-copy { left:22px; bottom:22px; }.service-detail-cover-copy strong { font-size:27px; }
  .service-detail-info { padding:23px 2px 0; }.service-detail-category { font-size: 13px; }.service-detail-info h1 { font-size:27px; }.service-detail-caption { font-size:14px; }
  .service-contents li { font-size:14px; }
  .service-start-dock { gap:14px; padding:13px 18px calc(13px + env(safe-area-inset-bottom)); box-shadow: none; }.service-start-dock span { font-size: 13px; }.service-start-dock .service-start { min-height:52px; border-radius: 8px; }
  .page.service-input-page { padding:8px 18px 115px; }.service-input-title { font-size:25px; margin:5px 0 18px; }
  .input-fox-note { padding:8px 12px; margin-bottom:16px; }.input-fox-note > .fox-mascot { width:72px; height:72px; }.input-fox-note strong { font-size:14px; }.input-fox-note p { font-size: 13px; }
  .service-input-subject { padding:12px; }.service-input-subject span { font-size: 13px; }
  .service-input-page .profile-form { margin-top:18px !important; }.profile-form fieldset { padding:16px 13px; margin:0 0 22px; border-radius: 8px; }
  .service-input-page fieldset[data-profile=me] > legend { position:static; width:auto; height:auto; margin:0; padding:0 7px; overflow:visible; clip:auto; clip-path:none; white-space:normal; }
  .field-grid { gap:17px 12px; }.profile-form .field > label,.profile-form .field-heading > label { font-size:13px; }
  .profile-form input:not([type=checkbox]):not([type=hidden]),.profile-form select { padding:10px; }
  .profile-form .field small { font-size: 13px; }.checkbox-label { font-size: 13px !important; }.field-heading .checkbox-label { padding:7px 8px; }
  .service-input-page .form-actions { padding:12px 18px calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -5px 22px #80553c09; }.service-input-page .form-actions .primary-button { min-height:52px; }
  .settings-card { padding:22px 18px; }.settings-card h2 { font-size:17px; }.settings-card p { font-size:13px; }.account-shortcuts { grid-template-columns:1fr; gap:10px; }.account-shortcuts a { min-height:75px; padding:15px 18px; }
  .feature-menu .secondary-button { font-size:13px; min-height:44px; }.library-item,.library-job { padding:13px; border-radius: 8px; }.library-copy p { font-size: 13px; }
  .reading-chapter { padding:22px 18px; }.reading-chapter p { font-size:15px; }.reading-chapter h2 { font-size:23px; }
  .characters-page { padding-top:22px; }.guardian-description,.guardian-quote { font-size:13px; }.guardian-card .guardian-portrait { border-radius: 8px; }
  .mobile-nav { min-height:68px; padding-top:7px; background:#fffcf8f7; backdrop-filter:blur(16px); border-top:1px solid #ebdcd1; box-shadow: none; }
  .mobile-nav a { min-height:53px; gap:4px; font-size: 13px; color:#968376; position:relative; border-radius: 8px; padding:5px 4px; }
  .mobile-nav a svg { width:23px; height:23px; position:relative; z-index:1; stroke-width:1.8; }.mobile-nav a[aria-current=page] { color:#a74d3b; font-weight:750; background:#fae9dd; }
  .site-footer { margin:60px 18px 0; padding-left:0; padding-right:0; padding-bottom:100px; }.footer-links { gap:18px; }
  body:has(.service-detail-page) .site-footer { padding-bottom:calc(12rem + env(safe-area-inset-bottom)); }
}
@media (max-width:360px) {
  .header-inner { padding:0 13px; }.page.store-page { padding-left:14px; padding-right:14px; }
  .fox-welcome { padding:20px 16px; min-height:239px; grid-template-columns:1fr 40%; }.fox-welcome-label { font-size: 13px; }.fox-welcome h1 { font-size:27px; }.fox-welcome-art { width:164px; height:164px; right:-30px; bottom:1px; }.fox-hello { right:-7px; font-size: 13px; }
  .fox-welcome-copy p { font-size: 13px; }.fox-welcome .primary-button { font-size: 13px; padding:10px; }.shortcut { font-size: 13px; }.service-shortcuts { gap:15px 8px; }.shortcut-icon { width:49px; height:49px; }
  .store-search input { font-size:13px; }.store-offer-line { font-size: 13px; }.spotlight { flex-basis:92%; grid-template-columns:minmax(0,1fr) 96px; }.spotlight-copy h3 { font-size:22px; }
  .service-card-copy { padding-left:10px; padding-right:10px; }.service-card-copy h3 { font-size:15px; }.service-guide { font-size: 13px; }.service-card-copy p { font-size: 13px; }
  .fox-note > .fox-mascot { width:74px; height:74px; }.fox-note strong { font-size:14px; }.fox-note { gap:10px; }.input-fox-note > .fox-mascot { width:64px; height:64px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .page,.fox-welcome-art,.initial-loading .fox-mascot { animation:none; }
  button,a,summary,.shortcut-icon,.service-card,.spotlight-art,.service-cover-image { transition:none; }
  .shortcut:hover .shortcut-icon,.service-card:hover,.service-card:hover .service-cover-image { transform:none; }
}
/* Category navigation uses familiar pictograms, with every field visible. */
.store-filters.fox-category-grid { position:static; display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:10px; overflow:visible; margin:22px 0 18px; padding:0 0 20px; border-bottom:1px solid var(--line); background:none; backdrop-filter:none; }
.fox-category-grid .filter { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px; min-height:82px; padding:4px 0; border:0; background:none; border-radius:0; font-size: 13px; color:#766255; white-space:nowrap; }
.fox-category-grid .filter.selected { background:none; border:0; color:#9f4534; font-weight:800; }
.category-symbol { display:grid; place-items:center; width:48px; height:48px; border-radius: 8px; background:#f4eae0; color:#997352; transition:background .18s,transform .18s; }
.category-symbol svg { width:24px; height:24px; stroke-width:1.8; }
.filter[data-category=love] .category-symbol { background:#ffe7e8; color:#a6586c; }.filter[data-category=work] .category-symbol { background:#e4eef9; color:#55799c; }.filter[data-category=study] .category-symbol { background:#eee7fb; color:#8570a8; }.filter[data-category=money] .category-symbol { background:#faefcd; color:#a28334; }.filter[data-category=family] .category-symbol,.filter[data-category=living] .category-symbol { background:#e5efdf; color:#65855a; }.filter[data-category=people] .category-symbol { background:#fce6d6; color:#a57351; }.filter[data-category=overall] .category-symbol { background:#e8e5f7; color:#7c73a2; }
.fox-category-grid .filter.selected .category-symbol { box-shadow: none; }
.fox-category-grid .filter:hover .category-symbol { transform:translateY(-2px); }
@media(max-width:600px) {
  .store-filters.fox-category-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px 6px; margin:21px 0 12px; padding:0 0 17px; }
  .fox-category-grid .filter { font-size: 13px; min-height:75px; gap:7px; padding:3px 0; }.category-symbol { width:43px; height:43px; border-radius: 8px; }.category-symbol svg { width:23px; height:23px; }
  .account-identity { gap:16px; margin:3px 0 23px; }.account-identity .fox-mascot { width:90px; height:90px; }
}
@media(prefers-reduced-motion:reduce) { .category-symbol { transition:none; }.fox-category-grid .filter:hover .category-symbol { transform:none; } }
@media print {
  .fox-welcome,.fox-note,.footer-fox { display:none; }.reading-chapter { border:0; padding:0; }.page { animation:none; }
}

/* 내 정보 정돈 (2026-10-28): one grouped list per topic, hairline rows, a quiet
 * log-out row and a single small line of policy links. */
.account-page .account-identity { gap:16px; margin:6px 0 22px; }
.account-page .account-identity .fox-mascot { width:76px; height:76px; }
.account-signed { margin:4px 0 0; color:var(--muted); font-size:13px; }
.account-page .account-shortcuts { display:flex; flex-direction:column; gap:22px; margin:0 0 26px; }
.account-group h2 { margin:0 0 8px 4px; color:#9a7b66; font-size: 13px; font-weight:700; letter-spacing:.02em; }
.account-list { overflow:hidden; border:1px solid #eadccb; border-radius: 8px; background:#fffdf9; }
.account-list > a, .account-list > .account-logout { display:flex; align-items:center; gap:13px; width:100%; min-height:54px; padding:0 18px; border:0; border-radius:0;
  background:none; color:#3e2a1f; font:inherit; font-size:15px; text-align:left; cursor:pointer; }
.account-list > * + * { border-top:1px solid #f0e5d8 !important; }
.account-list > a > svg:first-child { flex:none; width:20px; height:20px; color:#b0704e; }
.account-list > a > svg:last-child { flex:none; width:14px; height:14px; margin-left:auto; color:#c2a896; }
.account-list strong { font-weight:650; }
.account-list > a:active, .account-list > .account-logout:active { background:#f8efe4; }
.account-list > .account-logout { color:#9a6a52; font-size:14px; }
.account-management { display:flex; flex-wrap:wrap; gap:6px 14px; padding:0 4px; margin:0 0 10px; font-size: 13px; }
.account-management a { color:#9a8576; text-decoration:none; }
.account-management .account-delete-link { margin:0; font-size: 13px; color:#b0948a; text-decoration:none; }
.account-danger { margin-top:6px; padding:0; border:0; background:none; color:#b0503a; font:inherit; font-size:14px; font-weight:650; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }

/* 줄바꿈 균형 (2026-10-28): short texts break into even lines instead of a long
 * line and a one-word tail; longer copy avoids a lone last word. Words stay whole. */
.service-card-copy p, .cc-caption, .catalog-overall-copy p, .catalog-overall-copy h3, .overall-banner p, .overall-banner h2,
.webtoon-cover-title h3, .page-title, .page-intro, .sg-bubble, .fox-note, .empty-state p, .empty-state h2,
.service-detail-cover-copy strong, .spotlight-copy h2, .store-offer-line { text-wrap: balance; word-break: keep-all; }
p, li { text-wrap: pretty; }
.webtoon-cover-title h3 { word-break:keep-all; overflow-wrap:normal; }
.service-detail-caption, .world-heading-copy h2, .guest-library-note, .inline-error, .about-sources p { text-wrap: balance; word-break: keep-all; }