/* Shared interaction rules; original AAA branding and artwork stay in their own styles. */
:root { --aaa-ui-accent:#4065c4; }
body.aaa-original { --aaa-ui-accent:#3c7882; }
body.kr-editorial { --aaa-ui-accent:#9d4240; }
#aaa-header :is(a,button,input):focus-visible,
#aaa-contents :is(button,input,select,textarea,summary):focus-visible {
    outline:2px solid var(--aaa-ui-accent); outline-offset:3px;
}
body #review .aaa-review-body .aaa-review-toggle { color:var(--aaa-ui-accent); }
body #review .aaa-review-load-more { box-shadow:none; border-radius:4px; }
@media (max-width:719px) {
    body #aaa-header .global { height:auto; min-height:0; padding-bottom:0; }
    body #aaa-header .global .inner { height:auto; padding-bottom:10px; }
    body #aaa-header .global #gl-search_sites { height:44px; padding:0; position:relative; }
    body #aaa-header .global #gl-search_sites label {
        position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
    }
    body #aaa-header .global #gl-search_sites input {
        box-sizing:border-box; width:100%; height:44px; min-height:44px;
        padding:0 10px 0 44px; font-size:16px; line-height:1.4;
    }
    body #aaa-header .global #gl-search_sites input::placeholder { font-size:12px; }
    body #aaa-header .global #gl-search_sites button { width:44px; height:44px; top:0; left:0; }
    body #aaa-header .global #gl-search_sites button:after { position:absolute; top:50%; left:50%; margin:0; transform:translate(-50%,-50%); }
    body.kr-editorial #aaa-header .global .logo { margin:0 auto; }
    body.kr-editorial #aaa-header .global #gl-search_sites { order:3; flex:0 0 100%; margin:8px 0 0; }
    body #review .aaa-review-body .aaa-review-toggle {
        display:inline-flex; align-items:center; min-height:44px; min-width:44px;
        box-sizing:border-box; padding:0 6px; vertical-align:baseline;
    }
    body #review .aaa-review-body .aaa-review-toggle[hidden] { display:none; }
}

/* Restore the existing document icon; the mobile sprite has only three icons. */
@media(max-width:719px){
 body:not(.kr-editorial) #aaa-header .global .glnav ul li.gl-request a{padding-top:32px;font-size:10px;font-weight:normal}
 body:not(.kr-editorial) #aaa-header .global .glnav ul li.gl-request a:after{content:"";display:block;top:8px;left:0;margin:0;width:100%;height:18px;background:url(../img/common/icons-glnav.png) no-repeat 50% -51.154px / 19px auto}
}
/* Use the delivered green/blue/red tabs at every compact viewport. */
@media(max-width:719px){
 body #main #billboard #change-board{width:320px;max-width:100%;height:auto;margin:0 auto}
 body #main #billboard #change-board ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:0 10px;box-sizing:border-box}
 body #main #billboard #change-board ul li{float:none;width:auto;min-width:0;height:auto;margin:0}
 body #main #billboard #change-board ul li a{display:block;box-sizing:border-box;position:static;width:100%;height:auto;aspect-ratio:95/35;padding:0;border:0;border-radius:0;text-indent:-10000px;overflow:hidden;background:url(../img/sp/home/billboard-tabs.png) no-repeat 0 5px / 300% auto}
 body #main #billboard #change-board ul li.cb1 a{background-position:0 5px}
 body #main #billboard #change-board ul li.cb2 a{background-position:50% 5px}
 body #main #billboard #change-board ul li.cb3 a{background-position:100% 5px}
 body #main #billboard #change-board ul li.cb1 a:hover{background-position:0 100%}
 body #main #billboard #change-board ul li.cb2 a:hover{background-position:50% 100%}
 body #main #billboard #change-board ul li.cb3 a:hover{background-position:100% 100%}
 body #main #billboard.b1 #change-board ul li.cb1 a{height:auto;position:static;background-position:0 100%}
 body #main #billboard.b2 #change-board ul li.cb2 a{height:auto;position:static;background-position:50% 100%}
 body #main #billboard.b3 #change-board ul li.cb3 a{height:auto;position:static;background-position:100% 100%}
}
/* The cycle main column stays narrower while its sidebar is visible. */
@media(min-width:719.01px) and (max-width:1059.98px){
 body.kr-editorial #main #billboard #change-board{width:320px;max-width:100%;height:auto;margin:0 auto}
 body.kr-editorial #main #billboard #change-board ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:0 10px;box-sizing:border-box}
 body.kr-editorial #main #billboard #change-board ul li{float:none;width:auto;min-width:0;height:auto;margin:0}
 body.kr-editorial #main #billboard #change-board ul li a{display:block;box-sizing:border-box;position:static;width:100%;height:auto;aspect-ratio:95/35;padding:0;border:0;border-radius:0;text-indent:-10000px;overflow:hidden;background:url(../img/sp/home/billboard-tabs.png) no-repeat 0 5px / 300% auto}
 body.kr-editorial #main #billboard #change-board ul li.cb1 a{background-position:0 5px}
 body.kr-editorial #main #billboard #change-board ul li.cb2 a{background-position:50% 5px}
 body.kr-editorial #main #billboard #change-board ul li.cb3 a{background-position:100% 5px}
 body.kr-editorial #main #billboard #change-board ul li.cb1 a:hover{background-position:0 100%}
 body.kr-editorial #main #billboard #change-board ul li.cb2 a:hover{background-position:50% 100%}
 body.kr-editorial #main #billboard #change-board ul li.cb3 a:hover{background-position:100% 100%}
 body.kr-editorial #main #billboard.b1 #change-board ul li.cb1 a{height:auto;position:static;background-position:0 100%}
 body.kr-editorial #main #billboard.b2 #change-board ul li.cb2 a{height:auto;position:static;background-position:50% 100%}
 body.kr-editorial #main #billboard.b3 #change-board ul li.cb3 a{height:auto;position:static;background-position:100% 100%}
}
/* Keep the fixed-width source layout within tablet viewports without cropping. */
@media(min-width:719px) and (max-width:1059.98px){
 body:not(.kr-editorial) #wrap{min-width:0;max-width:none;width:100%}
 body:not(.kr-editorial) #aaa-header .global{min-width:0;height:auto}
 body:not(.kr-editorial) #aaa-header .global .inner{width:100%;max-width:1000px}
 body:not(.kr-editorial) #aaa-header .global .glnav{float:none;margin-left:159px;display:flex}
 body:not(.kr-editorial) #aaa-header .global .glnav ul{display:flex;flex:1;min-width:0}
 body:not(.kr-editorial) #aaa-header .global .glnav ul li{flex:1;min-width:0}
 body:not(.kr-editorial) #aaa-header .global .glnav ul li a{width:100%;min-width:0}
 body:not(.kr-editorial) #aaa-header .global #gl-search_sites{float:none;clear:both;width:auto;height:44px;margin:10px 20px;padding:0}
 body:not(.kr-editorial) #aaa-header .global #gl-search_sites label{display:none}
 body:not(.kr-editorial) #aaa-header .global #gl-search_sites input{box-sizing:border-box;width:100%;height:44px;font-size:16px}
 body:not(.kr-editorial) #aaa-header .global #gl-search_sites button{top:0;height:44px}
 body:not(.kr-editorial) #aaa-contents{box-sizing:border-box;width:calc(100% - 32px);max-width:700px;margin-left:auto;margin-right:auto}
 body:not(.kr-editorial) #aaa-contents #main{float:none;width:100%;min-width:0}
 body:not(.kr-editorial) #aaa-contents #side{float:none;width:100%;margin-top:35px}
 body:not(.kr-editorial) #aaa-header .path,
 body:not(.kr-editorial) #aaa-footer .to-pagetop,
 body:not(.kr-editorial) #aaa-footer .footer-menu dl,
 body:not(.kr-editorial) #aaa-footer .copy{box-sizing:border-box;width:calc(100% - 32px);max-width:700px}
 body:not(.kr-editorial) #aaa-footer .footer-menu{min-width:0;width:100%}
 body:not(.kr-editorial) #aaa-contents #review>h2{max-width:100%;background-size:100% auto}
}
@media(min-width:719px) and (max-width:1059.98px){
 body:not(.kr-editorial) #aaa-contents #side .aaa-home-site-list>:nth-child(n+11){display:none}
 body:not(.kr-editorial) #aaa-contents #side .aaa-sidebar-site{grid-template-columns:122px minmax(0,1fr)}
}
/* Let the cycle header search occupy a second row before labels become cramped. */
@media(min-width:719px) and (max-width:1059.98px){
 body.kr-editorial #aaa-header .global{height:auto}
 body.kr-editorial #aaa-header .global .inner{box-sizing:border-box;display:flex;flex-wrap:wrap;width:100%;max-width:1000px;height:auto;padding:0 16px}
 body.kr-editorial #aaa-header .global .logo{order:0;flex:0 0 130px;width:130px;height:80px;margin:0}
 body.kr-editorial #aaa-header .global .logo a{height:80px}
 body.kr-editorial #aaa-header .global .glnav{order:1;flex:1;min-width:0;height:80px}
 body.kr-editorial #aaa-header .global .glnav ul{height:80px}
 body.kr-editorial #aaa-header .global .glnav ul li a{height:80px;font-size:12px}
 body.kr-editorial #aaa-header .global #gl-search_sites{order:2;flex:0 0 100%;width:100%;height:44px;margin:10px 0;padding:0}
 body.kr-editorial #aaa-header .global #gl-search_sites label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 body.kr-editorial #aaa-header .global #gl-search_sites input{box-sizing:border-box;width:100%;height:44px;font-size:16px}
 body.kr-editorial #aaa-header .global #gl-search_sites button{top:0;height:44px}
}

/* Account for narrow preview scrollbars and keep multi-line mobile labels inside their cells. */
@media(max-width:719px){
 body #wrap,body #aaa-header .global{min-width:0}
 body.kr-editorial #aaa-header .global .glnav,
 body.kr-editorial #aaa-header .global .glnav ul{height:80px}
 body.kr-editorial #aaa-header .global .glnav ul li a{height:80px;padding-top:36px}
}

/* Fixed 210px artwork must fit before the mobile breakpoint, without wrapping. */
@media(min-width:719.01px) and (max-width:750px){
 body:not(.kr-editorial) #main #billboard #change-board ul{display:flex;justify-content:space-between;gap:6px;padding:0 12px;box-sizing:border-box}
 body:not(.kr-editorial) #main #billboard #change-board ul:after{display:none}
 body:not(.kr-editorial) #main #billboard #change-board ul li{float:none;flex:0 0 210px;margin:0}
}

/* Align the two-line results and editorial labels with the other menu items. */
body #aaa-header .global .glnav ul li a.aaa-nav-two-lines{white-space:nowrap}
@media(min-width:719.01px){
 body #aaa-header .global .glnav ul li a.aaa-nav-two-lines{padding-top:40px}
}
@media(max-width:719px){
 body:not(.kr-editorial) #aaa-header .global .glnav,
 body:not(.kr-editorial) #aaa-header .global .glnav ul,
 body:not(.kr-editorial) #aaa-header .global .glnav ul li,
 body:not(.kr-editorial) #aaa-header .global .glnav ul li a{height:60px}
 body:not(.kr-editorial) #aaa-header .global .glnav ul li a.aaa-nav-two-lines{padding-top:32px}
}
/* Keep the seven-character subtitle inside the cycle menu at 320px. */
@media(max-width:359px){
 body.kr-editorial #aaa-header .global .glnav ul li a.aaa-nav-two-lines{letter-spacing:-.05em}
}