/* ===== Base / Reset (accessibility & WebKit hardening) ===== */

/* rem 기준 10px */
html{
    font-size:62.5%;                   /* 1rem = 10px */
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}
html,body{height:100%}

body{
    margin:0;
    color:var(--color-text);
    background:var(--color-bg);
    font:400 var(--fs-16)/var(--lh-normal) var(--font-basic);  /* 16px/1.6 */
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

/* Media elements */
img{max-width:100%;height:auto;vertical-align:middle;image-rendering:auto}
svg{vertical-align:middle}

/* Links */
a{color:inherit;text-decoration:none;transition:color .25s cubic-bezier(.17,.67,.25,1)}
a:focus{outline:2px solid var(--color-focus);outline-offset:2px}

/* Focus visibility (keyboard-only outline) */
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
:focus:not(:focus-visible){outline:none}

/* Controls */
button{font:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font-title);line-height:1.25;letter-spacing:var(--ls-tight)}
p{margin:0}
[disabled],.is-disabled{cursor:not-allowed;opacity:.6}

/* Skip link */
.skip-nav{position:fixed;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-nav:focus{left:16px;top:16px;width:auto;height:auto;padding:10px 14px;background:#000;color:#fff;z-index:var(--z-skip);border-radius:6px}

/* Screen-reader only */
.sound-only,.msg-sound-only{
    position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* Motion / Hover preferences */
@media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media (hover:none){
    a{transition:none}
}

/* High contrast / forced colors */
@media (prefers-contrast:more){
    :root{--color-border:#3a3a3a}
}
@media (forced-colors:active){
    :root{--color-focus:Highlight}
    a:focus,:focus-visible{outline-color:Highlight}
}

/* Selection (visible, WCAG-compliant) */
::selection{background:rgba(196,169,108,.35);color:#000}
::-moz-selection{background:rgba(196,169,108,.35);color:#000}