/* Tokens */
:root{
  --bg:#F8F8DF;
  --card:#fff;
  --text:#111;
  --muted:#666;
  --line:rgba(0,0,0,.10);
  --radius:14px;
  --shadow:0 8px 22px rgba(0,0,0,.10);
}

/* Base */
html,body{
  background:var(--bg);
  width:100%;
  overflow-x:hidden;
}
html{
  font-size:13px !important;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0;
  color:var(--text);
  font-size:13px !important;
  line-height:1.7 !important;
}

#main,
#main p,
#main li{
  font-size:1rem !important;
  line-height:1.7 !important;
}

#main h1{
  font-size:1.20rem !important;
  line-height:1.25 !important;
}

#main h2{
  font-size:1.12rem !important;
  line-height:1.30 !important;
}

#main h3{
  font-size:1.05rem !important;
  line-height:1.30 !important;
}

/* Legacy Layout */
#container,
#container *{
  box-sizing:border-box;
}

#container{
  text-align:left !important;
  padding:0 12px !important;
}

#header{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
  margin-bottom:10px;
  padding:10px 0 6px;
}

#title{
  float:none !important;
  width:auto !important;
  height:auto !important;
  position:static !important;
}

#title h1{
  position:static !important;
  top:auto !important;
  margin:0;
  line-height:1.3;
}

#main img,
#main iframe{
  max-width:100%;
  height:auto;
}

#main table{
  display:block !important;
  width:100%;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

#main th,
#main td{
  padding:5px 8px !important;
  line-height:1.5 !important;
  white-space:normal !important;
  overflow-wrap:anywhere;
}

#main input[type="text"],
#main input[type="password"],
#main textarea,
#main select{
  width:100% !important;
  max-width:100%;
  font:inherit;
}

#main input[type="submit"]{
  font:inherit;
}

/* Topbar */
#mTopbar{
  display:block;
}

.m-topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--card);
  border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px 12px;
  width:min(100%, 480px);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  padding-left:max(12px, env(safe-area-inset-left));
  padding-right:max(12px, env(safe-area-inset-right));
}
.m-topbar__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.m-brand{
  font-weight:700;
  text-decoration:none;
  color:var(--text);
}
.m-iconbtn{
  border:1px solid var(--line);
  background:transparent;
  border-radius:12px;
  padding:8px 10px;
  font-size:16px;
  color:var(--text);
  text-decoration:none;
}

/* Search */
.m-search{
  display:flex;
  gap:8px;
  margin-top:10px;
  width:100%;
  box-sizing:border-box;
}
.m-search__select{
  border:1px solid var(--line);
  background:transparent;
  border-radius:12px;
  padding:10px 10px;
  color:var(--text);
  flex:0 0 110px;
  min-width:110px;
  max-width:none;
  box-sizing:border-box;
}
.m-search__input{
  flex:1 1 auto;
  min-width:0;
  border:1px solid var(--line);
  background:transparent;
  border-radius:12px;
  padding:10px 12px;
  color:var(--text);
  box-sizing:border-box;
}
.m-search__btn{
  flex:0 0 64px;
  width:64px;
  border:1px solid var(--line);
  background:transparent;
  border-radius:12px;
  padding:10px 12px;
  color:var(--text);
  box-sizing:border-box;
}
.m-search,
.m-search *{
  box-sizing:border-box;
}

@media (max-width:500px){
  .m-search{
    flex-wrap:nowrap;
  }
  .m-search__select:first-of-type{
    flex:0 0 96px;
    min-width:96px;
  }
  .m-search__select:nth-of-type(2){
    flex:0 0 88px;
    min-width:88px;
  }
  .m-search__input[name="word"]{
    flex:1 1 122px;
    width:122px;
    min-width:122px;
  }
  .m-search__btn{
    flex:0 0 64px;
    width:64px;
    min-width:64px;
  }
}


@media (max-width:430px){
  .m-search{
    flex-wrap:wrap;
  }
  .m-search__btn{
    flex:1 1 100%;
    width:100%;
    min-width:0;
  }
}
@media (max-width:340px){
  .m-search__select:first-of-type{
    flex:0 0 72px;
    min-width:72px;
  }
  .m-search__select:nth-of-type(2){
    flex:0 0 70px;
    min-width:70px;
  }
  .m-search__input[name="word"]{
    flex:1 1 122px;
    width:122px;
    min-width:122px;
  }
}

/* Ads */
.mobile-ad-slot{
  display:block;
  padding:0 12px;
  margin:10px 0 12px;
}

.mobile-ad-slot__inner{
  text-align:center;
}

.mobile-ad-slot__inner img,
.mobile-ad-slot__inner iframe{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
}

.mobile-ad-slot__inner .mobile-ad-frame{
  width:min(300px, 100%);
  aspect-ratio:300 / 250;
  height:auto;
  border:0;
}

/* Tabs */
.m-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  overflow:visible;
  padding-top:10px;
}
.m-tab{
  white-space:nowrap;
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
}

/* Drawer */
.m-drawer{
  position:fixed;
  inset:0;
  z-index:2000;
  background:rgba(0,0,0,.35);
  padding:calc(12px + env(safe-area-inset-top)) 12px 12px 12px;
}
.m-drawer__panel{
  max-width:520px;
  margin-left:auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
  max-height:calc(100vh - 24px - env(safe-area-inset-top));
  overflow:auto;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
.m-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.m-drawer #mDrawerBody{
  padding-bottom:96px;
}
.m-drawer[hidden]{
  display:none !important;
}

#container{
  width:min(100%, 480px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

html.drawer-open,
body.drawer-open{
  overflow:hidden;
}