:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; font-size: 16px; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-height: 100vh; min-height: 100svh; margin: 0; color: #183a50; background: #8bb8d6 url('/assets/sky-poster.jpg') center / cover no-repeat; }
button, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid #26658e; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.scene, .scene-video, .scene-wash, .release-light { position: fixed; inset: 0; width: 100%; height: 100%; }
.scene { z-index: 0; overflow: hidden; background: #8bb8d6 url('/assets/sky-poster.jpg') center / cover no-repeat; }
.scene-video { object-fit: cover; object-position: center; }
.release-effect { opacity: 0; transition: opacity 1.25s ease; }
.scene-wash { background: linear-gradient(180deg, rgba(16, 70, 105, .15), rgba(53, 109, 143, .06) 47%, rgba(26, 69, 99, .16)); }
.release-light { opacity: 0; background: radial-gradient(circle at 60% 20%, rgba(255, 255, 255, .62), rgba(255, 255, 255, .14) 55%, transparent 75%); transition: opacity 1.1s ease; }
body.is-releasing .release-effect { opacity: 1; }
body.is-releasing .release-light { opacity: 1; }

.shell { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding: 0 clamp(1.25rem, 4vw, 4.5rem); }
.site-header, .site-footer { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; width: 100%; }
.site-header { position: relative; z-index: 10; min-height: 105px; }
.wordmark { color: #fff; text-decoration: none; font-size: 1.38rem; font-weight: 700; letter-spacing: -.045em; white-space: nowrap; text-shadow: 0 1px 14px rgba(18, 54, 81, .28); }
.wordmark span { color: #ffd0ac; }
.wordmark small { color: #e1edf4; font-size: .61em; letter-spacing: -.025em; }
.header-nav, .footer-links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.5rem); }
.site-header a:not(.wordmark), .site-footer a, .site-footer button { border: 0; background: none; padding: .55rem .1rem; color: #fff; font-size: .9rem; font-weight: 600; text-decoration: none; text-shadow: 0 1px 12px rgba(20, 62, 88, .4); cursor: pointer; }
.site-header a:hover, .site-footer a:hover, .site-footer button:hover { text-decoration: underline; text-underline-offset: 5px; }
.main-content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: .5rem 0 1.5rem; }
.confession-card { position: relative; z-index: 2; flex-shrink: 0; width: min(100%, 790px); margin-top: clamp(2rem, 6vh, 4rem); overflow: hidden; border-radius: 28px; background: rgba(255, 255, 255, .83); box-shadow: 0 24px 85px rgba(20, 61, 86, .19), 0 2px 12px rgba(20, 61, 86, .07); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.card-inner { padding: 2rem clamp(1.5rem, 6vw, 4.8rem) 1.75rem; transition: opacity .45s ease, transform .7s ease; }
.intro { width: 100%; text-align: center; }
.floating-monk { position: relative; z-index: 3; flex-shrink: 0; width: clamp(170px, 20vh, 210px); aspect-ratio: 2 / 3; margin: -.75rem 0 -1.75rem; filter: drop-shadow(0 16px 18px rgba(24, 65, 88, .18)); pointer-events: none; }
.monk-float { position: relative; width: 100%; height: 100%; animation: monk-drift 8s ease-in-out infinite; }
.monk-rest, .monk-sequence { position: absolute; inset: 0; width: 100%; height: 100%; }
.monk-rest { display: block; object-fit: contain; }
.monk-sequence { opacity: 0; background: url('/assets/monk-sequence.webp') 0 0 / 800% 400% no-repeat; }
.monk-float.is-animating .monk-rest { opacity: 0; }
.monk-sequence.is-active { opacity: 1; }
@keyframes monk-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(4px, -7px, 0); }
  55% { transform: translate3d(-4px, -3px, 0); }
  78% { transform: translate3d(2px, 5px, 0); }
}
h1, h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
h1 { margin: 0; color: #153d56; font-size: clamp(2.65rem, 5vw, 4rem); line-height: 1.12; letter-spacing: -.045em; }
.intro h1 { font-size: clamp(2rem, 3.1vw, 2.7rem); line-height: 1.13; }
.period { color: #bd6839; }
.intro .monk-eyebrow { margin: 0 0 .7rem; color: #5a321e; font-size: .68rem; font-weight: 700; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; }
textarea { display: block; width: 100%; height: 170px; padding: 1.3rem 1.45rem; border: 1px solid rgba(39, 91, 123, .12); border-radius: 16px; background: rgba(255, 255, 255, .61); color: #173e56; font-size: 1rem; line-height: 1.6; resize: vertical; box-shadow: inset 0 1px 4px rgba(29, 71, 94, .03); }
textarea::placeholder { color: #8c9daa; opacity: 1; }
.card-actions { display: flex; flex-direction: column; align-items: center; gap: .65rem; margin-top: 1.55rem; }
.release-button { position: relative; isolation: isolate; min-width: 196px; min-height: 53px; overflow: hidden; border: 0; border-radius: 999px; padding: .9rem 1.5rem; background: #a6532e; color: #fff; font-size: .91rem; font-weight: 600; letter-spacing: .005em; box-shadow: 0 9px 20px rgba(129, 65, 34, .22); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; transition: background .2s ease, transform .2s ease, opacity .2s ease; }
.release-button:hover:not(:disabled) { background: #824022; transform: translateY(-1px); }
.release-button:disabled { opacity: .44; cursor: default; box-shadow: none; }
.button-progress { position: absolute; z-index: -1; inset: 0 auto 0 0; width: 0%; background: #783d23; }
.release-button.is-holding .button-progress { width: 100%; transition: width 1.8s linear; }
.writing-privacy { max-width: 100%; margin: 1.1rem 0 0; color: #fff; font-size: .85rem; line-height: 1.65; text-align: center; text-wrap: balance; text-shadow: 0 1px 8px rgba(18, 54, 81, .65), 0 1px 2px rgba(18, 54, 81, .5); }
.writing-privacy span { font-size: .78rem; }
.writing-privacy .privacy-lead { font-size: inherit; }
.community-count { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem .65rem; margin: .7rem 0 0; color: #fff; font-size: .73rem; line-height: 1.5; text-align: center; text-shadow: 0 1px 8px rgba(18,54,81,.65), 0 1px 2px rgba(18,54,81,.5); }
.community-count[hidden] { display: none; }
.community-count span { white-space: nowrap; }
.released-view { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; padding: 2rem; opacity: 0; visibility: hidden; text-align: center; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease, visibility .8s ease; }
.released-mark { color: #bd6839; font-size: 2rem; }
.released-view h2 { margin: 0; color: #17425c; font-size: clamp(2.25rem, 5vw, 3.7rem); line-height: 1.2; }
body.is-releasing .card-inner { opacity: 0; transform: translateY(-12px); pointer-events: none; }
body.is-releasing .released-view { opacity: 1; visibility: visible; transform: none; }
.site-footer { min-height: 75px; }
.footer-links { flex-wrap: wrap; gap: 0 .85rem; color: #fff; }
.site-footer a, .site-footer button, .footer-links span { font-size: .81rem; }
.sound-toggle { display: inline-flex; flex-shrink: 0; align-items: center; gap: .45rem; }
.sound-icon { font-size: 1rem; }

.language-menu { position: relative; flex-shrink: 0; }
.language-menu > summary { display: flex; align-items: center; gap: .4rem; min-height: 44px; padding: .55rem .1rem; color: #fff; font-size: .9rem; font-weight: 600; list-style: none; cursor: pointer; text-shadow: 0 1px 12px rgba(20,62,88,.4); }
.language-menu > summary::-webkit-details-marker { display: none; }
.language-menu > summary:focus-visible { outline: 3px solid #26658e; outline-offset: 4px; border-radius: 4px; }
.language-chevron { font-size: .85rem; }
.language-menu[open] .language-chevron { transform: rotate(180deg); }
.language-options { position: absolute; top: calc(100% + .3rem); right: 0; display: grid; width: min(230px, calc(100vw - 2rem)); max-height: min(65svh, 30rem); overflow-y: auto; overscroll-behavior: contain; padding: .4rem; border: 1px solid rgba(255,255,255,.8); border-radius: 14px; background: #f7fbfd; box-shadow: 0 12px 35px rgba(15,49,73,.2); }
.site-header .language-options a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: .65rem .8rem; border-radius: 9px; color: #254b63; font-size: .88rem; text-shadow: none; }
.site-header .language-options a:hover, .site-header .language-options a[aria-current] { background: #e5eef3; text-decoration: none; }
.language-check[hidden] { display: none; }
:lang(ko) { font-family: Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; word-break: keep-all; overflow-wrap: break-word; }
:lang(ja) { font-family: Arial, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif; line-break: strict; overflow-wrap: break-word; }
html:lang(ko) h1, html:lang(ko) h2 { font-family: 'AppleMyungjo', 'Batang', Georgia, serif; letter-spacing: -.025em; line-height: 1.35; }
html:lang(ja) h1, html:lang(ja) h2 { font-family: 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, serif; letter-spacing: 0; line-height: 1.4; }
html:lang(ko) .monk-eyebrow, html:lang(ja) .monk-eyebrow { letter-spacing: .06em; }
html:lang(ko) .guide-body, html:lang(ja) .guide-body { max-width: 100%; }
:lang(zh-Hans) { font-family: Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif; line-break: strict; overflow-wrap: break-word; }
:lang(zh-Hant) { font-family: Arial, 'PingFang TC', 'Microsoft JhengHei', sans-serif; line-break: strict; overflow-wrap: break-word; }
html:lang(zh-Hans) h1, html:lang(zh-Hans) h2 { font-family: 'Songti SC', SimSun, Georgia, serif; letter-spacing: 0; line-height: 1.4; }
html:lang(zh-Hant) h1, html:lang(zh-Hant) h2 { font-family: 'Songti TC', 'PMingLiU', Georgia, serif; letter-spacing: 0; line-height: 1.4; }
html:lang(zh) .monk-eyebrow { letter-spacing: .06em; }
html:lang(zh) .guide-body { max-width: 100%; }

.content-main { display: flex; justify-content: center; flex: 1; padding: clamp(1.5rem, 5vh, 3.5rem) 0 5rem; }
.content-card { width: min(100%, 790px); height: fit-content; padding: clamp(2rem, 5vw, 4.5rem); border-radius: 28px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: 0 24px 85px rgba(20,61,86,.19), 0 2px 12px rgba(20,61,86,.07); }
.content-card h1 { font-size: clamp(2.5rem, 5vw, 3.8rem); margin: 0 0 1.4rem; }
.content-card h2 { font-size: 1.75rem; letter-spacing: -.025em; line-height: 1.25; margin: 2.4rem 0 .75rem; color: #194762; }
.content-card p, .content-card li { color: #456476; font-size: 1rem; line-height: 1.72; }
.content-card p { margin: 0 0 1rem; }
.content-card p:last-child { margin-bottom: 0; }
.content-card ul { padding-left: 1.4rem; margin: .25rem 0 1.3rem; }
.content-card a { color: #235b7c; text-underline-offset: 3px; }
.content-card .lead { font-size: 1.12rem; color: #36596e; line-height: 1.65; margin-bottom: 1.6rem; }
.content-card .small { color: #6a8392; font-size: .9rem; }
.content-card .note { border-left: 3px solid #8ab9d1; padding: .7rem 0 .7rem 1.1rem; margin: 1.5rem 0; color: #486779; }
.content-card .back-link { display: inline-block; margin-top: 2rem; font-weight: 600; text-decoration: none; }
.content-card .back-link:hover { text-decoration: underline; }
.legal-fields { margin: 1.25rem 0; padding: 1.25rem 1.4rem; border-radius: 12px; background: rgba(226,239,246,.7); font-style: normal; overflow-wrap: anywhere; }
.legal-fields p { margin: 0; }
.legal-fields p + p { margin-top: .7rem; }
.site-footer.simple-footer { gap: 1rem; }

.legal-backdrop { position: fixed; z-index: 1; inset: 0; cursor: pointer; }
.legal-page .shell { z-index: 2; pointer-events: none; }
.legal-page .site-header, .legal-page .site-footer, .legal-page .content-card { pointer-events: auto; }
.legal-actions { display: flex; justify-content: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(39,91,123,.12); }
.content-card .legal-return { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; max-width: 100%; min-height: 48px; padding: .9rem 1.35rem; border-radius: 999px; background: #a6532e; color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; }
.content-card .legal-return > span:first-child { flex-shrink: 0; }
.content-card .legal-return:hover { background: #824022; }

body.is-about-open { overflow: hidden; }
.about-dialog { width: min(620px, calc(100% - 2rem)); max-height: calc(100svh - 3rem); padding: 0; overflow: auto; border: 1px solid rgba(255,255,255,.65); border-radius: 26px; background: rgba(247,251,253,.98); color: #183a50; box-shadow: 0 26px 100px rgba(15,49,73,.3); }
.about-dialog::backdrop { background: rgba(15,48,69,.35); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.about-dialog-inner { position: relative; padding: 2.75rem clamp(1.5rem, 5vw, 3rem) 2.5rem; }
.dialog-close-form { position: absolute; top: .65rem; right: .75rem; margin: 0; }
.dialog-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #456476; font-size: 1.75rem; cursor: pointer; }
.dialog-close:hover { background: #e4edf2; }
.about-dialog .monk-eyebrow { margin: 0 0 .6rem; color: #a6532e; font-size: .62rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.about-dialog .dialog-title { margin: 0 0 1.25rem; font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.13; letter-spacing: -.04em; }
.about-dialog h2:not(.dialog-title) { margin: 1.4rem 0 .5rem; font-size: 1.5rem; letter-spacing: -.025em; }
.about-dialog p { margin: 0 0 .9rem; color: #456476; font-size: .95rem; line-height: 1.65; }
.about-dialog .lead { color: #254b63; font-size: 1.05rem; }
.dialog-privacy-link { display: inline-block; margin-top: .5rem; color: #235b7c; font-size: .85rem; text-underline-offset: 3px; }
.dialog-guide a { color: #235b7c; font-size: .88rem; text-underline-offset: 3px; }

.guide-card { width: min(100%, 860px); }
.guide-body { max-width: 68ch; margin-inline: auto; }
.guide-card .guide-eyebrow { margin-bottom: .75rem; color: #a6532e; font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.guide-card h1 { margin-bottom: 1.25rem; font-size: clamp(2.05rem, 4.7vw, 3rem); line-height: 1.14; text-wrap: balance; }
.guide-jumps { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(39,91,123,.12); }
.guide-jumps a { font-size: .85rem; text-decoration: none; }
.guide-jumps a:hover { text-decoration: underline; }
.guide-card h2 { margin-top: 2.75rem; font-size: clamp(1.55rem, 3.2vw, 1.85rem); }
.guide-card p, .guide-card li { line-height: 1.8; overflow-wrap: break-word; }
.guide-card ol { padding-left: 1.4rem; margin: 1.25rem 0 1.5rem; }
.guide-steps li { padding-left: .35rem; margin-bottom: 1rem; }
.guide-steps li::marker { color: #a6532e; font-weight: 700; }
.guide-faq { border-bottom: 1px solid rgba(39,91,123,.13); }
.guide-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; color: #194762; list-style: none; cursor: pointer; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: '+'; flex-shrink: 0; color: #a6532e; font-size: 1.5rem; font-weight: 400; line-height: 1; }
.guide-faq[open] summary::after { content: '−'; }
.guide-faq h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.guide-faq summary:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.guide-faq summary:focus-visible { outline: 3px solid #26658e; outline-offset: 3px; border-radius: 4px; }
.guide-answer { padding: 0 0 .75rem; }
.guide-card .guide-cta { display: inline-block; margin-top: .75rem; padding: .95rem 1.35rem; border-radius: 999px; background: #a6532e; color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; }
.guide-card .guide-cta:hover { background: #824022; }
.guide-page .site-footer { flex-wrap: wrap; padding-bottom: .75rem; }

@media (max-width: 600px) {
  .shell { padding: 0 1rem; }
  .site-header { min-height: 92px; align-items: flex-start; align-content: center; flex-wrap: wrap; column-gap: 1rem; row-gap: 0; padding: 1rem 0 .5rem; }
  .wordmark { font-size: 1.24rem; width: 100%; }
  .header-nav { width: 100%; justify-content: space-between; gap: .7rem; }
  .language-menu > summary { font-size: .77rem; }
  .site-header a:not(.wordmark) { font-size: .77rem; padding-top: .35rem; }
  .main-content { padding: .5rem 0 1.25rem; }
  .intro h1 { font-size: clamp(1.9rem, 7.5vw, 2.4rem); }
  .intro .monk-eyebrow { margin-bottom: .55rem; font-size: .6rem; }
  .floating-monk { width: clamp(140px, 18svh, 160px); margin: -.75rem 0 -1.5rem; }
  .confession-card { margin-top: 1.5rem; border-radius: 22px; }
  .card-inner { padding: 1.25rem; }
  textarea { height: clamp(145px, 21svh, 185px); padding: 1rem; }
  .card-actions { margin-top: 1rem; }
  .writing-privacy { margin-top: .9rem; font-size: .76rem; }
  .writing-privacy span { font-size: .72rem; }
  .community-count { gap: .15rem .5rem; max-width: 100%; font-size: .68rem; }
  .about-dialog { border-radius: 22px; }
  .about-dialog-inner { padding-top: 2.5rem; }
  .site-footer { min-height: 65px; }
  .content-main { padding: 1.4rem 0 2.5rem; }
  .content-card { border-radius: 22px; padding: 2rem 1.35rem; }
  .content-card h2 { margin-top: 2rem; }
  .guide-card { padding: 2rem 1.25rem; }
  .guide-card h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .guide-card .guide-cta { border-radius: 18px; }
}
@media (max-width: 375px) {
  .header-nav a:last-child { line-height: 1.2; }
  .card-inner { padding-inline: 1rem; }
}
@media (max-width: 600px) and (max-height: 740px) {
  .main-content { padding: .25rem 0 .75rem; }
  .intro h1 { font-size: 1.85rem; }
  .floating-monk { width: 130px; }
  .card-inner { padding-block: 1rem; }
  textarea { height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .background-loop, .release-effect { display: none; }
  .monk-float { animation: none !important; }
}