/* 
 * SMKRUIGO Scoped Stylesheet
 * Comprehensive styles for Dictionary Entries, Menus, and Hanrei (Explanatory Notes).
 * Adapted for horizontal layout.
 */

/* Root Containers */
.body_v,
.body_h {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    line-height: 1.5em;
    background-color: #fff;
}

/* --- Category / Menu Page Layout --- */
.body_v .main-container,
.body_h .main-container,
.body_v .genre1-container,
.body_h .genre1-container,
.body_v .genre2-container,
.body_h .genre2-container,
.body_v .genre3-container,
.body_h .genre3-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: 1px solid antiquewhite;
    color: antiquewhite;
    background-color: brown;
    font-weight: bold;
    margin: 0.5em 0;
    padding: 5px;
}

.body_v .main-title,
.body_h .main-title,
.body_v .genre1-title,
.body_h .genre1-title,
.body_v .genre2-title,
.body_h .genre2-title,
.body_v .genre3-title,
.body_h .genre3-title {
    font-size: 1em;
    margin: 5px 10px;
    color: antiquewhite;
}

.body_v .items-container,
.body_h .items-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background-color: #fdf5e6;
    /* antiquewhite light */
    padding: 10px;
    border: 1px solid brown;
}

.body_v .items-container a,
.body_h .items-container a {
    color: #fff;
    text-decoration: none;
}

.body_v .menu_item,
.body_h .menu_item,
.body_v .item_link,
.body_h .item_link {
    margin: 2px;
    padding: 4px 10px;
    border-radius: 4px;
    background-color: saddlebrown;
    display: inline-block;
}

.body_v .menu_item::after,
.body_h .menu_item::after {
    content: ' 〉';
    font-size: 0.8em;
}

.body_v .menu_title,
.body_h .menu_title {
    font-size: 1em;
    font-weight: bold;
    color: brown;
    border-bottom: 2px solid brown;
}

/* --- Dictionary Entry Styles --- */
.body_v .item,
.body_h .item {
}

.body_v .item_midashi,
.body_h .item_midashi {
    font-weight: bold;
    font-size: 1em;
    /* saddlebrown */
}

.body_v .priP .item_midashi,
.body_h .priP .item_midashi {
    font-weight: bold;
    font-size: 1em;
    color: #8b4513;
    /* saddlebrown */
}

.body_v .item_body,
.body_h .item_body {
    margin-left: 1rem;
}

.body_v .gogi,
.body_h .gogi {
}

.body_v .gogi:has(.gogi_num),
.body_h .gogi:has(.gogi_num) {
    display: block;
}

.yr_item {
    display: block;
    margin-left: 0.5rem;
    color: grey;
}

.warn .yr_item {
    display: inline !important;
    margin-left: 0rem !important;
    color: inherit !important;
}

/* --- Appendix / Hanrei Styles (style_Hanrei.css) --- */
.body_v .midashi_info_appendix,
.body_h .midashi_info_appendix {
    padding: 10px;
    margin: 1em 0;
    background-color: #f8f8f8;
    border-left: 5px solid brown;
    font-size: 1em;
    font-weight: bold;
}

.body_v .title,
.body_h .title {
    font-size: 1.5em;
    font-weight: bold;
    margin: 1em 0;
    text-align: center;
}

.body_v .midashi,
.body_h .midashi {
    font-size: 1.2em;
    font-weight: bold;
    margin: 1em 0 0.5em 0;
    border-bottom: 1px solid #ccc;
}

.body_v .komidashi,
.body_h .komidashi {
    font-weight: bold;
    margin: 0.8em 0 0.4em 0;
    color: brown;
}

.body_v .examples,
.body_h .examples {
    margin: 1em 0 1em 2em;
    border-left: 2px solid #eee;
    padding-left: 10px;
}

.body_v .sho-midashi,
.body_h .sho-midashi {
    font-weight: bold;
    margin: 1.5em 0 0.5em 0;
    padding-top: 1em;
    border-top: 1px dotted brown;
}

.body_v .para,
.body_h .para,
.body_v .sub-para,
.body_h .sub-para {
    margin: 0.8em 0;
}

.body_v .para-right,
.body_h .para-right {
    text-align: right;
}

/* Common Classes found in HTML but missing in CSS */
.body_v .gyou,
.body_h .gyou {
    margin: 0.4em 0;
}

.body_v .marginleft2em,
.body_h .marginleft2em {
    margin-left: 20px;
    /* Consistent indentation */
}

/* --- Typography & Symbols --- */
.body_v ruby,
.body_h ruby {
    ruby-position: over;
}

.body_v rt,
.body_h rt {
    font-size: 0.6em;
    color: black;
}

.body_v .tate,
.body_h .tate {
    display: inline-block;
}

.body_v .kg_pos_1,
.body_h .kg_pos_1 {
    display: inline;
    padding: 0.2em 0.35em;
    margin-right: 0.5em;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 3px;
    background-color: #eee;
    font-size: 0.85em;
}

/* --- Images --- */
.body_v img:not(.svg_gaiji),
.body_h img:not(.svg_gaiji) {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px 0;
}

.body_v .imgcut_group,
.body_h .imgcut_group {
    text-align: center;
}

/* --- Highlights --- */
.body_v .priP,
.body_h .priP {
    /* lightyellow */
}

@media (prefers-color-scheme: dark) {

    .body_v,
    .body_h {
        background-color: #1a1a1a;
        color: #ddd;
    }

    .body_v .items-container,
    .body_h .items-container {
        background-color: #2a2a2a;
        border-color: #444;
    }

    .body_v .midashi_info_appendix,
    .body_h .midashi_info_appendix {
        background-color: #222;
        border-color: #d2691e;
        /* chocolate */
    }

    .body_v .priP,
    .body_h .priP {
        background-color: #44402a;
    }
}

rt {
    -webkit-user-select: none;
}

.menu_group a {
	color: black;
	text-decoration: none;
}
.menu_group a:hover,.menu_group a:focus,.menu_group a:active {
	color: black;
}

.gr0 {
    padding-bottom: 0.5rem;
}

.priN {
    margin-left: 1rem;
    display: block;
}

.refTd {
    margin-left: 1.5em;
    display: block;
}

table {
    border-spacing: 0em;
}

.menu_group {
    font-size: 0.8em;
    border-style: solid;
    border-radius: 0.4em;
    border-width: 1px;
    padding: 0em 0.5rem;
    display: inline-block;
    margin-bottom: 0.2rem;
}

.menu_group .sp {
    padding: 0em 0.3em;
}


a.bunref_item, a.refItem, a.ref_item  {
	color: #5066d4;
	text-decoration: none;
}
a.bunref_item:hover, a.bunref_item:focus, a.bunref_item:active,
a.refItem:hover, a.refItem:focus, a.refItem:active,
a.ref_item:hover, a.ref_item:focus, a.ref_item:active {
	color: #e4671b;
}

img.svg_gaiji {
  height: 1em;
  width: auto;
  vertical-align: middle;
}

.mj_ruby_body {
    font-size: 0.7em;
    font-weight: normal;
    vertical-align: 0.5em;
    -webkit-user-select: none;
}

.mj_ruby_body::after {
    content: ")";
}

.mj_ruby_body::before {
    content: "(";
}

span.imgref_group {
    display: block;
}

.warn {
    display: block;
}

.ant_group {
    display: block;
}

.idk_group, .iji_group, .iki_group, .ryk_group {
    display: block;
}

.fraction {
    margin:
    display: inline-flex;
    flex-direction: column;
    align-items: center;

    line-height: 1;
    vertical-align: middle;
    font-size: 0.9em;
    margin: 0em 0.2em;
}

.numerator {
    display: block;
}

.bar {
    display: flex;
    flex-direction: column;
    align-items: center;

    border-top: 1px solid currentColor;
    margin-top: 0.08em;
    padding-top: 0.08em;

    min-width: 1em;
}

.denominator {
    display: block;
}

.gogi_num {
    margin: 0em 0.2em;
}

.yr_item .warn {
    display: inline-block !important;
}

.priP .item_body {
    border-left-style: solid;
    border-width: 1px;
    padding-left: 0.5rem;
    padding-bottom: 0.5rem;
    background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0.5em 1px;
}