/* A quiet reading room for My AI Friend, Ittip. */
:root {
  --paper: #faf7f2;
  --ink: #443d3a;
  --muted: #756d69;
  --lavender: #83718c;
  --line: #e5ded6;
}
html, body { scroll-snap-type: none; }
html { scroll-padding-top: 100px; scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
* { cursor: auto; }
a, button, [role="button"], [onclick], [onclick] * { cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--lavender); outline-offset: 6px; }
::selection { background: #e6dce9; color: #443d3a; }
#cursor-dot, #cursor-outline { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100000; background: white; padding: 14px 24px; border-radius: 12px; }
.skip-link:focus { top: 16px; }
.site-header { position: absolute; top: 0; left: 0; right: 0; height: 96px; padding: 0 max(5.5vw, 24px); display: flex; align-items: center; gap: 36px; z-index: 100; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 10px; align-items: center; color: var(--ink); }
.brand svg { width: 24px; height: 24px; stroke: var(--lavender); stroke-width: 1.3; }
.brand-name { font: 600 22px 'Noto Serif KR', serif; letter-spacing: -.04em; }
.brand-note { font-size: 9px; letter-spacing: .22em; color: var(--muted); display: block; margin-top: 2px; }
.header-links { display: flex; gap: 30px; margin-left: auto; margin-right: 205px; font-size: 13px; color: var(--muted); }
.header-links a { transition: color .2s; }
.header-links a:hover { color: var(--lavender); }
.lang-switcher { position: absolute; top: 29px; right: max(5.5vw, 24px); background: transparent !important; border: 1px solid var(--line) !important; box-shadow: none; padding: 3px; gap: 1px; backdrop-filter: none; }
.lang-btn, .dark-theme .lang-btn { color: var(--muted); font-size: 10px; font-weight: 500; padding: 7px 9px; }
.lang-btn.active-lang, .dark-theme .lang-btn.active-lang { background: #eae3ed; color: #62506f; box-shadow: none; }
.dot-nav { right: 18px; gap: 17px; }
.dot, .dark-theme .dot { width: 5px; height: 5px; background: #c9bfb9; }
.dot::before { content: ''; position: absolute; inset: -8px; }
.dot.active, .dark-theme .dot.active { background: var(--lavender); transform: scale(1.4); }
.section-snap { min-height: auto; padding: 112px 5.5vw; overflow: hidden; }
h1.serif, h2.serif, h3.serif { font-weight: 400; letter-spacing: -.055em; }
main p { line-height: 1.95; }
.text-gradient-soft { background: none; -webkit-text-fill-color: currentColor; color: var(--lavender); }
[class*="text-[#8B5CF6]"], [class*="text-[#4C1D95]"], [class*="text-[#a855f7]"], [class*="text-[#d8b4fe]"] { color: var(--lavender); }
.text-gray-400, .text-gray-500 { color: var(--muted); }
.animate-bounce, .animate-pulse, .animate-gentle { animation: none; }
[data-aos] { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s ease; }
html.motion-ready [data-aos]:not(.aos-animate) { opacity: 0; transform: translateY(16px); }
[data-aos-delay] { transition-delay: 0s; }
.eyebrow { display: block; font-size: 10px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--lavender); margin-bottom: 28px; }
#section1 { min-height: 860px; min-height: min(940px, 100svh); padding-top: 176px; padding-bottom: 115px; background: var(--paper); }
#section1 > .absolute.inset-0 { display: none; }
#section1 > .z-10 { max-width: 1180px; padding: 0; gap: 100px; }
#section1 h1 { font-size: clamp(38px, 4.25vw, 63px); line-height: 1.48; margin-bottom: 25px; font-weight: 400; }
#section1 h1 .mt-2 { margin-top: 0; }
#section1 .hero-copy > span { border: 0; padding: 0; background: none; box-shadow: none; font-family: inherit; letter-spacing: .18em; font-size: 11px; font-weight: 400; margin-bottom: 25px; color: var(--lavender); }
#section1 .hero-copy > p:not(.handwriting) { font-size: 15px; line-height: 2; max-width: 390px; }
#section1 .handwriting { font-size: 24px; transform: none; margin-top: 29px; color: #8c7d81; opacity: 1; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; margin-top: 34px; }
.button-primary { display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 15px 25px; background: #817087; color: #fff; border: 1px solid #817087; border-radius: 6px; font-size: 13px; transition: background .25s, transform .25s; }
.button-primary:hover { background: #6e5d75; transform: translateY(-2px); }
.button-primary svg { width: 16px; height: 16px; stroke-width: 1.3; }
.text-link { color: #6f646b; font-size: 12px; padding: 8px 0; border-bottom: 1px solid #beb0b9; }
#section1 .hero-art { position: relative; display: block; flex: 0 0 42%; width: 42%; max-width: 400px; padding: 45px 53px 30px; }
.hero-art::before { content: ''; position: absolute; inset: -18px -22px -12px; background: #eee7e2; border-radius: 48% 48% 6px 6px; }
.hero-art::after { content: 'MY AI FRIEND, ITTIP'; position: absolute; bottom: -28px; left: 0; right: 0; text-align: center; font: 9px 'Noto Sans KR', sans-serif; letter-spacing: .28em; color: #9b8e88; }
#section1 .hero-art > .relative { position: relative; width: 100%; }
.hero-book {
  --book-depth: 28px;
  --book-half-depth: 14px;
  transform: rotateY(12deg) rotateZ(-3deg);
}
/* All faces meet at the same front/back planes and turn as one solid book. */
.hero-book > * { backface-visibility: hidden; }
.hero-book .front { transform: translateZ(var(--book-half-depth)); }
.hero-book .back { transform: rotateY(180deg) translateZ(var(--book-half-depth)); }
.hero-book .spine {
  width: var(--book-depth);
  left: calc(0px - var(--book-half-depth));
  transform-origin: center;
  transform: rotateY(-90deg);
}
.hero-book .pages {
  width: var(--book-depth);
  right: calc(0px - var(--book-half-depth));
  transform-origin: center;
  transform: rotateY(90deg);
}
.hero-book .pages-top {
  width: 98%;
  height: var(--book-depth);
  left: 1%;
  top: calc(0px - var(--book-half-depth));
  transform-origin: center;
  transform: rotateX(90deg);
}
.hero-book-trigger:is(:hover, :focus-visible) .hero-book { transform: rotateY(24deg) rotateZ(-3deg) translateY(-4px); }
.face { box-shadow: inset 3px 0 7px #00000015, 12px 23px 38px #4d3b4226; }
.hero-art .glass-light { top: auto; bottom: -12px; right: -33px; padding: 10px 16px; border-radius: 4px; box-shadow: 0 5px 20px #4d3b4210; font-size: 10px; background: #fffaf5; border-color: #e8ded5; }
.hero-art .glass-light span { font-size: 9px; font-weight: 400; letter-spacing: .05em; }
#section1 > .absolute.bottom-10 { bottom: 27px; color: #968b82; opacity: 1; }
#section1 > .absolute.bottom-10::before { content: 'SCROLL TO READ'; font-size: 8px; letter-spacing: .2em; margin-bottom: 10px; }
#section1 > .absolute.bottom-10 svg { width: 14px; height: 14px; }
.chapter-note { display: flex; justify-content: space-between; padding: 24px max(5.5vw, 24px); border-block: 1px solid var(--line); font-size: 10px; letter-spacing: .08em; color: #8c817c; }
#section2 { background: #f1ede7; padding-block: 120px; }
#section2 > div { max-width: 1100px; padding: 0; gap: 90px; }
#section2 h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.7; }
#section2 .space-y-8 { padding-left: 45px; border-color: #dbd3cb; }
#section2 .space-y-8 p:first-child { font-size: 17px; }
#section2 .space-y-8 p:last-child { font-size: 14px; }
#section3 { background: var(--paper); }
#section3 h2 { font-size: clamp(30px, 3vw, 42px); }
#section3 .text-center > p { font-size: 13px; margin-top: 18px; }
#section3 .space-y-12 { max-width: 740px; margin: 0 auto; }
#section3 .space-y-12 > .absolute { display: none; }
#section3 .space-y-12 > .flex { width: 76%; }
#section3 .space-y-12 > .flex > div { padding: 28px 32px; box-shadow: none; margin-inline: 0; border: 0; background: #eee9e3; border-radius: 20px 20px 5px 20px; }
#section3 .space-y-12 > .flex:last-child > div { background: #ece6ef; border-radius: 20px 20px 20px 5px; }
#section3 .space-y-12 p { font-size: 16px; }
#section3 .space-y-12 .text-xs { font-size: 9px; font-weight: 400; letter-spacing: .12em; }
#section4 { background: #ece6ed; padding-block: 110px; }
#section4 > svg { width: 70px; height: 70px; color: #c9bdcf; top: 40px; }
#section4 .serif { font-size: clamp(20px, 2.3vw, 31px); line-height: 2.05; }
#section4 .serif .font-bold { font-weight: 500; }
#section4 .serif .italic { font-style: normal; border-color: #b4a2ba; }
#section4 p:last-child { font-size: 9px; letter-spacing: .18em; font-weight: 400; }
#section5 { background: var(--paper); }
.book-pages { padding: 110px max(5.5vw, 24px); background: var(--paper); display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; max-width: 1240px; margin-inline: auto; }
.pages-intro h2 { font-size: clamp(25px, 2.5vw, 34px); font-weight: 400; line-height: 1.6; letter-spacing: -.05em; margin-bottom: 22px; }
.pages-intro p { font-size: 13px; line-height: 2; color: var(--muted); }
.chapter-list details { border-top: 1px solid var(--line); }
.chapter-list details:last-child { border-bottom: 1px solid var(--line); }
.chapter-list summary { display: flex; align-items: center; gap: 18px; padding: 25px 0; font-size: 14px; list-style: none; cursor: pointer; }
.chapter-list summary::-webkit-details-marker { display: none; }
.chapter-number { font: 12px 'Noto Serif KR', serif; color: #a293a2; }
.chapter-toggle { margin-left: auto; color: var(--lavender); font-size: 20px; font-weight: 300; }
details[open] .chapter-toggle { transform: rotate(45deg); }
.chapter-body { padding: 0 0 27px 34px; }
.chapter-body p { font-size: 13px; color: var(--muted); line-height: 2; }
.chapter-body blockquote { font: 400 16px/1.8 'Noto Serif KR', serif; color: var(--lavender); margin-block: 18px; }
.chapter-body small { display: block; font-size: 9px; letter-spacing: .13em; color: #9a8c86; margin-top: 15px; }
#section5 > div { max-width: 1040px; padding: 0; }
#section5 > div > div { background: #fffdf9; border: 1px solid var(--line); box-shadow: none; border-radius: 8px; padding: 56px; }
#section5 .absolute { background: #e9e1eb; color: #796581; border-radius: 4px; box-shadow: none; font-weight: 400; letter-spacing: .1em; }
#section5 h3 { font-size: clamp(23px, 2.4vw, 32px); line-height: 1.7; }
#section5 .space-y-6 { font-size: 14px; color: #756d69; }
#section5 .mt-10 { border-top: 1px solid var(--line); padding-top: 25px; }
#section6 { background: #f0ece6; }
#section6 > .absolute { display: none; }
#section6 > .z-10 { padding: 0; max-width: 1100px; }
#section6 h2, #section7 h2 { color: var(--ink); font-size: clamp(30px, 3vw, 42px); }
#section6 .text-center > span { color: var(--lavender); font-size: 9px; font-weight: 400; letter-spacing: .25em; margin-bottom: 20px; }
#section6 .grid { gap: 48px; padding-inline: 12px; margin-bottom: 0; }
#section6 .grid > .group { max-width: 190px; padding-bottom: 55px; }
#section6 .grid > .group > .aspect-\[2\/3\] { padding: 0; background: transparent; box-shadow: 6px 14px 22px #4b3d3926; border-radius: 2px 5px 5px 2px; transition: transform .4s ease, box-shadow .4s ease; }
#section6 .grid > .group:hover > .aspect-\[2\/3\] { transform: translateY(-6px) rotate(-1deg); box-shadow: 8px 20px 28px #4b3d3929; }
#section6 .grid .bg-right { border: 0; }
#section6 .grid .top-0.right-0 { background: #f9f3ea; color: #716558; box-shadow: none; font-size: 8px; font-weight: 400; padding: 6px 10px; border-radius: 0 0 0 4px; }
#section6 .grid .inset-0 { background: #44374425; backdrop-filter: none; }
#section6 .grid > .group:focus-visible [class~="group-hover:opacity-100"] { opacity: 1; }
#section6 .grid .-bottom-8, #section6 > .z-10 > .h-8 { display: none; }
.edition-caption { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; color: var(--ink); font-size: 12px; }
.edition-caption small { font-size: 9px; color: #857a72; display: block; margin-top: 3px; }
.edition-caption svg { width: 15px; height: 15px; stroke-width: 1.2; color: var(--lavender); }
#section7 { background: var(--paper); }
#section7 h2 { margin-bottom: 40px; }
#section7 .glass-dark { background: #e6ded6; padding: 7px; border: 0; border-radius: 10px; box-shadow: 0 15px 45px #50403712; }
#section7 iframe { border-radius: 5px; }
#section8 { background: #eae2e8; padding-bottom: 35px; }
#section8 > .absolute, #section8 .group > .absolute { display: none; }
#section8 h2 { font-size: clamp(30px, 3.5vw, 48px); color: var(--ink); line-height: 1.7; }
#section8 > div > svg { width: 35px; height: 35px; stroke-width: 1; margin-bottom: 25px; color: #8b7890; }
#section8 .mt-12 { margin-top: 15px; }
#section8 a { background: #817087; border: 1px solid #817087; border-radius: 6px; padding: 17px 30px; font-size: 13px; font-weight: 400; letter-spacing: .03em; box-shadow: none; }
#section8 .mt-24 { border-color: #d7cdd5; margin-top: 90px; padding-top: 26px; color: #786a76; font-size: 10px; }
#section8 .mt-24 p:last-child { color: #8f7b94; font-size: 10px; letter-spacing: .12em; }
#modal-box { border-radius: 16px; background: var(--paper); padding: 48px; max-height: 88svh; overflow-y: auto; box-shadow: 0 30px 90px #33273633; }
#modal-box h3 { font-size: 30px; line-height: 1.6; }
#modal-box p { line-height: 1.9; }
#modal-box .scene:hover .modal-book { transform: rotateY(-180deg); }
#modal-box .offline-widget { background: #f0eaf1; border-color: #e1d5e3; }
#modal-box .offline-widget:is(:lang(ko), :lang(ja)) > .flex-1 { width: 100%; min-width: 0; text-align: left; align-items: flex-start; }
#modal-box .offline-widget:is(:lang(ko), :lang(ja)) h4 { width: 100%; justify-content: flex-start; align-items: flex-start; text-align: left; text-wrap: wrap; }
#modal-box .offline-widget:is(:lang(ko), :lang(ja)) h4 > span { min-width: 0; flex: 1; }
.bookshop-title-phrase { display: inline-block; white-space: nowrap; }
#modal-box .offline-widget:lang(ko) p { word-break: keep-all; overflow-wrap: break-word; }
#modal-box .offline-widget:lang(ja) { line-break: strict; }
#modal-box .offline-widget:is(:lang(ko), :lang(ja)) h4 > svg { flex-shrink: 0; margin-top: .25em; }
#modal-box .offline-widget:is(:lang(ko), :lang(ja)) button { align-self: flex-start; }
#modal-box button:not([onclick="closeModal()"]), #modal-box a[style] { background: #817087 !important; box-shadow: none; }
#modal-box .shadow-xl { box-shadow: none; }
#modal-box [class*="bg-purple-50"] { background: #f0eaf1; border-color: #ded2e1; color: #736078; }
#book-modal[aria-hidden="true"] { visibility: hidden; }
@media (min-width: 1600px) { #section1 { min-height: 900px; } }
@media (max-width: 1000px) {
  .header-links { gap: 18px; }
  #section1 > .z-10 { gap: 45px; }
  #section1 .hero-art { padding: 35px 35px 20px; }
  #section1 h1 { font-size: 40px; }
  #section2 > div { gap: 40px; }
  #section6 .grid { gap: 30px; }
}
@media (max-width: 767px) {
  .site-header { height: 80px; padding-inline: 24px; }
  .brand-name { font-size: 20px; }
  .brand-note { display: none; }
  .header-links { display: none; }
  .lang-switcher { top: 24px; right: 20px; }
  .lang-btn { padding: 6px 8px; }
  .dot-nav { display: none; }
  .section-snap { padding: 78px 24px; }
  #section1 { min-height: auto; padding: 130px 28px 80px; }
  #section1 > .z-10 { flex-direction: column; gap: 65px; }
  #section1 .hero-copy { text-align: center; }
  #section1 h1 { font-size: clamp(30px, 7.6vw, 48px); line-height: 1.5; }
  #section1 h1 br { display: initial; }
  #section1 .hero-copy > span { font-size: 9px; margin-bottom: 21px; }
  #section1 .hero-copy > p:not(.handwriting) { font-size: 13px; max-width: 320px; }
  #section1 .handwriting { display: block; margin-top: 24px; font-size: 22px; }
  .hero-actions { justify-content: center; gap: 20px; margin-top: 27px; }
  .button-primary { padding: 13px 20px; font-size: 12px; }
  #section1 .hero-art { flex: auto; width: 230px; max-width: 70%; padding: 25px 30px 18px; }
  .hero-art::before { inset: -12px -12px -10px; }
  .hero-art::after { bottom: -31px; font-size: 8px; }
  #section1 > .absolute.bottom-10 { display: none; }
  .chapter-note { font-size: 8px; padding: 19px 24px; gap: 20px; }
  #section2 { padding-block: 75px; }
  #section2 > div { flex-direction: column; gap: 35px; }
  #section2 h2 { font-size: 30px; }
  #section2 h2 br, #section8 h2 br { display: initial; }
  #section2 .space-y-8 { padding-left: 0; border: 0; text-align: center; max-width: 440px; }
  #section2 .space-y-8 p:first-child { font-size: 15px; }
  #section2 .space-y-8 p:last-child { font-size: 13px; }
  #section3 > div, #section4 > div, #section7 > div, #section8 > div { padding-inline: 0; }
  #section3 .space-y-12 > .flex { width: 91%; }
  #section3 .space-y-12 > .flex > div { padding: 23px; }
  #section3 .space-y-12 p { font-size: 14px; }
  #section4 { padding-block: 80px; }
  #section4 .serif { font-size: 20px; }
  #section4 .serif br { display: none; }
  #section5 > div > div { padding: 35px 25px; }
  .book-pages { grid-template-columns: 1fr; padding: 75px 24px; gap: 36px; }
  #section5 .space-y-6 { font-size: 13px; }
  #section6 .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 24px; padding-inline: 4px; }
  #section6 .grid > .group { max-width: 170px; }
  #section6 .text-center { margin-bottom: 40px; }
  .edition-caption { font-size: 11px; }
  #section8 .mt-24 { margin-top: 65px; }
  #modal-box { padding: 48px 24px 30px; width: calc(100% - 28px); }
  #modal-box .scene { width: 125px; }
  #modal-box h3 { font-size: 26px; }
  #modal-box a { min-width: 0; font-size: 12px; padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.motion-ready [data-aos]:not(.aos-animate) { opacity: 1; transform: none; }
  .hero-book, .hero-book-trigger:is(:hover, :focus-visible) .hero-book { transform: rotateY(12deg) rotateZ(-3deg); }
  .scene:hover .modal-book { transform: none; }
}