.app,
body,
html {
    height: 100%;
    width: 100%;
}

:root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

body {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

input,
textarea,
select,
[contenteditable=""],
[contenteditable="true"],
[data-allow-selection="true"] {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
}

html {
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
}

.app {
    margin: 0 auto;
    width: 100%;
    max-width: var(--app-max-width);
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    position: relative;
    border: 1px solid var(--border);
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    display: flex;
    flex-direction: column;
}

.app-content {
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    padding-bottom: calc(2.6rem + var(--safe-bottom));
}

.app-content > * {
    max-width: 100%;
}

.nav-item {
    flex: 1;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: var(--nav-font);
}

.nav-item.nav-icon {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item.nav-icon img {
    width: 1.6rem;
    height: 1.6rem;
}

.nav-item.is-active {
    background: #e91e63;
}

.menu-bar {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: var(--app-max-width);
    bottom: 0;
    height: calc(2.6rem + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    border-top: 1px solid var(--border);
    background: #006494;
    box-sizing: border-box;
    z-index: 1000;
}

@media (max-width: 440px) {
    .menu-bar {
        max-width: 100%;
    }

    .app {
        max-width: 100%;
        margin: 0;
        border-left: 0;
        border-right: 0;
    }
}

.menu-main,
.menu-table {
    width: 100%;
    height: 2.6rem;
}

.menu-table {
    border-collapse: collapse;
}

.menu-cell {
	height: 2.6rem;
	line-height: 2.6rem;
	font-size: 1.5rem;
	background-color: #006494;
	color: #fff;
	text-align: center;
	border-left: 2px solid #fff;
	cursor: pointer;
}

.menu-cell.nav-item {
    display: table-cell;
    flex: none;
    padding: 0;
}

.menu-cell.nav-icon {
    display: table-cell;
    padding: 0;
}

.menu-first {
    border-left: 0;
}

.menu-icon {
    width: 2.6rem;
}

.menu-icon img,
.menu-cell.nav-icon img {
    width: 1.8rem;
    height: 1.8rem;
    vertical-align: middle;
}

.menu-hyun {
    background-color: #e91e63;
}

.menu-sublist {
    background-color: #2497e3;
}

.menu-cell.nav-item.is-active {
	background-color: #006494;
	color: #fff;
}

.menu-cell.menu-hyun.nav-item.is-active {
	background-color: #e91e63;
	color: #fff;
}

.menu-textbook {
    background-color: #fff;
}

.submenu-search {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(2.6rem + var(--safe-bottom));
    background-color: #fff;
    z-index: 3;
}

.submenu-textbook {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(2.6rem + var(--safe-bottom));
    background-color: #fff;
    z-index: 3;
    width: 100%;
}

.submenu-textbook.hidden {
    display: none;
}

.disp-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(2.6rem + var(--safe-bottom));
    height: 2.6rem;
    background-color:rgba(255, 255, 255, 0.9);
    z-index: 3;
    border-top: 1px solid #ccc;
}

.disp-menu.hidden {
    display: none;
}

.disp-menu-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 0.4rem;
    box-sizing: border-box;
}

.disp-menu-group {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.disp-menu-item {
    width: 2.6rem;
    height: 2.6rem;
    background-color: #2497e3;
    padding: 0.2rem;
    border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
}

.disp-menu-item img {
    width: 100%;
    height: 100%;
}

#in-saju,
#up-saju {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(2.6rem + var(--safe-bottom));
    background-color: #fff;
    z-index: 4;
    border-top: 1px solid #ccc;
    padding: 0.4rem 0.6rem;
    box-sizing: border-box;
}

#in-saju.hidden,
#up-saju.hidden {
    display: none;
}

#in-saju table,
#up-saju table {
    width: 100%;
}

#in-saju td,
#up-saju td {
    padding: 0.2rem 0;
}

#in-saju .name input,
#in-saju .note textarea,
#up-saju .name input,
#up-saju .note textarea {
    width: 100%;
    font-size: 1rem;
    padding: 0.3rem;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#in-saju .note textarea,
#up-saju .note textarea {
    height: 15rem;
    resize: vertical;
}

#in-saju input[type="submit"],
#in-saju input[type="button"],
#up-saju input[type="submit"],
#up-saju input[type="button"] {
    background-color: #03a9f4;
    border-radius: 0.2em;
    border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
    font-size: 1rem;
    width: 3rem;
    line-height: 1.9rem;
    height: 1.8rem;
    color: white;
}

.day-pillar-popup-backdrop {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(2.6rem + var(--safe-bottom));
    z-index: 4;
    padding: 0;
    box-sizing: border-box;
    pointer-events: none;
}

.day-pillar-popup-backdrop.is-global {
    position: fixed;
}

.time-pillar-popup-backdrop {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(2.6rem + var(--safe-bottom));
    z-index: 4;
    padding: 0;
    box-sizing: border-box;
    pointer-events: none;
}

.time-pillar-popup-backdrop.is-global {
    position: fixed;
}

.day-pillar-popup {
    width: 100%;
    max-width: none;
    background: #fff;
    border-top: 1px solid #ccc;
    overflow: hidden;
    pointer-events: auto;
}

.time-pillar-popup {
    width: 100%;
    max-width: none;
    background: #fff;
    border-top: 1px solid #ccc;
    overflow: hidden;
    pointer-events: auto;
}

.day-pillar-popup-meta {
    font-size: 1.1rem;
    font-weight: 500;
    color: #555;
    white-space: nowrap;
}
.day-pillar-popup-meta-row {
    min-height: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.15rem 0.3rem 0.05rem;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
}

.pillar-popup-close-btn {
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    background: transparent;
    color: #333;
    line-height: 1.5rem;
    font-size: 1rem;
    text-align: center;
    padding: 0;
    margin-right: -0.1rem;
    cursor: pointer;
}

.day-pillar-popup-table {
    width: 100%;
    border-collapse: collapse;
}

.day-pillar-popup-table td {
    width: 16.66%;
    border: 1px solid #ccc;
    padding: 0;
}

.day-pillar-popup-empty {
    background: #f7f7f7;
}

.day-pillar-popup-item {
    width: 100%;
    border: 0;
    background: #fff;
    padding: 0.25rem 0.1rem 0.3rem;
    cursor: pointer;
}

.time-pillar-popup-item {
    width: 100%;
    border: 0;
    background: #fff;
    padding: 0.25rem 0.1rem 0.3rem;
    cursor: pointer;
}

.day-pillar-popup-item.is-selected {
    background: #dbfbff;
    color: inherit;
}

.time-pillar-popup-item.is-selected {
    background: #dbfbff;
    color: inherit;
}

.time-pillar-popup-item.is-disabled {
    background: #f2f2f2;
    color: #b8b8b8;
    cursor: default;
    pointer-events: none;
}

.time-pillar-popup-item.is-disabled .result-hidden-stem {
    background: #f2f2f2 !important;
    color: #b8b8b8;
    border-color: #d8d8d8;
}

.time-pillar-popup-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 0.78rem;
    line-height: 0.9rem;
}

.day-pillar-popup-day {
    font-size: 0.85rem;
    line-height: 1rem;
    font-weight: 700;
}

.day-pillar-popup-day.is-terms-day {
    color: #E91E63;
}

.day-pillar-popup-term {
    font-size: 0.72rem;
    line-height: 0.9rem;
    min-height: 0.9rem;
    color: #666;
}

.day-pillar-popup-gan,
.day-pillar-popup-jee {
    font-size: 1.9rem;
    line-height: 2rem;
}

.day-pillar-popup-gan.result-hidden-stem,
.day-pillar-popup-jee.result-hidden-stem {
    width: 1.9rem;
}

#sajuList {
    width: 100%;
    border-bottom: 1px solid #ccc;
}

#sajuList td {
    height: 2rem;
    line-height: 2rem;
    background-color: #ffffff;
    font-size: 1rem;
    text-align: center;
    border: none;
}

#sajuList tr.title td {
    height: 2rem;
    line-height: 2rem;
    font-size: 1.1rem;
    color: white;
    background-color: #006494;
}

#sajuList .date-member td {
    cursor: pointer;
}

#sajuList .date-member:hover td {
    background-color: #f0f0f0;
}

.textbook-gan-list {
    width: 100%;
    border-collapse: collapse;
}

.textbook-gan-list td {
    font-size: 1.5rem;
    height: 2.9rem;
    line-height: 2.9rem;
    text-align: center;
    background-color: #dbfbff;
    border: solid 1px #ccc;
    cursor: pointer;
}

.textbook-gan-list td:hover {
    background-color: #b3e5fc;
}

.ganjee-result-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.1rem;
}

.ganjee-result-table td {
    height: 2rem;
    line-height: 2rem;
    background-color: #ffffff;
    font-size: 1rem;
    text-align: center;
    border: 1px solid #ccc;
    cursor: pointer;
}

.ganjee-result-table tr:hover td {
    background-color: #f0f0f0;
}

.hidden {
    display: none;
}

.search-panel {
    display: none;
}

.search-panel.is-active {
    display: block;
}

.ganjee-menu {
    display: none;
    width: 100%;
}

.ganjee-menu.is-active {
    display: block;
}

.ganjee-menu td {
    font-size: 1.5rem;
    height: 2.9rem;
    line-height: 2.9rem;
    text-align: center;
}

.ganjee-menu td.is-selected {
    background-color: #FF9800;
    color: #fff;
}

.ganjee-menu td.is-hidden {
    display: none;
}

.gan-list td {
    background-color: #dbfbff;
}

.jee-list td {
    background-color: #fff9e5;
}

.search-menu {
    display: flex;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
}

.search-tabs,
.search-grid,
.search-toggle {
    width: 100%;
    border-collapse: collapse;
}

.search-tab {
    height: 2.2rem;
    font-size: 1.1rem;
    text-align: center;
    border-top: 1px solid #000;
    border-left: 1px solid #ccc;
    background-color: #fff;
}

.search-tab.is-last {
    border-right: 0;
}

.search-tab.is-active {
    background-color: #FF9800;
    color: #fff;
}

.search-tab.is-active.is-blue {
    background-color: #006494;
}

.search-grid td {
    height: 2.2rem;
    font-size: 1.1rem;
}

.search-input {
    font-size: 1.1rem;
    text-align: center;
    height: 2.2rem;
    width: 100%;
}

.search-year {
    width: 4.4rem;
}

.search-month,
.search-day {
    width: 2.2rem;
}

.search-time-input {
    width: 7.9rem;
    text-align: center;
    background-color: #fff;
}

.search-input-cell {
    border-right: 0;
}

.search-toggle-cell {
    text-align: center;
    border: 0;
}

.search-toggle tr,
.search-toggle td {
    border: 0;
}

.search-toggle-cell.is-active {
    background-color: #FF9800;
    color: #fff;
}

.search-submit {
    background-color: #03a9f4;
    text-align: center;
}

.search-submit input {
    width: 100%;
    height: 2.2rem;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.calendar-table,
.calendar-toggle {
    width: 100%;
    border-collapse: collapse;
}

.calendar-table td {
    height: 2.2rem;
    font-size: 1.1rem;
    text-align: center;
    border: 1px solid #ccc;
}

.calendar-input {
    width: 100%;
    height: 2.2rem;
    border: 0;
    text-align: center;
    background: transparent;
    font-size: 1.1rem;
}

.calendar-cell.is-selected {
    background-color: #ff980036;
}

.calendar-table td.is-active {
    background-color: #FF9800;
    color: #fff;
}

.calendar-table td.is-active .calendar-input {
    color: #fff;
}

.calendar-cell.is-active {
    background-color: #FF9800;
    color: #fff;
}

.calendar-cell.is-active .calendar-input {
    color: #fff;
}

.calendar-input-cell {
    border-right: 0;
}

.calendar-toggle td,
.calendar-toggle tr {
    border: 0;
}

.sex-toggle-cell {
    text-align: center;
}

.sex-toggle-cell.is-active {
    background-color: #FF9800;
    color: #fff;
}

.calendar-submit {
    background-color: #03a9f4;
}

.calendar-submit input {
    width: 100%;
    height: 2.2rem;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.search-toggle-hidden {
    height: 0;
    padding: 0;
    border: 0;
}

.app-submenu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--nav-height);
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid var(--border);
    padding: 0;
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.08);
}

.saju-form {
    margin: 0;
}

.saju-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    text-align: center;
    border: 1px solid var(--border);
    background: #fff;
}

.saju-table th,
.saju-table td {
    border: 1px solid var(--border);
    height: 2.2rem;
    padding: 0;
    font-size: 0.95rem;
}

.tab-cell {
    padding: 0;
}

.tab-group {
    display: flex;
    width: 100%;
    height: 100%;
}

.tab-button {
    flex: 1;
    height: 100%;
    border: 0;
    background: #fff;
    color: #111;
    font-weight: 600;
    cursor: pointer;
}

.tab-button.is-active {
    background: #006494;
    color: #fff;
}

.menu-panel {
    display: none;
}

.menu-panel.is-active {
    display: block;
}

.menu-empty {
    text-align: center;
    padding: 0.8rem 0;
    color: var(--muted);
}

.origin-select {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fbe7c9;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

.origin-select:disabled {
    cursor: default;
    opacity: 0.7;
}

.origin-select.is-selected {
    background: #ffa000;
    color: #fff;
}

.origin-select:empty::after {
    content: "";
}

.origin-picker-inline {
    display: none;
    border-bottom: 1px solid var(--border);
    background: #d8f1f7;
}

.origin-picker-inline.is-active {
    display: block;
}

.origin-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.origin-picker-grid .picker-item {
    border: 1px solid var(--border);
    background: #d8f1f7;
    padding: 0.4rem 0;
    font-size: 1rem;
    cursor: pointer;
}

.origin-picker-grid .picker-item.is-selected {
    background: #ffa000;
    color: #fff;
}

.table-input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    text-align: center;
    font-size: 0.95rem;
    background: transparent;
}

.table-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    height: 100%;
    padding: 0 0.4rem;
}

.table-inline .table-input {
    width: 4.5rem;
    height: 100%;
    border-bottom: 0;
}

.table-inline .table-input.year-input {
    width: 4.4rem;
}

.table-inline .table-input.month-input,
.table-inline .table-input.day-input {
    width: 2.2rem;
}

.table-inline .table-input.time-input {
    width: 8rem;
}

.table-unit {
    font-size: 0.85rem;
    color: var(--muted);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.toggle-cell {
    padding: 0;
}

.toggle-group {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
}

.toggle-group .toggle-button {
    flex: 1;
    height: 100%;
}

.toggle-button {
    width: 100%;
    height: 100%;
    border: 0;
    background: #f3f4f6;
    font-weight: 600;
    cursor: pointer;
    display: block;
    margin: 0;
    border-radius: 0;
}

.toggle-button.is-active {
    background: #f59e0b;
    color: #fff;
}

.submit-cell {
    padding: 0;
}

.submit-cell .primary {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.list-form {
    margin: 0;
}

.list-form-table {
    width: 100%;
    border-collapse: collapse;
}

.list-form-table td {
    border: 0;
    padding: 0;
}

.list-form-input {
    width: 100%;
    height: 1.8rem;
    line-height: 1.8rem;
    font-size: 1rem;
    text-align: center;
    border: 0;
    background: transparent;
}

.list-form-fields {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.list-form-field-keyword {
    flex: 1 1 auto;
    min-width: 0;
}

.list-form-field-month {
    flex: 0 0 6.6rem;
    min-width: 6.6rem;
}

.list-form-input-month {
    text-align: center;
}

.list-form-month-picker {
    position: relative;
}

.list-form-month-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.list-form-month-display {
    cursor: pointer;
}

.list-form-submit {
    background-color: #03a9f4;
    border-radius: 0.2rem;
    font-size: 1rem;
    width: 3rem;
    line-height: 1.9rem;
    height: 1.8rem;
    color: #ffffff;
    border: 0;
    cursor: pointer;
}

.list-table {
    width: 100%;
    border-collapse: collapse;
    border-bottom: 0.0625rem solid #ccc;
}

.list-table tr {
    border-top: 0.0625rem solid #ccc;
}

.list-table td {
    height: 2rem;
    line-height: 2rem;
    background-color: #ffffff;
    font-size: 1rem;
    text-align: center;
}

.list-table td:not(:last-child) {
    border-right: 0.0625rem solid #ccc;
}

.list-header td {
    height: 2rem;
    line-height: 2rem;
    font-size: 1.1rem;
    color: #ffffff;
    background-color: #006494;
}

.list-link-icon {
    width: 1rem;
    height: auto;
}

table.link-table {
    border-bottom: 0.0625rem solid #ccc;
    margin-bottom: 0.2rem;
}

table.link-table tr.title td {
    color: #fff;
    background-color: #006494;
    font-size: 1.1rem;
}

table.link-table td {
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
    text-align: center;
    overflow: hidden;
}

table.link-table td.relation {
    padding: 0;
}

#link-list .selected {
    background-color: #03a9f4;
}

#link-list .selected td {
    color: #fff;
}

#link-list .selected.iam {
    background-color: #ff8f86;
}

#link-search-list .selected {
    background-color: #03a9f4;
}

#link-search-list .selected td {
    color: #fff;
}

#link-search-list .selected.iam {
    background-color: #ff8f86;
}

#link-search {
    margin-top: 1rem;
    line-height: 2.5rem;
    border-bottom: 0.0625rem solid #ccc;
    border-top: 0.0625rem solid #ccc;
}

#link-search input {
    font-size: 1.1rem;
    text-align: center;
    height: 2.2rem;
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
}

#link-list select {
    width: 100%;
    height: 2rem;
    font-size: 1rem;
    text-align: center;
    background: transparent;
    border: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 1.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%23666' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    line-height: 2rem;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
    max-height: 2rem;
    display: block;
}

#link-list td.relation,
#link-search-list td.relation {
    padding: 0;
}

table.link-table td img.link-icon {
    margin: 0 auto;
}

#up-link input[type="submit"],
#link-search input[type="submit"] {
    background-color: #03a9f4;
    border-radius: 0.2rem;
    font-size: 1rem;
    width: 3rem;
    line-height: 1.9rem;
    height: 1.8rem;
    color: #ffffff;
    border: 0;
    cursor: pointer;
}

.link-icon {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    vertical-align: middle;
}

.link-icon.is-hidden {
    visibility: hidden;
}

/* 화면7(Oju) */
#oju-table {
    border-bottom: 0.0625rem solid #ccc;
}

#oju-table td {
    height: 1.8rem;
}

#oju-table img.next-prev {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
}

td#odate input {
    font-size: 1.2rem;
    height: 2rem;
    width: 100%;
    text-align: center;
    border: 0;
    background: transparent;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.panel-title {
    margin: 0 0 0.4rem 0;
    font-size: 1.1rem;
}

.panel-desc {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    padding: 0;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(135deg, #e0f2fe, #fce7f3);
    border: none;
}

.hero-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.meta-badge {
    background: #fff;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.text-button {
    border: none;
    background: transparent;
    color: var(--primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.form {
    display: grid;
    gap: 0.9rem;
}


.form-row {
    display: grid;
    gap: 0.5rem;
}

.form-label {
    font-size: 0.9rem;
    color: var(--muted);
}

.form-inline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.form-input {
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    font-size: 0.95rem;
}

.chip-group {
    display: flex;
    gap: 0.4rem;
}

.chip {
    flex: 1;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 0.6rem;
    padding: 0.5rem 0;
    font-size: 0.95rem;
}

.chip.is-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.primary {
    border: 0;
    background: var(--primary);
    color: #fff;
    border-radius: 0.7rem;
    padding: 0.7rem 1rem;
    font-size: 1rem;
    cursor: pointer;
}


.chart-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0.35rem 0.35rem;
    margin: 0;
}

.saju-ganjee {
    align-items: center;
    box-shadow: 1px 1px 2px 1px #9f9f9f;
    width: 3.9rem;
    line-height: 4rem;
    height: 4rem;
    font-size: 3.3rem;
    padding: 0rem;
    border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -webkit-text-stroke-width: 1px;
}

.saju-display-table td {
    height: 4.4rem;
    padding: 0;
}

.saju-habchung {
    height: 1.1rem;
    line-height: 1.1rem;
    font-size: 0.8rem;
    bottom: 0.9rem;
    position: relative;
}

.saju-hc {
    display: inline-block;
    margin: 0 -1px;
}

.saju-hc-hyeong {
    color: #959595;
}

.saju-element-wood {
    background-color: #E1FCDF;
}

.saju-element-fire {
    background-color: #FADFE1;
}

.saju-element-earth {
    background-color: #FCFAE5;
}

.saju-element-metal {
    background-color: #FAFAFA;
}

.saju-element-water {
    background-color: #DADADA;
}

.chart-table td {
    padding: 0;
}

.chart-col {
    border: 1px solid #e5e7eb;
    border-radius: 0.45rem;
    padding: 0.25rem 0.15rem;
    text-align: center;
    background: #ffffff;
    vertical-align: middle;
}

.ten-cell {
    font-size: 0.82rem;
    font-weight: 700;
    color: #000000;
    background: #EAEDF2;
    padding: 0.2rem 0;
    position: relative;
    min-height: 1.4rem;
}

.ten-dot {
    color: #EA1D24;
    font-size: 0.7rem;
}


.ten-cell-bottom {
    background: #EAEDF2;
    color: #000000;
    font-size: 0.65rem;
    padding: 0.18rem 0;
}

.chart-col.is-active {
    background: #ffffff;
    box-shadow: none;
}

.ten-cell.is-active {
    background: #EAEDF2;
}

.chart-label {
    font-size: 0.8rem;
    color: var(--muted);
}

.chart-cell {
    font-size: 1.9rem;
    font-weight: 700;
    border-radius: 0.45rem;
    padding: 0.35rem 0;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
    position: relative;
}

.ganjee {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 1px 2px 1px #9f9f9f;
    width: 3.9rem;
    height: 4rem;
    line-height: 4rem;
    font-size: 3.3rem;
    padding: 0;
    border-radius: 0.5rem;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    -webkit-text-stroke-width: 1px;
}

.ganjee-gan {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.ganjee-ji {
    background: #fff7ed;
    border-color: #fed7aa;
}

.ganjee-value {
    line-height: 1;
}

.ganjee-markers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    line-height: 1;
    font-size: 0.75rem;
    margin-top: -0.3rem;
}

.ganjee-marker-dot {
    color: #111827;
    font-size: 0.6rem;
}

/* 화면7(Oju) - ojoTable(현괘) 표시 영역 */
.app-content table.ojuTable {
    width: 100%;
}

.app-content table.ojuTable tr {
    border-top: solid 1px #ccc;
}

.app-content table.ojuTable td:not(:last-child),
.app-content table.ojuTable th:not(:last-child) {
    border-right: solid 1px #ccc;
}

.app-content table.ojuTable td,
.app-content table.ojuTable th {
    text-align: center;
}

.app-content table.ojuTable td {
    height: 4.4rem;
}

.app-content table.ojuTable div {
    margin: 0 auto;
}

.app-content table.ojuTable div.ganjee {
    display: block;
    box-shadow: 1px 1px 2px 1px #9f9f9f;
    width: 3.9rem;
    line-height: 4rem;
    height: 4rem;
    font-size: 3.3rem;
    padding: 0rem;
    position: relative;
    border-radius: 0.5rem;
    -webkit-text-stroke-width: 1px;
    border: none;
    background-color: transparent;
}

/* 오행 배경색(현괘) - ojuTable 범위로 제한 */
.app-content table.ojuTable .甲,
.app-content table.ojuTable .乙,
.app-content table.ojuTable .寅,
.app-content table.ojuTable .卯 {
    background-color: #E1FCDF !important;
}

.app-content table.ojuTable .丙,
.app-content table.ojuTable .丁,
.app-content table.ojuTable .巳,
.app-content table.ojuTable .午 {
    background-color: #FADFE1 !important;
}

.app-content table.ojuTable .戊,
.app-content table.ojuTable .己,
.app-content table.ojuTable .丑,
.app-content table.ojuTable .戌,
.app-content table.ojuTable .辰,
.app-content table.ojuTable .未 {
    background-color: #FCFAE5 !important;
}

.app-content table.ojuTable .庚,
.app-content table.ojuTable .辛,
.app-content table.ojuTable .申,
.app-content table.ojuTable .酉 {
    background-color: #FAFAFA !important;
}

.app-content table.ojuTable .壬,
.app-content table.ojuTable .癸,
.app-content table.ojuTable .亥,
.app-content table.ojuTable .子 {
    background-color: #DADADA !important;
}


.chart-cell.is-gan {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.hidden-stems {
    margin-top: 0.25rem;
    display: flex;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
    font-size: 0.75rem;
    color: #111827;
    line-height: 1;
}

.hidden-stem {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.15rem 0.25rem;
    border-radius: 0.35rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    color: #111827;
    text-align: center;
    min-width: 1.7rem;
}

.hidden-stem-char {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
}

.hidden-stem-ten {
    display: block;
    font-size: 0.6rem;
    color: #111827;
    margin-top: 0.08rem;
}

.chart-cell.is-jee {
    background: #fff7ed;
    border-color: #fed7aa;
}

.gan-dot {
    position: absolute;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #111;
    bottom: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
}

.ji-value {
    line-height: 1;
}

.ji-marker-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.18rem;
    margin-top: 0.1rem;
    line-height: 1;
}

.ji-marker {
    font-size: 0.75rem;
}

.ji-marker-plain {
    color: #959595;
}

.ten-label {
    text-align: center;
    font-size: 0.78rem;
    color: #111827;
    margin-bottom: 0.1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.08rem 0.4rem;
    border-radius: 0.35rem;
    background: #f3f4f6;
}

.ten-label-day {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.day-marker {
    color: #EA1D24;
    font-size: 0.65rem;
    line-height: 1;
}

.ten-label-bottom {
    margin-top: 0.15rem;
    margin-bottom: 0;
    padding: 0.05rem 0.35rem;
    border-radius: 0.3rem;
    background: #2563eb;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chart-sub {
    font-size: 0.8rem;
    color: var(--muted);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

.tag {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    background: #f3f4f6;
    border-radius: 999px;
    border: 1px solid var(--border);
}

.tag.is-accent {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

.scroll-x {
    overflow-x: auto;
    display: grid;
    gap: 0.4rem;
}

.grid-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(3rem, 1fr);
    gap: 0.4rem;
}

.grid-cell {
    text-align: center;
    padding: 0.4rem 0.2rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: #ffffff;
    font-size: 0.85rem;
}

.grid-cell.is-highlight {
    background: #e0f2fe;
    border-color: #38bdf8;
    color: #0c4a6e;
    font-weight: 600;
}

.list-panel .list {
    display: grid;
    gap: 0.6rem;
}

.list-panel .list-status {
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
    padding: 0.6rem 0 0.2rem;
}

.load-more {
    border: 1px solid var(--border);
    background: #ffffff;
    border-radius: 0.6rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.result-saju-table {
    width: 100%;
    border-collapse: collapse;
}

.result-saju-table tr {
    border-top: 1px solid #ccc;
}

.result-ten-table + .result-saju-table tr:first-child,
.result-saju-table + .result-ten-table tr:first-child,
.result-ten-table + .result-hidden-table tr:first-child,
.result-saju-table + .result-hidden-table tr:first-child,
.result-hidden-table + .result-daeun-table tr:first-child {
    border-top: 0;
}

.result-daeun-table + .result-saeun .result-saeun-table tr:first-child,
.result-daeun-table + .result-saeun .result-saeun-table tr:first-child td,
.result-hidden-table + .result-saeun .result-saeun-table tr:first-child,
.result-hidden-table + .result-saeun .result-saeun-table tr:first-child td {
    border-top: 0;
}

.result-saju-table td {
    height: 4.4rem;
    text-align: center;
    border: 1px solid #ccc;
    vertical-align: middle;
}

.result-ten-table + .result-saju-table tr:first-child td,
.result-saju-table + .result-ten-table tr:first-child td,
.result-ten-table + .result-hidden-table tr:first-child td,
.result-saju-table + .result-hidden-table tr:first-child td,
.result-hidden-table + .result-daeun-table tr:first-child td {
    border-top: 0;
}

.result-ten-table {
    width: 100%;
    border-collapse: collapse;
}

.result-ten-table td {
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 1.1rem;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #EAEDF2;
}

.result-hidden-table {
    width: 100%;
    border-collapse: collapse;
}

.result-hidden-table td {
    text-align: center;
    border: 1px solid #ccc;
}

.result-nav-icon {
    width: 2rem;
    height: auto;
    object-fit: cover;
    opacity: 0.2;
    position: absolute;
    top: 40%;
    z-index: 2;
}

.result-nav-prev {
    left: 0;
}

.result-nav-next {
    right: 0;
}

.result-sinsal-gan-table {
    width: 100%;
    border-collapse: collapse;
}

.result-sinsal-gan-table td {
    padding: 0.0625rem 0;
    background-color: #d9eeff;
    text-align: center;
}

.result-sinsal-gan-table span {
    height: 1rem;
    display: inline-block;
    border-radius: 0.25rem;
    margin: 0;
    padding: 0;
    line-height: 1.1rem;
    border: 0.0625rem solid #3746a6;
    background-color: #ffffff;
    color: #3746a6;
    font-size: 0.8rem;
    width: 1.5rem;
}

.result-sinsal-gan-table span.gongmang {
    background-color: #ffffff;
    color: #3746a6;
}

.result-sinsal-gan-table span.gongmang.is-active {
    background-color: #db6d00;
    color: #ffffff;
}

.result-sinsal-gan-table .result-gan-sinsal-active {
    background-color: #db6d00;
    color: #ffffff;
}

.result-sinsal-gan-table .result-gan-sinsal-cheonul {
    background-color: #4caf50;
    color: #ffffff;
}

.result-sinsal-extra-table {
    width: 100%;
    border-collapse: collapse;
}

.result-sinsal-extra-table td {
    padding: 0.0625rem 0;
    background-color: #ffffff;
    text-align: center;
}

.result-sinsal-same {
    height: 1rem;
    display: inline-block;
    border-radius: 0.25rem;
    margin: 0;
    padding: 0;
    line-height: 1.1rem;
    border: 0.0625rem solid #3746a6;
    background-color: #795548;
    color: #ffffff;
    font-size: 0.8rem;
    width: 1.5rem;
}

.result-sinsal-table {
    width: 100%;
    border-collapse: collapse;
}

.result-sinsal-table td {
    padding: 1px 0;
    background-color: #ffffff;
    text-align: center;
}

.result-sinsal-ji-table {
    width: 100%;
    border-collapse: collapse;
}

.result-sinsal-ji-table td {
    padding: 1px 0;
    text-align: center;
}

.result-sinsal-ji-table .result-sinsal-row-hidden {
    display: none;
}

.result-sinsal-ji-table tr:nth-child(odd) td {
    background-color: #ffefd8;
}

.result-sinsal-ji-table tr:nth-child(even) td {
    background-color: #fff6eb;
}

.result-sinsal-ji {
    height: 1rem;
    display: inline-block;
    border-radius: 4px;
    margin: 0;
    padding: 0;
    line-height: 1.1rem;
    border: 1px solid #3746a6;
    color: #3746a6;
    font-size: 0.8rem;
    width: 1.5rem;
    font-weight: bold;
}

.result-sinsal-ji-table .result-sinsal-ji.result-element-earth {
    color: #ffffff;
    background-color: rgb(255, 152, 0);
    border-color: rgb(244, 67, 54);
}

.result-sinsal-ji-table .result-sinsal-ji.result-element-wood {
    color: #ffffff;
    background-color: rgb(76, 175, 80);
    border-color: rgb(0, 150, 136);
}

.result-sinsal-ji-table .result-sinsal-ji.result-element-metal {
    color: #000000;
    background-color: #ffffff;
    border-color: #3746a6;
}

.result-sinsal-ji-table .result-sinsal-ji.result-element-water {
    color: #ffffff;
    background-color: rgb(96, 125, 139);
    border-color: rgb(121, 85, 72);
}

.result-sinsal-ji-table .result-sinsal-ji.result-element-fire {
    background-color: rgb(244, 67, 54) !important;
    color: #ffffff;
    border-color: rgb(121, 85, 72);
}

.result-ten-table span.unsung {
    height: 1rem;
    display: inline-block;
    border-radius: 4px;
    margin: 0;
    padding: 0;
    line-height: 1.1rem;
    border: 1px solid #3746a6;
    background-color: #0072bc;
    color: #ffffff;
    font-size: 0.8rem;
    width: 1.5rem;
}

#daeun-detail table.daeundt.sinsal span.unsung,
#saeun-detail table.daeundt.sinsal span.unsung {
    height: 1rem;
    display: inline-block;
    border-radius: 4px;
    margin: 0;
    padding: 0;
    line-height: 1.1rem;
    border: 1px solid #3746a6;
    background-color: #0072bc;
    color: #ffffff;
    font-size: 0.8rem;
    width: 1.5rem;
}

#daeun-detail table.daeundt.sinsal span.di-p,
#saeun-detail table.daeundt.sinsal span.di-p {
    background-color: #0072bc;
    color: #ffffff;
    font-weight: bolder;
}

#daeun-detail table.daeundt.sinsal span.di-p.result-rel-sangsun,
#saeun-detail table.daeundt.sinsal span.di-p.result-rel-sangsun {
    background-color: #0072bc;
    color: #ffffff;
}

#daeun-detail table.daeundt.sinsal span.di-p.result-rel-seonjeon,
#saeun-detail table.daeundt.sinsal span.di-p.result-rel-seonjeon {
    background-color: #db6d00;
    color: #ffffff;
}

#daeun-detail table.daeundt.sinsal span.di-p.result-rel-dongsun,
#saeun-detail table.daeundt.sinsal span.di-p.result-rel-dongsun {
    background-color: #0072bc;
    color: #ffc107;
}

#daeun-detail table.daeundt.sinsal span.gongmang,
#saeun-detail table.daeundt.sinsal span.gongmang {
    height: 1rem;
    display: inline-block;
    border-radius: 4px;
    margin: 0;
    padding: 0;
    line-height: 1.1rem;
    border: 1px solid #3746a6;
    background-color: #db6d00;
    color: white;
    font-size: 0.8rem;
    width: 1.5rem;
}

#daeun-detail table.daeundt.sinsal span,
#saeun-detail table.daeundt.sinsal span {
    height: 1rem;
    display: inline-block;
    border-radius: 4px;
    margin: 0;
    padding: 0;
    line-height: 1.1rem;
    border: 1px solid #3746a6;
    background-color: #ffffff;
    color: #3746a6;
    font-size: 0.8rem;
    width: 1.5rem;
}

#daeun-detail table.daeundt.sinsal span.sinsal-4,
#saeun-detail table.daeundt.sinsal span.sinsal-4 {
    border-color: #f44336;
    background-color: #e91e63;
    color: #ffffff;
}

#daeun-detail table.daeundt.sinsal span.sinsal-3,
#saeun-detail table.daeundt.sinsal span.sinsal-3 {
    background-color: #4caf50;
    color: #ffffff;
}

.result-sinsal-rel {
    height: 1rem;
    display: inline-block;
    border-radius: 4px;
    margin: 0 2px 0 0;
    padding: 0;
    line-height: 1.1rem;
    border: 1px solid #3746a6;
    background-color: #ffffff;
    color: #3746a6;
    font-size: 0.8rem;
    width: 1.5rem;
}

.result-sinsal-arrow {
    margin: 0 2px;
    color: #333333;
    display: inline-block;
    width: 0.8rem;
    text-align: center;
}

.result-sinsal-tag {
    height: 1rem;
    display: inline-block;
    border-radius: 4px;
    margin: 0 2px 0 0;
    padding: 0;
    line-height: 1.1rem;
    border: 1px solid #F44336;
    background-color: #E91E63;
    color: #ffffff;
    font-size: 0.8rem;
    width: 1.5rem;
}

.result-title {
    width: 100%;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-collapse: collapse;
}

.result-title td {
    height: 1.8rem;
    line-height: 1.8rem;
    background-color: #ffffff;
    font-size: 1.1rem;
    text-align: center;
}

.result-relation {
    width: 100%;
    margin-bottom: 0;
}

.result-relation-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 0.7rem;
    row-gap: 0;
    align-items: center;
    overflow: visible;
}

.result-rel-bar {
    height: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.3rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: #ffffff;
    width: 100%;
}

.result-rel-sangsun {
    background-color: #0072BC;
}

.result-rel-seonjeon {
    background-color: #db6d00;
}

.result-rel-dongsun {
    background-color: #0072BC;
    color: #ffc107;
}

.result-rel-time-day { grid-column: 1 / 2; width: 100%; margin-left: 50%; }
.result-rel-day-month { grid-column: 2 / 3; width: 100%; margin-left: 50%; }
.result-rel-month-year { grid-column: 3 / 4; width: 100%; margin-left: 50%; }
.result-rel-time-month { grid-column: 1 / 2; width: 200%; margin-left: 50%; }
.result-rel-day-year { grid-column: 2 / 3; width: 200%; margin-left: 50%; }
.result-rel-time-year { grid-column: 1 / 2; width: 300%; margin-left: 50%; }

.result-rel-row-0 { grid-row: 1; }
.result-rel-row-1 { grid-row: 2; }
.result-rel-row-2 { grid-row: 3; }
.result-rel-row-3 { grid-row: 4; }
.result-rel-row-4 { grid-row: 5; }
.result-rel-row-5 { grid-row: 6; }

.result-daeun-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.3rem;
}

.result-daeun-table td {
    height: 1.3rem;
    background-color: #ffffff;
    text-align: center;
    border: 1px solid #ccc;
}

.result-daeun-body td {
    height: 2.1rem;
    background-color: #cbcbcb;
}

.result-daeun-value {
    line-height: 1.4rem;
    height: 1.3rem;
    font-size: 1.1rem;
}

.result-daeun-title-value {
    line-height: 1.4rem;
    height: 1.3rem;
    font-size: 1.1rem;
}

.result-daeun-body .result-daeun-value {
    box-shadow: 1px 1px 2px 1px #9f9f9f;
    width: 2rem;
    line-height: 2.1rem;
    height: 2rem;
    font-size: 1.9rem;
    padding: 0;
    border-radius: 0.3rem;
    margin: 0 auto;
    position: relative;
}

.result-daeun-current {
    border-left: 1px solid red;
    border-right: 1px solid red;
    background-color: #ff8040 !important;
}

.result-saeun-current {
    border-left: 1px solid red;
    border-right: 1px solid red;
    background-color: #ff8040 !important;
}

.result-daeun-title .result-daeun-current .result-daeun-value {
    color: #ffffff;
}

.result-daeun-title .result-daeun-current .result-daeun-title-value {
    color: #ffffff;
}

.result-saeun-title .result-saeun-current .result-saeun-title-value,
.result-saeun-title .result-saeun-current .result-saeun-value {
    color: #ffffff;
}

.result-saeun-age .result-saeun-current .result-saeun-age-value {
    color: #ffffff;
}

.result-daeun-current.result-daeun-top {
    border-top: 1px solid red;
}

.result-daeun-current.result-daeun-bottom {
    border-bottom: 1px solid red;
}

.result-saeun {
    overflow-x: auto;
    overflow-y: hidden;
}

.result-saeun-table {
    width: 100%;
    border-collapse: collapse;
}

.result-saeun-table td {
    height: 1.2rem;
    background-color: #ffffff;
    text-align: center;
    border: 1px solid #ccc;
}

.result-saeun-title-value {
    line-height: 1.3rem;
    height: 1.2rem;
    font-size: 0.7rem;
}

.result-saeun-age-value {
    line-height: 1.3rem;
    height: 1.2rem;
    font-size: 0.9rem;
}

.result-saeun-value {
    line-height: 1.3rem;
    height: 1.2rem;
    font-size: 0.9rem;
}

.result-saeun-body .result-saeun-value {
    box-shadow: 1px 1px 2px 1px #9f9f9f;
    width: 2rem;
    line-height: 2.1rem;
    height: 2rem;
    font-size: 1.9rem;
    padding: 0;
    border-radius: 0.3rem;
    margin: 0 auto;
    position: relative;
}

.result-hidden-table-inner {
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
}

.result-hidden-table-half {
    width: 60%;
}

.result-hidden-table-inner td {
    line-height: 0.6rem;
    border: 0;
}

.result-hidden-table-inner,
.result-hidden-table-inner td {
    border: 0;
}

.result-hidden-table-inner td:not(:last-child) {
    border-right: 0;
}

.result-hidden-stem {
    border: 1px solid #afafaf;
    font-size: 1.3rem;
    width: 100%;
    line-height: 1.4rem;
    height: 1.5rem;
    border-radius: 0.2rem;
    box-sizing: border-box;
}

.result-hidden-ten {
    display: block;
    font-size: 0.8rem;
    line-height: 1.1rem;
}

.result-hidden-hap {
    display: block;
    font-size: 0.5rem;
    line-height: 0.5rem;
    height: 0.5rem;
    margin-top: -0.4rem;
}

.result-marker {
    display: inline-block;
}

.result-current {
    background-color: #00BCD4;
}

.result-ganjee {
    box-shadow: 1px 1px 2px 1px #9f9f9f;
    width: 3.9rem;
    line-height: 4rem;
    height: 4rem;
    font-size: 3.3rem;
    padding: 0;
    border-radius: 0.5rem;
    -webkit-text-stroke-width: 1px;
    margin: 0 auto;
    position: relative;
}

.result-element-wood {
    background-color: #E1FCDF;
}

.result-element-fire {
    background-color: #FADFE1;
}

.result-element-earth {
    background-color: #FCFAE5;
}

.result-element-metal {
    background-color: #FAFAFA;
}

.result-element-water {
    background-color: #DADADA;
}

.result-habchung {
    height: 1.1rem;
    line-height: 1.1rem;
    font-size: 0.8rem;
    bottom: 0.9rem;
    position: relative;
}


.un-habchung {
    width: 1.1rem;
    height: 2.5rem;
    line-height: 1rem;
    font-size: 0.6rem;
    position: absolute;
    bottom: 0.9rem;
    left: -3px;
    margin: 0;
}

.un-habchung-daeun {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.un-habchung-saeun {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.un-habchung span {
    display: block;
}

.un-habhyeong {
    width: 1.1rem;
    height: 2.5rem;
    line-height: 1rem;
    font-size: 0.6rem;
    position: absolute;
    bottom: 0.9rem;
    right: -3px;
    margin: 0;
}

.un-habhyeong span {
    display: block;
}

.result-habchung span {
    display: inline-block;
    margin: 0 -1px;
}

.result-marker-neutral {
    color: #959595;
}

.result-marker-earth {
    color: #ff9800;
}

.result-marker-fire {
    color: #EA1D24;
}

.result-marker-metal {
    color: #959595;
}

.result-marker-red {
    color: #EA1D24;
}

.result-marker-wood {
    color: #008000;
}

.result-marker-water {
    color: #2196f3;
}

.list-row {
    padding: 0.7rem 0.8rem;
    border-radius: 0.7rem;
    border: 1px solid var(--border);
    background: #fff;
}

.list-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.list-meta {
    font-size: 0.85rem;
    color: var(--muted);
}

.empty,
.error {
    padding: 1rem;
    text-align: center;
    color: var(--muted);
}

.error {
    color: #b91c1c;
}

/* 대운/세운 지지/천간의 합/충/형 마커 */
.result-daeun-jee .habchung,
.result-saeun-jee .habchung,
.result-daeun-gan .habchung,
.result-saeun-gan .habchung {
    -webkit-text-stroke-width: 1px;
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0.7rem;
    bottom: 0.8rem;
    position: relative;
    border: 0;
    box-shadow: none;
}