/* Main page: the notebook is drawn in SVG, not a flattened screenshot of the site. */
:root { color-scheme:light; --paper:#f3efe5; --ink:#272621; --red:#ad3624; --muted:#69665e; --line:#c9c3b5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Pretendard,"Noto Sans KR","Malgun Gothic",sans-serif; -webkit-font-smoothing:antialiased; }
::selection { background:#ecc4ad; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--red); outline-offset:6px; }
p { margin:0; line-height:1.85; word-break:keep-all; overflow-wrap:anywhere; }
h1,h2,h3 { margin:0; word-break:keep-all; }
.wrap { width:min(1240px,calc(100% - 96px)); margin-inline:auto; }
.skip { position:absolute; top:-80px; left:20px; background:var(--red); color:white; padding:12px; z-index:10; }
.skip:focus { top:12px; }
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:96px; border-bottom:1px solid var(--ink); gap:24px; }
.brand { display:flex; align-items:baseline; gap:18px; font-size:32px; font-weight:900; letter-spacing:-.065em; }
.brand-mark { display:block; width:32px; height:32px; flex-shrink:0; align-self:center; object-fit:contain; }
.brand small { font-size:10px; font-weight:500; letter-spacing:.12em; }
nav { display:flex; gap:30px; font-size:13px; }
nav a:hover { color:var(--red); }
.hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:20px; padding:70px 0 60px; }
.eyebrow { color:var(--red); font-size:11px; font-weight:700; letter-spacing:.12em; margin-bottom:24px; }
h1 { font-size:clamp(42px,4.9vw,70px); font-weight:850; line-height:1.2; letter-spacing:-.065em; }
h1 em { color:var(--red); font-style:normal; position:relative; }
.intro { margin-top:28px; color:var(--muted); font-size:15px; line-height:1.9; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:26px; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:36px; background:var(--red); color:#fffdf7; padding:15px 22px; font-size:14px; font-weight:700; }
.button:hover { background:#a73220; }
.text-link { font-size:13px; border-bottom:1px solid var(--ink); padding-bottom:4px; }
.visual { position:relative; aspect-ratio:1; }
.artwork { position:relative; min-width:0; }
.notebook-art { display:block; width:100%; height:100%; overflow:visible; }
.visual .notebook-art { transition:transform .45s ease; transform-origin:50% 65%; }
.visual { cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.visual[data-dragging="true"] { cursor:grabbing; }
.visual.is-springing .notebook-art,.visual[data-dragging="true"] .notebook-art { transition:none; }
.visual.is-drawing .notebook-art { transform:translateY(-5px) rotate(-1deg); }
.visual-note { position:absolute; right:2%; bottom:1%; font-size:12px; color:var(--muted); transform:rotate(-5deg); border-bottom:1px solid var(--red); padding-bottom:8px; }
.ribbon { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:21px 0; border-block:1px solid var(--ink); font-size:13px; }
.ribbon strong { color:var(--red); font-weight:500; }
.ribbon-items { display:flex; gap:18px; font-family:inherit; font-size:10px; letter-spacing:.04em; }
.content { padding:85px 0; border-bottom:1px solid var(--line); }
.about { display:grid; grid-template-columns:1fr 1.35fr; gap:80px; }
h2 { font-size:clamp(30px,3.1vw,43px); line-height:1.28; letter-spacing:-.05em; }
.about-lead { margin-top:26px; font-size:18px; line-height:1.8; }
.about-main>p { margin-bottom:22px; color:var(--muted); font-size:15px; }
.about-main strong { color:var(--ink); font-weight:600; }
.ai-note { margin-top:34px; padding:30px; background:#e9e2d3; border-left:3px solid var(--red); transform:rotate(-.5deg); }
.ai-note .eyebrow { font-size:9px; margin-bottom:12px; }
.ai-note h3 { font-size:20px; margin-bottom:16px; }
.ai-story { display:grid; gap:12px; font-size:13px; color:#57534a; }
.note-caption { font-size:10px; color:var(--muted); margin-top:18px; }
.section-head { display:flex; justify-content:space-between; gap:32px; align-items:end; margin-bottom:32px; }
.section-head>p { color:var(--muted); font-size:13px; }
.interests { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:32px; }
.card { padding-top:22px; border-top:2px solid var(--ink); }
.card:nth-child(2) { border-color:var(--red); }
.card:nth-child(3) { border-color:#426786; }
.card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; color:var(--red); font-family:inherit; font-size:11px; }
.card-top svg { width:28px; height:28px; }
.card h3 { font-size:22px; letter-spacing:-.04em; margin-bottom:14px; }
.card p { color:var(--muted); font-size:13px; }
.tag { display:block; margin-top:24px; font-size:10px; color:var(--muted); }
.closing { display:flex; justify-content:space-between; align-items:center; gap:32px; padding:55px 0; }
.closing h2 { font-size:32px; }
.closing p { color:var(--muted); font-size:13px; margin-top:16px; }
.closing a { display:inline-flex; gap:32px; background:var(--red); color:#fffdf7; padding:18px 24px; font-size:14px; white-space:nowrap; }
.footer-inner { display:flex; align-items:start; justify-content:space-between; gap:30px; padding:24px 0 36px; border-top:1px solid var(--ink); font-size:11px; color:var(--muted); }
.footer-inner strong { color:var(--ink); font-size:18px; letter-spacing:-.05em; }
.scroll-progress,.motion-toggle { display:none; }
.sera-dev-marker { display:inline-block; margin-left:7px; color:#8a6c56; font-size:10px; font-weight:500; letter-spacing:0; vertical-align:middle; line-height:1; }
@media(min-width:1000px) { .card:nth-child(2) { margin-top:35px; } .card:nth-child(3) { margin-top:70px; } }
@media(max-width:900px) {
  .wrap { width:calc(100% - 48px); }
  .brand small { display:none; }
  .hero { padding-top:45px; }
  h1 { font-size:clamp(38px,5.5vw,58px); }
  .about { gap:40px; }
  .ribbon-items { display:none; }
  .interests { gap:20px; }
  .card h3 { font-size:19px; }
}
@media(max-width:650px) {
  .wrap { width:calc(100% - 40px); }
  .header-inner { min-height:76px; gap:14px; }
  .brand { font-size:28px; }
  nav { gap:16px; font-size:12px; }
  .hero { grid-template-columns:1fr; gap:18px; padding:40px 0 34px; }
  h1 { font-size:clamp(36px,9.2vw,56px); }
  .eyebrow { margin-bottom:20px; font-size:10px; }
  .intro { font-size:13px; margin-top:22px; }
  .hero-actions { margin-top:24px; gap:22px; }
  .button { font-size:12px; padding:14px 18px; gap:25px; }
  .visual { width:min(440px,100%); margin:auto; }
  .ribbon { font-size:11px; }
  .content { padding:50px 0; }
  .about { grid-template-columns:1fr; gap:28px; }
  .about-lead { font-size:16px; margin-top:20px; }
  .about-main>p { font-size:14px; }
  .ai-note { padding:24px; }
  .section-head { display:block; }
  .section-head>p { margin-top:20px; font-size:12px; }
  .interests { grid-template-columns:1fr; gap:32px; }
  .card { padding-top:18px; }
  .card-top { margin-bottom:16px; }
  .card h3 { font-size:22px; }
  .tag { margin-top:16px; }
  .closing { align-items:start; flex-direction:column; padding:40px 0; }
  .closing h2 { font-size:29px; }
  .closing a { font-size:13px; padding:15px 20px; }
  .footer-inner { flex-direction:column; gap:16px; font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { body { background:white; } .hero { break-inside:avoid; } nav,.hero-actions { display:none; } }
/* Small tactile reactions, enabled at the user's request. */
.button,.closing a,.text-link,nav a,.card { transition:transform .22s ease,box-shadow .22s ease,color .22s ease; }
.button span,.closing a span { display:inline-block; transition:transform .22s ease; }
@media(hover:hover) and (pointer:fine) {
  .button:hover,.closing a:hover { transform:translateY(-3px); box-shadow:4px 5px 0 #dbd2c0; }
  .button:hover span { transform:translateY(3px); }
  .closing a:hover span { transform:translate(3px,-3px); }
  .text-link:hover,nav a:hover { transform:translateY(-2px); color:var(--red); }
  .card:hover { transform:translateY(-4px); }
}
.button:active,.closing a:active { transform:translateY(1px); box-shadow:none; }
@media print { .card { transform:none !important; } }
.ai-note { transform-origin:50% 12%; animation:note-sway 5.5s ease-in-out infinite; }
@keyframes note-sway { 0%,100% { transform:rotate(-.6deg) translateY(0); } 50% { transform:rotate(.6deg) translateY(-3px); } }
@media(hover:hover) and (pointer:fine) { .ai-note:hover { animation:note-wiggle .8s ease-in-out infinite; } }
@keyframes note-wiggle { 0%,100% { transform:rotate(-.8deg) translateY(-2px); } 50% { transform:rotate(.8deg) translateY(-4px); } }
@media print { .ai-note { animation:none; transform:none; } }

.sera-dev-marker { color:#75543e; }
.ai-note .eyebrow { color:#943020; }
.note-caption { color:#625e53; }
.closing .sera-dev-marker { color:#fffdf7; }

/* Brand greeting */
.brand-mark { transform-origin:50% 75%; transition:transform .25s ease; }
.brand:hover .brand-mark,.brand:focus-visible .brand-mark { transform:translateY(-2px) rotate(-9deg); }