*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--text:#0a0a0a;--muted:#666;--faint:#999;--bg:#faf8f5;--border:#e8e4dc;--surf:#ffffff;--blue:#2563eb;--accent:#b8860b;--accent-light:#f5e6d3;--sans:'Inter',system-ui,sans-serif;--serif:Georgia,'Times New Roman',serif}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(135deg, #faf8f5 0%, #f5f1ea 100%);
  pointer-events:none;
  z-index:0;
}
body::after{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:radial-gradient(circle at 1px 1px, rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size:24px 24px;
  pointer-events:none;
  z-index:0;
  opacity:1;
}
nav{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;border-bottom:1px solid var(--border);background:rgba(250,248,245,0.9);backdrop-filter:blur(20px) saturate(180%);z-index:200;position:relative}
.nb{font-size:1rem;font-weight:500;color:var(--text);cursor:pointer}
.nl{display:flex;align-items:center;gap:.25rem}
.nl a{font-size:.95rem;color:var(--muted);text-decoration:none;padding:.35rem .85rem;border-radius:6px;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);cursor:pointer;position:relative}
.nl a::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--accent);transform:translateX(-50%);transition:width .3s ease}
.nl a:hover::after,.nl a.on::after{width:60%}
.nl a:hover,.nl a.on{background:var(--surf);color:var(--text);transform:translateY(-1px)}
.page{padding-top:52px;padding-bottom:56px;position:relative;z-index:1}
.sec{display:none;opacity:0;transform:translateY(20px);transition:opacity 0.5s ease-out, transform 0.5s ease-out}.sec.on{display:block;opacity:1;transform:translateY(0);animation:sectionFadeIn 0.6s ease-out}
.hero{min-height:calc(100vh - 108px);display:flex;align-items:center;padding:4rem 6vw;gap:5rem}
.hl{flex:1;max-width:520px}
.hclock{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--muted);margin-bottom:1.5rem;border:1px solid var(--border);border-radius:100px;padding:.3rem .85rem}
.dot{width:7px;height:7px;background:#22c55e;border-radius:50%}
.htag{font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:600;line-height:1.25;letter-spacing:-.02em;margin-bottom:1.5rem;font-family:var(--serif)}
.hbio{font-size:1.05rem;line-height:1.8;color:var(--muted);margin-bottom:2rem}
.hbio p+p{margin-top:.85rem}
.hbio a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border);cursor:pointer}
.hbio a:hover{text-decoration-color:var(--text)}
.hact{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:500;padding:.6rem 1.3rem;border-radius:8px;text-decoration:none;border:1px solid transparent;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);cursor:pointer;font-family:var(--sans);position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.3);transform:translate(-50%,-50%);transition:width .6s,height .6s}
.btn:hover::before{width:300px;height:300px}
.btn-p{background:var(--text);color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12)}.btn-p:hover{background:#2a2a28;transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.btn-o{background:#fff;color:var(--text);border-color:var(--border);box-shadow:0 1px 3px rgba(0,0,0,.08)}.btn-o:hover{background:var(--accent-light);transform:translateY(-2px);border-color:#d4c8b8;box-shadow:0 4px 12px rgba(184,134,11,.12)}
.hr{flex-shrink:0;width:clamp(220px,28vw,340px)}
.hphoto{width:100%;aspect-ratio:3/4;background:var(--surf);border-radius:12px;border:2px solid var(--border);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.1)}
.hphoto img{width:100%;height:100%;object-fit:cover;object-position:center top}
.sb{position:fixed;bottom:0;left:0;right:0;height:56px;border-top:1px solid var(--border);background:rgba(250,248,245,0.9);backdrop-filter:blur(20px) saturate(180%);display:flex;align-items:center;justify-content:center;gap:.75rem;z-index:200;padding:0 2rem}
.sp{display:flex;align-items:center;gap:.75rem;background:var(--surf);border:1px solid var(--border);border-radius:100px;padding:.4rem 1rem .4rem .5rem;font-size:.82rem;color:var(--muted);flex:1;max-width:420px;text-decoration:none;transition:border-color .15s,background .15s;cursor:pointer}
.sp:hover{background:#efefec;border-color:#d0d0cc}
.st{width:30px;height:30px;border-radius:6px;background:var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px}
.sa{display:flex;align-items:center;gap:.4rem}
.sbtn{font-size:.82rem;font-weight:500;padding:.42rem 1rem;border-radius:100px;border:1px solid var(--border);background:#fff;color:var(--text);text-decoration:none;transition:background .15s;font-family:var(--sans);display:inline-flex;align-items:center;gap:.35rem}
.sbtn svg{flex-shrink:0}
.sbtn:hover{background:var(--surf)}
.sbtn.bl{background:var(--blue);color:#fff;border-color:var(--blue)}.sbtn.bl:hover{background:#1d4ed8}
.ip{min-height:calc(100vh - 108px);padding:4rem 3rem;max-width:1400px;margin:0 auto}
.pt{font-size:1.9rem;font-weight:600;letter-spacing:-.02em;margin-bottom:.4rem;text-align:center;font-family:var(--serif)}
.ps{font-size:.9rem;color:var(--muted);margin-bottom:3rem;text-align:center}
.ab{font-size:1rem;line-height:1.8;color:var(--muted);max-width:660px;margin:0 auto}
.ab p+p{margin-top:1rem}
.aph{float:right;margin:0 0 1.5rem 2rem;width:160px;border-radius:8px;border:1px solid var(--border);overflow:hidden}
.aph img{width:100%;display:block;object-fit:cover;object-position:center top}
.sdiv{margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--border)}
.smt{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:1.5rem;text-align:center;font-weight:700}
.hgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;max-width:100%;margin:0 auto}
.hcard{background:var(--surf);border:2px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.hcard:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.12);border-color:#d4c8b8}
.hcimg{width:100%;height:280px;object-fit:cover;display:block;background:var(--bg)}
.hcbody{padding:1rem}
.hcbadge{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:#b45309;font-weight:600;margin-bottom:.3rem}
.hctit{font-size:1.15rem;font-weight:600;color:var(--text);margin-bottom:.25rem;line-height:1.35}
.hcdesc{font-size:.9rem;color:var(--muted);line-height:1.6}
.hobb{font-size:1rem;padding:.75rem 1.5rem;border:2px solid var(--border);border-radius:12px;color:var(--text);background:var(--surf);min-width:200px;text-align:left;transition:all .3s ease}
.hobb:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(184,134,11,.1)}
.hobby-title{font-weight:600;font-size:1.05rem;margin-bottom:.35rem;display:flex;align-items:center;gap:.5rem}
.hobby-desc{font-size:.88rem;color:var(--muted);line-height:1.5}
.hobby-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;max-width:900px;margin:0 auto}
.hobby-card{background:var(--surf);border:2px solid var(--border);border-radius:12px;overflow:hidden;transition:all .3s ease;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.hobby-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.12);border-color:var(--accent)}
.hobby-img-container{width:100%;height:200px;overflow:hidden;background:var(--bg)}
.hobby-img-container img{width:100%;height:100%;object-fit:cover}
.hobby-content{padding:1.25rem}
.hobby-card-title{font-size:1.15rem;font-weight:600;margin:0 0 .5rem;color:var(--text)}
.hobby-card-desc{font-size:.9rem;line-height:1.6;color:var(--muted);margin:0}
.rb+.rb{margin-top:2.5rem}
.rbt{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.rr{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;padding:.9rem 0;border-bottom:1px solid var(--border)}
.rr:last-child{border-bottom:none}
.rro{font-size:.9rem;font-weight:500}
.rda{font-size:.78rem;color:var(--faint);white-space:nowrap}
.ror{font-size:.82rem;color:var(--muted)}
.rde{font-size:.82rem;color:var(--muted);grid-column:1/-1;margin-top:.25rem;line-height:1.65}
.rde li{margin-left:1.1rem;margin-bottom:.2rem}
.tag{font-size:.74rem;padding:.22rem .65rem;border:1px solid var(--border);border-radius:100px;color:var(--muted);background:#fff}
.sw{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.tg+.tg{margin-top:1rem}
.tgl{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:.4rem}
.pg{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem;max-width:100%;margin:0 auto}
.pc{border:2px solid var(--border);border-radius:10px;overflow:hidden;color:inherit;display:flex;flex-direction:column;background:#fff;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.pc.click{cursor:pointer}.pc.click:hover{border-color:#d4c8b8;box-shadow:0 12px 32px rgba(0,0,0,.14);transform:translateY(-6px)}
.pc.noclick{cursor:default}
.piph{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem}
.pb{padding:1rem 1.1rem 1.2rem;flex:1}
.ptit{font-size:1.1rem;font-weight:700;margin-bottom:.5rem;line-height:1.4}
.pcourse{font-size:.85rem;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1.2rem}
.psection{margin-bottom:1.2rem}
.psection-title{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text);margin-bottom:.7rem;border-left:3px solid var(--accent);padding-left:.6rem}
.pde{font-size:.95rem;color:var(--muted);line-height:1.7}
.pde+.pde{margin-top:.5rem}
.ptags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.75rem}
.vcwrap{max-width:800px;margin:0 auto}
.vc{display:flex;flex-direction:column;gap:.6rem}
.ve{aspect-ratio:16/9;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--surf);display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:.75rem;font-style:italic}
.ve iframe{width:100%;height:100%;border:none;display:block}
.vt{font-size:.88rem;font-weight:500;text-align:center}
.vm{font-size:.78rem;color:var(--faint);text-align:center}
@media(max-width:680px){
  .hero{flex-direction:column-reverse;padding:2rem 1.5rem;gap:2rem}
  .hr{width:100%}.hphoto{aspect-ratio:4/3}
  nav{padding:0 1rem}.nl a{padding:.35rem .5rem;font-size:.78rem}
  .ip{padding:2.5rem 1.5rem}
  .aph{float:none;width:100%;margin:0 0 1.5rem 0}
  .hgrid{grid-template-columns:1fr;gap:1rem}
  .hobby-grid{grid-template-columns:1fr;gap:1.5rem}
  .pg{grid-template-columns:1fr;gap:2rem}
  .sa{gap:.3rem}.sbtn{padding:.42rem .6rem;font-size:.75rem}
}
@keyframes sectionFadeIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0px) scale(1)}50%{transform:translateY(-8px) scale(1.01)}}
.hphoto{animation:float 8s ease-in-out infinite}
@keyframes fadeInUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.hero > *{animation:fadeInUp 0.8s ease-out backwards}
.hl{animation-delay:0.15s}
.hr{animation-delay:0.3s}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
.btn-p:hover{background:linear-gradient(90deg,#2a2a28,#1a1a18,#2a2a28);background-size:200% 100%;animation:shimmer 2s linear infinite}