:root{--cream:#FFF6EA;--cream50:#FFFBF5;--oat:#EBD9C1;--cocoa:#3B2620;--cocoa7:#6B4A3C;--berry:#E04A64;--berry6:#C7354F;--sage:#E5F0E3;--mari:#FDF0D3}
*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--cocoa);font-family:Nunito,system-ui,sans-serif;font-weight:600;line-height:1.6}
a{color:var(--berry6);font-weight:800}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
header img{height:44px;border-radius:12px}header nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 18px}header nav a{color:var(--cocoa);text-decoration:none}
h1,h2{font-family:Fraunces,Georgia,serif;font-weight:800;letter-spacing:-.01em;line-height:1.1}
h1{font-size:clamp(36px,6vw,58px);margin:10px 0 14px}h2{font-size:28px;margin:36px 0 10px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:30px 0 50px}
.hero p{font-size:19px;color:var(--cocoa7)}
.card{background:#fff;border:2px solid var(--oat);border-radius:26px;padding:22px}
.photo{border-radius:30px;overflow:hidden;position:relative;aspect-ratio:4/5}
.photo img{width:100%;height:100%;object-fit:cover}.photo .purl{position:absolute;right:-10px;bottom:-14px;width:46%;height:auto;object-fit:contain}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:50px}
.grid .card h3{margin:0 0 6px;font-size:19px;font-weight:900}.grid .card p{margin:0;color:var(--cocoa7)}
.btn{display:inline-block;background:var(--berry);color:#fff;text-decoration:none;padding:15px 24px;border-radius:18px;box-shadow:0 4px 0 var(--berry6);font-weight:900}
footer{border-top:2px dashed var(--oat);padding:26px 0 40px;color:var(--cocoa7);font-size:15px}
.doc{max-width:760px;padding-bottom:60px}.doc h2{font-size:24px}.doc li{margin:6px 0}
@media (max-width:760px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr}}
footer p{margin:0 0 12px}
.foot-links,.langs{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-links{margin-bottom:16px}
.langs{padding-top:16px;border-top:2px dashed var(--oat)}
.langs a{color:var(--cocoa7);text-decoration:none;font-weight:800}
.langs a:hover{color:var(--berry6)}
.langs a[aria-current]{color:var(--cocoa);font-weight:900;text-decoration:underline dashed var(--berry);text-decoration-thickness:3px;text-underline-offset:5px}
.doc .note{background:var(--mari);border:2px solid var(--oat);border-radius:18px;padding:12px 16px}
html[lang=ja] body{font-family:Nunito,"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI",Meiryo,system-ui,sans-serif;line-break:strict}
html[lang=ko] body{font-family:Nunito,"Nanum Gothic","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;word-break:keep-all}
html[lang=ja] h1,html[lang=ja] h2{font-family:Fraunces,"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;font-weight:900}
html[lang=ko] h1,html[lang=ko] h2{font-family:Fraunces,"Nanum Gothic","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
html[lang=ja] h1,html[lang=ja] h2,html[lang=ko] h1,html[lang=ko] h2{letter-spacing:0;line-height:1.3}
html[lang=ja] h1,html[lang=ko] h1{font-size:clamp(30px,5vw,46px)}
h1{text-wrap:balance}html[lang=ja] h1,html[lang=ja] h2{word-break:auto-phrase}