/*
 * other/style.css — Yahoo JP category page theme for Other/
 * the INNER page. if home-yahoo is the front page portal,
 * this is the category directory you click into.
 * two-column layout: category sidebar + content area.
 * breadcrumb navigation, dense link lists, colored section headers.
 * inherits yj- design system from home-yahoo.css.
 *
 * scoped to body.page-other-yahoo. loads AFTER home-yahoo.css.
 *
 * design reference: yahoo.co.jp category pages circa 2002-2006.
 * also: yahoo.co.jp help pages, subcategory listings.
 * flat colored bars, 1px borders, dense text, no frills.
 */


/* ========================================================================== */
/*  ADDITIONAL CUSTOM PROPERTIES                                              */
/* ========================================================================== */

.page-other-yahoo {
  /* inherit everything from .page-home-yahoo via home-yahoo.css,
     but add Other-specific tokens */
  --yo-hd-links:       #5a5a7a;
  --yo-hd-recommended:  #2a5599;
  --yo-hd-philosophies: #3a7a3a;
  --yo-hd-faq:          #8b2252;
  --yo-sidebar-bg:      #f7f6f2;
  --yo-breadcrumb-bg:   #f0efe8;
  --yo-active-tab:      #5a5a7a;
}


/* ========================================================================== */
/*  GLOBAL OVERRIDES (page-other-yahoo extends page-home-yahoo)               */
/* ========================================================================== */

/* the body carries BOTH classes: page-home-yahoo page-other-yahoo */

/* hide the default Win98 layout containers */
.page-other-yahoo .master-container,
.page-other-yahoo .biggirl-container,
.page-other-yahoo .bigboy-container,
.page-other-yahoo .main-container,
.page-other-yahoo .body-container,
.page-other-yahoo .side-container {
  display: none !important;
}


/* ========================================================================== */
/*  ACTIVE TAB STATE                                                          */
/* ========================================================================== */
/* "Other" tab highlighted as current page                             ===  */

.page-other-yahoo .yj-tab-other {
  position: relative;
  top: 3px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--yo-active-tab);
  opacity: 1;
  box-shadow: inset 0 -3px 0 0 var(--yj-bg, #ffffff);
  background: #4a4a6a;
}


/* ========================================================================== */
/*  BREADCRUMB BAR                                                            */
/* ========================================================================== */
/* Yahoo JP inner pages always had a path trail below the tabs.
   "Top > カテゴリ > サブカテゴリ". flat, compact, utilitarian.         ===  */

.yo-breadcrumb {
  background: var(--yo-breadcrumb-bg);
  border-bottom: 1px solid var(--yj-border, #cccccc);
  padding: 0;
}

.yo-breadcrumb-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 5px 12px;
  font-family: var(--yj-font, 'MS PGothic', Arial, Helvetica, sans-serif);
  font-size: 11px;
  color: var(--yj-text-muted, #666666);
}

.yo-breadcrumb-inner a {
  color: var(--yj-link, #0033cc);
  text-decoration: none;
}

.yo-breadcrumb-inner a:hover {
  text-decoration: underline;
}

.yo-breadcrumb-sep {
  margin: 0 4px;
  color: var(--yj-text-light, #999999);
}

.yo-breadcrumb-current {
  font-weight: bold;
  color: var(--yj-text, #333333);
}


/* ========================================================================== */
/*  SUBCATEGORY HEADER                                                        */
/* ========================================================================== */
/* Yahoo JP category pages had a big title area with the category name
   and a count of subcategories/links. sits between breadcrumb and layout ===*/

.yo-category-header {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 12px 6px 12px;
  border-bottom: 2px solid var(--yo-active-tab);
}

.yo-category-title {
  font-family: var(--yj-font-heading, Tahoma, Arial, Helvetica, sans-serif);
  font-size: 16px;
  font-weight: bold;
  color: var(--yj-text, #333333);
  margin: 0;
}

.yo-category-count {
  font-family: var(--yj-font, 'MS PGothic', Arial, Helvetica, sans-serif);
  font-size: 11px;
  color: var(--yj-text-muted, #666666);
  margin-top: 2px;
}


/* ========================================================================== */
/*  TWO-COLUMN LAYOUT                                                         */
/* ========================================================================== */
/* category sidebar (left) + content (right). narrower left column
   than the homepage 3-col layout. still 960px max.                    ===  */

.yo-layout {
  max-width: 960px;
  margin: 8px auto 0 auto;
  display: flex;
  gap: 8px;
  padding: 0 10px;
  align-items: flex-start;
}

.yo-col-side {
  width: 180px;
  flex-shrink: 0;
}

.yo-col-main {
  flex: 1;
  min-width: 0;
}


/* ========================================================================== */
/*  SIDEBAR: SECTION NAVIGATOR                                                */
/* ========================================================================== */
/* vertical TOC with category icons. sticky so it follows scroll.
   styled like yj-dir but acts as a page anchor menu.                  ===  */

.yo-sidebar-nav {
  border: 1px solid var(--yj-border, #cccccc);
  margin-bottom: 8px;
  background: var(--yj-bg, #ffffff);
  position: sticky;
  top: 8px;
}

.yo-sidebar-hd {
  padding: 4px 8px;
  font-family: var(--yj-font-heading, Tahoma, Arial, Helvetica, sans-serif);
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  background: var(--yj-header-bg, #1e1e3a);
}

.yo-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.yo-sidebar-list li {
  border-bottom: 1px solid var(--yj-border-light, #e0e0e0);
}

.yo-sidebar-list li:last-child {
  border-bottom: none;
}

.yo-sidebar-list a {
  display: block;
  padding: 5px 8px;
  font-family: var(--yj-font, 'MS PGothic', Arial, Helvetica, sans-serif);
  font-size: 12px;
  color: var(--yj-link, #0033cc);
  text-decoration: none;
}

.yo-sidebar-list a:hover {
  background: var(--yo-sidebar-bg);
  text-decoration: underline;
}

.yo-sidebar-list a.active {
  background: var(--yo-sidebar-bg);
  font-weight: bold;
  border-left: 3px solid var(--yo-active-tab);
  padding-left: 5px;
}

.yo-sidebar-count {
  font-size: 10px;
  color: var(--yj-text-light, #999999);
  margin-left: 4px;
}


/* ========================================================================== */
/*  SIDEBAR: SITE LINKS                                                       */
/* ========================================================================== */

.yo-sidebar-links {
  border: 1px solid var(--yj-border, #cccccc);
  margin-bottom: 8px;
  background: var(--yj-bg, #ffffff);
}

.yo-sidebar-links .yo-sidebar-hd {
  background: #3a4a6a;
}

.yo-sidebar-links ul {
  list-style: none;
  margin: 0;
  padding: 4px 8px;
}

.yo-sidebar-links li {
  padding: 2px 0;
  font-size: 11px;
}

.yo-sidebar-links li::before {
  content: '\203A ';
  color: var(--yj-text-light, #999999);
}


/* ========================================================================== */
/*  SIDEBAR: BADGES                                                           */
/* ========================================================================== */

.yo-sidebar-badges {
  border: 1px solid var(--yj-border, #cccccc);
  margin-bottom: 8px;
  background: var(--yj-bg, #ffffff);
}

.yo-sidebar-badges .yo-sidebar-hd {
  background: var(--yj-tab-other, #5a5a7a);
}

.yo-sidebar-badges-bd {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  padding: 6px;
}

.yo-sidebar-badges-bd img {
  image-rendering: pixelated;
  height: 31px;
  display: block;
}


/* ========================================================================== */
/*  SIDEBAR: RELATED CATEGORIES                                               */
/* ========================================================================== */

.yo-sidebar-related {
  border: 1px solid var(--yj-border, #cccccc);
  margin-bottom: 8px;
  background: var(--yj-bg, #ffffff);
}

.yo-sidebar-related .yo-sidebar-hd {
  background: #6a5a2a;
}

.yo-sidebar-related ul {
  list-style: none;
  margin: 0;
  padding: 4px 8px;
}

.yo-sidebar-related li {
  padding: 2px 0;
  font-size: 11px;
}

.yo-sidebar-related li::before {
  content: '\203A ';
  color: var(--yj-text-light, #999999);
}


/* ========================================================================== */
/*  CONTENT SECTIONS                                                          */
/* ========================================================================== */

.yo-section {
  border: 1px solid var(--yj-border, #cccccc);
  margin-bottom: 8px;
  background: var(--yj-bg, #ffffff);
}

.yo-section-hd {
  padding: 4px 8px;
  font-family: var(--yj-font-heading, Tahoma, Arial, Helvetica, sans-serif);
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.yo-section-bd {
  padding: 8px;
  font-family: var(--yj-font, 'MS PGothic', Arial, Helvetica, sans-serif);
  font-size: 12px;
  line-height: 1.55;
}

.yo-hd-links        { background: var(--yo-hd-links); }
.yo-hd-recommended  { background: var(--yo-hd-recommended); }
.yo-hd-philosophies { background: var(--yo-hd-philosophies); }
.yo-hd-faq          { background: var(--yo-hd-faq); }
.yo-hd-colophon     { background: #3a4a6a; }
.yo-hd-sitemap      { background: #6a5a2a; }
.yo-hd-changelog    { background: #5a3a8a; }
.yo-hd-stats        { background: #1a6a5a; }

.yo-section-hd .yo-hd-more {
  font-size: 10px;
  font-weight: normal;
  color: #ffffff;
  text-decoration: none;
  opacity: 0.8;
}

.yo-section-hd .yo-hd-more:hover {
  opacity: 1;
  text-decoration: underline;
}


/* ========================================================================== */
/*  CATEGORY PATH (per-section breadcrumb)                                    */
/* ========================================================================== */

.yo-section-path {
  font-size: 10px;
  color: var(--yj-text-light, #999999);
  padding: 6px 8px 0 8px;
  font-family: var(--yj-font, 'MS PGothic', Arial, Helvetica, sans-serif);
}

.yo-section-path a {
  color: var(--yj-text-light, #999999);
  text-decoration: none;
}

.yo-section-path a:hover {
  text-decoration: underline;
  color: var(--yj-link, #0033cc);
}


/* ========================================================================== */
/*  LINK CARDS (Links section)                                                */
/* ========================================================================== */

.yo-link-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.yo-link-card {
  flex: 1 1 calc(33.333% - 6px);
  min-width: 140px;
  border: 1px solid var(--yj-border-light, #e0e0e0);
  padding: 8px;
  text-align: center;
  text-decoration: none;
  color: var(--yj-text, #333333);
  font-size: 12px;
  background: var(--yj-bg, #ffffff);
}

.yo-link-card:hover {
  background: var(--yo-sidebar-bg);
  border-color: var(--yj-border-dark, #999999);
}

.yo-link-card:visited {
  color: var(--yj-text, #333333);
}

.yo-link-card-title {
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 2px;
  color: var(--yj-link, #0033cc);
}

.yo-link-card:visited .yo-link-card-title {
  color: var(--yj-link, #0033cc);
}

.yo-link-card-desc {
  font-size: 11px;
  color: var(--yj-text-muted, #666666);
  margin: 0;
}


/* ========================================================================== */
/*  SUBCATEGORY GROUPS (Recommended section)                                  */
/* ========================================================================== */

.yo-subcategory {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--yj-border-light, #e0e0e0);
}

.yo-subcategory:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.yo-subcategory h3 {
  font-family: var(--yj-font-heading, Tahoma, Arial, Helvetica, sans-serif);
  font-size: 13px;
  font-weight: bold;
  color: var(--yj-text, #333333);
  margin: 0 0 4px 0;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--yj-border, #cccccc);
}

.yo-subcategory ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 8px;
}

.yo-subcategory li {
  padding: 2px 0;
  font-size: 12px;
  line-height: 1.5;
}

.yo-subcategory li::before {
  content: '\203A ';
  color: var(--yj-text-light, #999999);
}

.yo-subcategory .yo-rec-desc {
  font-size: 11px;
  color: var(--yj-text-muted, #666666);
  margin-left: 4px;
}


/* ========================================================================== */
/*  PHILOSOPHY BOXES                                                          */
/* ========================================================================== */

.yo-ethos-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.yo-ethos-item {
  flex: 1 1 200px;
  min-width: 0;
  border: 1px solid var(--yj-border-light, #e0e0e0);
  background: var(--yj-bg-alt, #f4f3ef);
}

.yo-ethos-item h4 {
  font-family: var(--yj-font-heading, Tahoma, Arial, Helvetica, sans-serif);
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
  margin: 0;
  color: #ffffff;
}

.yo-ethos-design h4  { background: var(--yo-hd-philosophies); }
.yo-ethos-eng h4     { background: var(--yo-hd-recommended); }
.yo-ethos-content h4 { background: var(--yo-hd-faq); }

.yo-ethos-item p {
  padding: 8px;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}


/* ========================================================================== */
/*  FAQ                                                                       */
/* ========================================================================== */

.yo-faq dl {
  margin: 0;
}

.yo-faq dt {
  font-weight: bold;
  font-size: 12px;
  padding: 5px 0 2px 0;
  color: var(--yj-text, #333333);
}

.yo-faq dd {
  margin: 0 0 0 12px;
  padding: 0 0 6px 0;
  border-bottom: 1px dotted var(--yj-border-light, #e0e0e0);
  font-size: 12px;
  line-height: 1.5;
}

.yo-faq dd:last-child {
  border-bottom: none;
}


/* ========================================================================== */
/*  BACK TO TOP                                                               */
/* ========================================================================== */

.yo-back-to-top {
  text-align: right;
  padding: 6px 0;
  font-family: var(--yj-font, 'MS PGothic', Arial, Helvetica, sans-serif);
  font-size: 11px;
}

.yo-back-to-top a {
  color: var(--yj-link, #0033cc);
  text-decoration: none;
}

.yo-back-to-top a:hover {
  text-decoration: underline;
}

.yo-faq dt:nth-of-type(even),
.yo-faq dd:nth-of-type(even) {
  background: var(--yj-bg-alt, #f4f3ef);
  margin-left: 0;
  padding-left: 8px;
  padding-right: 8px;
  margin-right: -8px;
  margin-left: -8px;
}

.yo-faq dt:nth-of-type(even) {
  padding-left: 8px;
}

.yo-faq dd:nth-of-type(even) {
  padding-left: 20px;
}


/* ========================================================================== */
/*  SITE MAP TABLE                                                            */
/* ========================================================================== */

.yo-sitemap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.yo-sitemap-table th {
  text-align: left;
  padding: 4px 8px;
  background: var(--yj-bg-alt, #f4f3ef);
  border: 1px solid var(--yj-border, #cccccc);
  font-family: var(--yj-font-heading, Tahoma, Arial, Helvetica, sans-serif);
  font-size: 11px;
  font-weight: bold;
  color: var(--yj-text-muted, #666666);
}

.yo-sitemap-table td {
  padding: 4px 8px;
  border: 1px solid var(--yj-border-light, #e0e0e0);
  vertical-align: top;
}

.yo-sitemap-table tr:nth-child(even) td {
  background: var(--yj-bg-alt, #f4f3ef);
}

.yo-sitemap-table td:first-child {
  white-space: nowrap;
  font-weight: bold;
  width: 80px;
}

.yo-sitemap-table td:nth-child(2) {
  white-space: nowrap;
  font-size: 11px;
  color: var(--yj-text-muted, #666666);
  width: 120px;
}


/* ========================================================================== */
/*  CHANGELOG                                                                 */
/* ========================================================================== */

.yo-changelog ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.yo-changelog li {
  padding: 4px 0;
  border-bottom: 1px dotted var(--yj-border-light, #e0e0e0);
  font-size: 12px;
  line-height: 1.5;
}

.yo-changelog li:last-child {
  border-bottom: none;
}

.yo-changelog li:nth-child(even) {
  background: var(--yj-bg-alt, #f4f3ef);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
}

.yo-changelog-date {
  font-size: 10px;
  color: var(--yj-text-light, #999999);
  margin-right: 6px;
  font-family: 'Courier New', Courier, monospace;
}

.yo-changelog-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: bold;
  padding: 0 4px;
  margin-right: 4px;
  vertical-align: middle;
}

.yo-tag-new {
  background: #cc0000;
  color: #ffffff;
}

.yo-tag-update {
  background: var(--yo-hd-recommended, #2a5599);
  color: #ffffff;
}


/* ========================================================================== */
/*  SITE STATISTICS TABLE                                                     */
/* ========================================================================== */

.yo-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.yo-stats-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--yj-border-light, #e0e0e0);
  vertical-align: top;
}

.yo-stats-table tr:nth-child(even) {
  background: var(--yj-bg-alt, #f4f3ef);
}

.yo-stats-table tr:last-child td {
  border-bottom: none;
}

.yo-stats-label {
  width: 100px;
  font-weight: bold;
  color: var(--yj-text-muted, #666666);
  white-space: nowrap;
  font-size: 11px;
}


/* ========================================================================== */
/*  RESPONSIVE                                                                */
/* ========================================================================== */

@media (max-width: 700px) {
  .yo-layout {
    flex-direction: column;
    gap: 6px;
    padding: 0 6px;
  }

  .yo-col-side {
    width: 100%;
    order: 2;
  }

  .yo-col-main {
    width: 100%;
    order: 1;
  }

  .yo-sidebar-nav {
    position: static;
  }

  .yo-link-grid {
    flex-direction: column;
  }

  .yo-link-card {
    flex: 1 1 100%;
  }

  .yo-ethos-grid {
    flex-direction: column;
  }

  .yo-category-header {
    padding: 8px 6px 4px 6px;
  }

  .yo-category-title {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .yo-section-bd {
    padding: 6px;
  }

  .yo-subcategory h3 {
    font-size: 12px;
  }

  .yo-sitemap-table td:nth-child(2) {
    display: none;
  }

  .yo-stats-label {
    width: 80px;
  }
}