@charset 'utf-8';

/* font */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;800&display=swap');
@font-face {
	font-family: 'atomy';
	src: url('./font/atomy-medium-webfont.woff2') format('woff2'),
	url('atomy-light-webfont.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'atomy';
	src: url('./font/atomy-light-webfont.woff2') format('woff2'),
	url('atomy-bold-webfont.woff') format('woff');
	font-weight: 200;
	font-style: normal;
}
@font-face {
	font-family: 'atomy';
	src: url('./font/atomy-bold-webfont.woff2') format('woff2'),
	url('atomy-bold-webfont.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}
body, h1, h2, h3, h4, h5, select, input { font-family: 'atomy', sans-serif; font-size: 16px; font-weight: 400; line-height: 1; color: var(--darkgray); }
.number { font-family: 'Nanum Gothic Coding', monospace; }

/* CSS Reset */
html, body, h1, h2, h3, h4, h5, div, p, select, input, a, img, svg {
	display: block;
	margin: 0;
	padding: 0;
	border: 0 none;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	text-decoration: inherit;
	color: inherit;
	line-height: 1;
	word-break: keep-all;
}

/* color set */
:root {
	--clearblackpurelight: rgba(0,0,0,.05);
	--clearblacklight: rgba(0,0,0,.15);
	--clearblack: rgba(0,0,0,.5);
	--clearblackdark: rgba(0,0,0,.8);

	--clearwhitelight: rgba(255,255,255,.15);
	--clearwhite: rgba(255,255,255,.5);
	--clearwhitedark: rgba(255,255,255,.8);

	--clearblue: rgba(30,144,255,.15);
	--clearred: rgba(250,0,0,.15);
	--clearreddark: rgba(250,0,0,.5);

	--white: #fafafa;
	--purelightgray: #eeeeee;
	--lightgray: #dfdfdf;
	--gray: #c8c8c8;
	--darkgray: #9f9f9f;
	--deepdarkgray: #656565;
	--black: #1a1a1a;

	--pink: #ee2f75;

	--red: #ff2323;
	--darkred: #ac1111;

	--green: #4aa071;
	--lightgreen: #96d3b1;

	--lightblue: #a5d4ef;
	--blue: #00b5ef;
	--darkblue: #008dde;
	--deepdarkblue: #00649e;
	
	--yellow: #ffea00;
	--darkyellow: #eed900;

	--lightpurple: #cfb2e4;
	--purple: #b967f2;
}

::selection { color: var(--white); background-color: var(--darkblue); }
::placeholder { color: var(--gray); }

/* etc */
body { overflow-x: hidden; overflow-y: scroll; }

/* layer depth */
.color_bar { z-index: 9000; }
.loading_wrap { z-index: 8000 }
.modal_wrap { z-index: 7000; }
header { z-index: 1000; }
.menu_wrap { z-index: 900; }
.tab_wrap { z-index: 800; }
.table_head { z-index: 200; }
.date_wrap { z-index: 100; }

/* checkbox style */
input[type='checkbox'] { width: 13px; height: 13px; border-radius: 2px; background-color: var(--lightgray); transition: background-color .5s ease; }
input[type='checkbox']::after { content: ''; width: 6px; height: 4px; margin: 10px auto 2px; border-left: 2px solid transparent; border-bottom: 2px solid transparent; display: block; transform: rotate(-45deg); transition: border-color .5s ease, margin-top .5s ease; }
input[type='checkbox']:checked { background-color: var(--blue); }
input[type='checkbox']:checked::after { border-color: var(--white); margin-top: 2px; }
input[type='radio'] { width: 13px; height: 13px; border-radius: 2px; background-color: var(--lightgray); transition: background-color .5s ease; }
input[type='radio']::after { content: ''; width: 6px; height: 4px; margin: 10px auto 2px; border-left: 2px solid transparent; border-bottom: 2px solid transparent; display: block; transform: rotate(-45deg); transition: border-color .5s ease, margin-top .5s ease; }
input[type='radio']:checked { background-color: var(--blue); }
input[type='radio']:checked::after { border-color: var(--white); margin-top: 2px; }

/* body */
body { background-color: var(--gray); }

/* header */
header { position: fixed; top: 0; left: 0; width: 100%; height: 56px; background-color: var(--darkblue); display: flex; flex-direction: row; justify-content: space-between; }
.site_title { margin-left: 20px; display: flex; flex-direction: row; align-items: center; font-weight: 600; color: var(--white); }
.site_title svg { width: 20px; height: 20px; margin-right: 5px; fill: var(--white); }
.sub_title { margin: 4px 5px 0; font-size: 12px; color: var(--yellow); }
.btn_menu { position: relative; width: 18px; height: 10px; margin: 22px 20px; border-top: 2px solid var(--white); transition: border-top-color .3s ease; }
.btn_menu::before, .btn_menu::after { content: ''; position: absolute; top: 3px; left: 0; width: 100%; height: 2px; background-color: var(--white); display: block; transition: top .3s ease, transform .3s ease; }
.btn_menu::after { top: 8px; }
.menu_wrap { position: fixed; top: 0; left: 0; width: 100%; height: 0; }
.menu_wrap::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--clearblackdark); display: block; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s ease; }
.menu_wrap .menu { position: fixed; top: 56px; right: -200px; width: 200px; height: calc(100% - 56px); background-color: var(--white); transition: right .5s ease; }
.menu_wrap .menu .user { padding: 15px 20px; display: flex; flex-direction: row; align-items: center; background-color: var(--gray); color: var(--deepdarkgray); font-weight: 600; }
.menu_wrap .menu .user svg { width: 20px; height: 20px; margin-right: 10px; fill: var(--deepdarkgray); display: block; }
.menu_wrap .menu a { padding: 15px 20px; display: flex; flex-direction: row; align-items: center; font-weight: 600; color: var(--darkgray); }
.menu_wrap .menu a svg { width: 20px; height: 20px; margin-right: 10px; fill: var(--darkgray); display: block; }
.menu_wrap .menu a img { width: 24px; height: 24px; margin-left: -2px; margin-right: 8px; display: block; }
.menu_wrap .menu a[target='_blank'] { height: 20px; }
.menu_wrap .menu a[target='_blank'] span { color: var(--blue); }
.menu_wrap .menu a.selected { background-color: var(--lightblue); color: var(--darkblue); }
.menu_wrap .menu a.selected svg { fill: var(--darkblue); }
.menu_wrap .menu a[class^='log'] { color: var(--pink); }
.menu_wrap .menu a[class^='log'] svg { fill: var(--pink); }
.menu_wrap .menu a[target='_blank'] { background-color: var(--purelightgray); }
.opened .btn_menu { border-top-color: transparent; }
.opened .btn_menu::before { top: 4px; transform: rotate(45deg); }
.opened .btn_menu::after { top: 4px; transform: rotate(-45deg); }
.opened .menu_wrap::before { opacity: 1; visibility: visible; }
.opened .menu_wrap .menu { right: 0; }

.btn_login { display: flex; width: 24px; height: 24px; margin: 16px 18px; }
.btn_login svg { fill: var(--white); }

/* modal */
.modal_wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--clearblack); display: none; justify-content: center; align-items: center; }
.modal_wrap.visible { display: flex; }
.modal_box { width: 260px; padding: 20px; border-radius: 4px; background-color: var(--white); }
.modal_box .btn_wrap { display: flex; flex-direction: row-reverse; justify-content: space-between; }
.modal_box .btn_wrap a { width: 126px; padding: 15px 0; border-radius: 2px; font-weight: 600; text-align: center; color: var(--white); }
.modal_box .btn_wrap a.btn_submit { background-color: var(--blue); }
.modal_box .btn_wrap a.btn_cancel { background-color: var(--lightblue); }
.modal_box .btn_wrap a.btn_size_full { width: 260px; }
.modal_box .modal_text { margin-bottom: 20px; text-align: center; }

/* loading*/
.loading_wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--clearblack); display: none; }
.loading_wrap::before, .loading_wrap::after { content: ''; position: absolute; display: block; }
.loading_wrap::before { top: calc(50% - 30px); left: calc(50% - 30px); width: 50px; height: 50px; border: 10px solid var(--clearwhitelight); border-radius: 40px; }
.loading_wrap::after { top: 50%; left: 50%; width: 10px; height: 10px; margin-left: -30px; border-radius: 10px; background-color: var(--white); transform-origin: 35px; animation: loading 1s linear infinite; }
@keyframes loading {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}

/* filter form */
.filter_form { margin-bottom: 10px; display: flex; flex-direction: column; align-items: stretch; }
.filter_form .month_wrap { position: relative; margin-bottom: 10px; }
.filter_form .month_wrap::before { content: ''; position: absolute; top: 16px; right: 12px; width: 0; height: 0; border: 5px solid transparent; border-top: 6px solid var(--gray); }
.filter_form .month_wrap input { width: calc(100% - 22px); height: 100%; padding: 10px; border-radius: 5px; text-align: center; text-align-last: center; background-color: var(--purelightgray); }
.filter_form .user_wrap { position: relative; margin-bottom: 10px; }
.filter_form .user_wrap::before { content: ''; position: absolute; top: 16px; right: 12px; width: 0; height: 0; border: 5px solid transparent; border-top: 6px solid var(--gray); }
.filter_form .user_wrap select { width: 100%; height: 100%; padding: 10px; border-radius: 5px; text-align: center; text-align-last: center; background-color: var(--purelightgray); }
.property_wrap { width: 120px; margin: 10px auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.property_wrap label { margin-right: 15px; font-size: 13px; }

/* login form */
.login_form .modal_box input[name='userInfo'] { width: 260px; margin-bottom: 10px; padding: 15px 0; border-radius: 2px; background-color: var(--purelightgray); text-align: center; }
.login_form .modal_box .remember_wrap { margin-bottom: 20px; display: flex; flex-direction: row; }
.login_form .modal_box .remember_wrap label { margin-left: 5px; font-size: 13px; color: var(--darkgray); }

/* section */
section { position: relative; margin: 56px 0 48px; }
.content { position: relative; display: none; }

/* search */
.search_wrap { position: relative; padding: 20px 18px; background-color: var(--gray); }
.search_wrap input[type='search'] { width: 100%; height: 36px; padding: 10px; border-radius: 5px; display: block; text-align: center; background-color: var(--white); }
.modal_wrap .search_wrap { padding: 0; background-color: var(--white); }
.modal_wrap .search_wrap input[type='search'] { background-color: var(--purelightgray); }

/* add receipt product list */
.add_receipt_product_list { width: calc(100% - 20px); height: 175px; margin: 10px 0; border: 10px solid var(--lightgray); overflow-y: scroll; }
.add_receipt_product_info { margin: 10px 0; display: none; flex-direction: column; font-weight: 600; }
.add_receipt_product_info.show { display: flex; }
.add_receipt_product_info div[class$='_row'] { margin: 0 5px 10px; min-height: 18px; display: flex; flex-direction: row; align-items: center; }
.add_receipt_product_info div[class$='_row'] .label { margin-right: 5px; }
.add_receipt_product_info div.product_name_row { padding-bottom: 10px; border-bottom: 2px dashed var(--gray); }
.add_receipt_product_info a[class$='_product_qnt'] { width: 25px; height: 25px; margin-left: 5px; border-radius: 2px; display: flex; justify-content: center; align-items: center; color: var(--white); font-size: 20px; }
.add_receipt_product_info a.btn_decrease_product_qnt { background-color: var(--red); margin-left: 10px; }
.add_receipt_product_info a.btn_increase_product_qnt { background-color: var(--blue); }
.add_receipt_product_info input.product_memo { padding: 10px; border-radius: 5px; background-color: var(--purelightgray); text-align: center; }

.product_list { display: none; font-size: 12px; }
.product_list a { width: 100%; padding: 10px; display: flex; align-items: center; }
.product_list.show { display: flex; align-items: center; }
.product_list.even { background-color: var(--purelightgray); }
.product_list .tag { display: none; }
.product_list.set a::before { content: '세트'; margin-right: 2px; padding: 2px; border-radius: 2px; display: block; background-color: var(--blue); color: var(--white); word-break: keep-all; font-size: 9px; font-weight: 600; }
/*.product_list.soldout { color: var(--gray); }*/
.product_list.soldout::before { content: '(재고없음)'; margin-left: 10px; }
.product_list.soldout.set a::before { background-color: var(--gray); }
.product_list.not_available { color: var(--gray); }
.product_list.not_available::before { content: '(입고제한)'; margin-left: 10px; }
.product_list.not_available.set a::before { background-color: var(--gray); }

/* tab */
.tab_wrap { position: fixed; bottom: 0; left: 0; width: 100%; height: 48px; background-color: var(--darkblue); }
.tab { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; }
.tab a { height: 100%; border-bottom: 0 solid transparent; display: flex; justify-content: center; align-items: center; flex-grow: 1; font-weight: 600; color: var(--gray); transition: color .5s ease, border-bottom-width .3s ease, border-bottom-color .5s ease, height .3s ease, background-color .5s ease; }
.tab a.selected { height: calc(100% - 8px ); border-bottom-width: 8px; border-bottom-color: var(--white); background-color: var(--clearwhitelight); color: var(--white); }

.tab_wrap.cover { height: calc(100% - 56px); background: none; }
.tab_wrap.cover .tab { flex-direction: column; }
.tab_wrap.cover .tab a { font-size: 24px; color: var(--white); }
.tab_wrap.cover .tab a:nth-child(1) { background-color: var(--blue); }
.tab_wrap.cover .tab a:nth-child(2) { background-color: var(--green); }

.util_wrap { padding: 20px 18px; display: flex; flex-direction: row; }

.receipt_date_wrap { display: flex; flex-direction: row; flex-grow: 1; justify-content: space-between; }
.receipt_date_wrap input { height: 16px; padding: 7px 5px; border-radius: 0; flex-grow: 1; background-color: var(--white); text-align: center; text-align-last: center; }
.receipt_date_wrap a { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 30px; height: 30px; background-color: var(--white); }
.receipt_date_wrap a svg { width: 15px; height: 15px; fill: var(--darkgray); }
.receipt_date_wrap a.btn_prev_date { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.receipt_date_wrap a.btn_next_date { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
.btn_add_receipt { position: absolute; top: -53px; right: 21px; width: 18px; height: 18px; margin-left: 10px; padding: 5px 5px 7px 7px; border-radius: 4px; background-color: var(--blue); }
.btn_add_receipt svg { fill: var(--white); }

.receipt_out .util_wrap { background-color: var(--lightblue); }
.receipt_out .btn_add_receipt svg { fill: var(--blue); }
.receipt_in .util_wrap { background-color: var(--lightgreen); }
.receipt_in .btn_add_receipt svg { fill: var(--green); }

/* table*/
.table_wrap { position: relative; background-color: var(--white); }

.table_head { position: sticky; top: 55px; background-color: var(--white); font-weight: 600; }
.table_head .column { justify-content: center; word-wrap: normal; white-space: nowrap; }

.table_body { margin-bottom: 48px; }
.table_body .tag { display: none; }
.table_body .table_row { display: none; }
.table_body .table_row.show { display: flex; }

.table_row { display: flex; flex-direction: row; }
.table_row .column { padding: 8px 5px; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 12px; }
.table_row .column.name { position: relative; display: table-cell; align-self: center; }
.table_row .column.name.set::before { content: '세트'; margin-right: 2px; padding: 1px 2px; border-radius: 2px; background-color: var(--blue); color: var(--white); word-break: keep-all; font-size: 9px; font-weight: 600; }
.table_row .column.number { justify-content: center; }
.table_row .column:nth-child(even) { background-color: var(--clearblackpurelight); }

.table_row.checked { background-color: var(--yellow); }
.table_row.checked.even { background-color: var(--darkyellow); }

.table_row.even { background-color: var(--clearblackpurelight); }

.table_row.property_in .column.highlight { background-color: var(--clearblue); color: var(--deepdarkblue); }
.table_row.property_out .column.highlight { background-color: var(--clearred); color: var(--darkred); }

.info_wrap h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.info_wrap .inner_wrap { width: calc(100% - 20px); padding: 10px; border-radius: 5px; background-color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: space-around; font-size: 13px; font-weight: 600; }
.info_wrap .out_total { color: var(--darkred); }
.info_wrap .in_total { color: var(--deepdarkblue); }
.info_wrap .number { font-size: 15px; letter-spacing: -1px; }

.date_wrap { position: sticky; top: 83px; padding: 10px 0; background-color: var(--deepdarkgray); color: var(--white); display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 600; }

.aside_wrap { padding: 20px 18px 10px; background-color: var(--green); transition: padding-bottom .5s ease; }
.aside_wrap.limit { background-color: var(--clearreddark); }
.aside_wrap.open { padding-bottom: 20px; }
.aside_wrap .info_wrap { display: none; }

.content h3.subject { display: flex; font-size: 16px; font-weight: 600; }
.content h3.subject svg { width: 16px; height: 16px; margin-right: 5px; }

.aside_wrap h3.subject { position: relative; padding-bottom: 10px; color: var(--white); transition: padding-bottom .5s ease; }
.aside_wrap h3.subject::after { content: '▼'; position: absolute; top: 0; right: 0; display: block; font-size: 12px; transition: top .5s ease, transform .5s ease; }
.aside_wrap h3.subject svg { fill: var(--white); }

.aside_wrap.open h3.subject { padding-bottom: 20px; }
.aside_wrap.open h3.subject::after { top: 2px; transform: rotate(180deg); }

.receipt_out .aside_wrap.total { background-color: var(--blue); }

.aside_wrap.total { height: 16px; padding: 20px 18px; transition: none; }
.aside_wrap.total .inner_wrap { display: flex; flex-direction: row; justify-content: space-between; }
.aside_wrap.total.open { padding-bottom: 10px; }
.aside_wrap.total.open h3.subject { padding-bottom: 10px; }
.aside_wrap.total h3.subject { padding: 0; }
.aside_wrap.total h3.subject::after { display: none; }
.aside_wrap.total .result { font-weight: 600; letter-spacing: -1px; color: var(--white); }

.table_wrap h3.subject { padding: 20px 18px; background-color: var(--yellow); }

/* inventory */
.inventory .table_row .column:nth-child(1) { flex-grow: 1; }
.inventory .table_row .column:nth-child(2) { flex-shrink: 0; width: 35px; }
.inventory .table_row.soldout { background-color: var(--deepdarkgray); color: var(--lightgray); }
.inventory .table_row.soldout.even .column:nth-child(1) { background-color: var(--clearblackpurelight); }
.inventory .table_row.soldout.even .column:nth-child(2) { background-color: var(--clearblacklight); }
.inventory .table_row.soldout .column.name.set::before { background-color: var(--darkgray); color: var(--purelightgray); }

/* receipt */
.receipt .table_row .column:nth-child(1) { flex-grow: 1; }
.receipt .table_row .column:nth-child(2) { flex-shrink: 0; width: 30px; }
.receipt .table_row .column:nth-child(3) { flex-shrink: 0; width: 40px; }
.receipt .table_row .column:nth-child(4) { flex-shrink: 0; width: 25px; }


/* checkout */
.checkout .table_row .column:nth-child(1) { flex-shrink: 0; width: 25px; }
.checkout .table_row .column:nth-child(2) { flex-grow: 1; }
.checkout .table_row .column:nth-child(3) { flex-shrink: 0; width: 30px; }
.checkout .table_row .column:nth-child(4) { flex-shrink: 0; width: 35px; }
.checkout .table_row .column:nth-child(5) { flex-shrink: 0; width: 20px; }
.checkout .table_row .column.commit:nth-child(5) { width: 50px; }
.checkout .table_row .column:nth-child(6) { flex-shrink: 0; width: 20px; }
.checkout .table_row .column:nth-child(odd) { background-color: var(--clearblackpurelight); }
.checkout .table_row .column:nth-child(even) { background-color: transparent; }
.checkout .table_row.property_in .column.highlight { background-color: var(--clearblue); }
.checkout .table_row.property_out .column.highlight { background-color: var(--clearred); }

/* commit */
.commit .table_row .column:nth-child(1) { flex-shrink: 0; width: 25px; }
.commit .table_row .column:nth-child(2) { flex-grow: 1; }
.commit .table_row .column:nth-child(3) { flex-shrink: 0; width: 30px; }
.commit .table_row .column:nth-child(4) { flex-shrink: 0; width: 35px; }
.commit .table_row .column:nth-child(5) { flex-shrink: 0; width: 20px; }
.commit .table_row .column:nth-child(odd) { background-color: var(--clearblackpurelight); }
.commit .table_row .column:nth-child(even) { background-color: transparent; }
.commit .table_row.property_in .column.highlight { background-color: var(--clearblue); }
.commit .table_row.property_out .column.highlight { background-color: var(--clearred); }

/* receipt in out */
.table_wrap[class$='_receipt'] .table_row .column:nth-child(1) { flex-grow: 1; }
.table_wrap[class$='_receipt'] .table_row .column:nth-child(2) { flex-shrink: 0; width: 30px; }
.table_wrap[class$='_receipt'] .table_row .column:nth-child(3) { flex-shrink: 0; width: 65px; }
.table_wrap[class$='_receipt'] .table_row .column:nth-child(4) { flex-shrink: 0; width: 20px; }
.table_wrap[class$='_receipt'] .table_row .column.double:nth-child(4) { width: 50px; }
.table_wrap[class$='_receipt'] .table_row .column:nth-child(5) { flex-shrink: 0; width: 20px; }

.table_row .column.name span.number { margin-top: 3px; display: block; color: var(--clearblack); font-size: 10px; }
.table_row .column.name span.note { margin-top: 3px; display: block; color: var(--clearblack); font-size: 10px; }
.table_row .column.money { display: flex; flex-direction: row; justify-content: space-between; }

.confirm_sign { width: 16px; height: 16px; padding: 2px; border-radius: 10px; background-color: var(--gray); }
.confirm_sign::before { content: ''; width: 6px; height: 3px; margin: 2px 3px; border: 2px solid transparent; border-left-color: var(--purelightgray); border-bottom-color: var(--purelightgray); display: block; transform: rotate(-45deg); }
.confirm_sign.commit { background-color: var(--blue); }
.confirm_sign.commit::before { border-left-color: var(--white); border-bottom-color: var(--white); }

.btn_delete { width: 20px; padding: 4px 3px; border-radius: 2px; font-size: 10px; font-weight: 600; text-align: center; background-color: var(--red); color: var(--white); }

.btn_edit { width: 20px; padding: 4px 3px; border-radius: 2px; font-size: 10px; font-weight: 600; text-align: center; background-color: var(--green); color: var(--white); }

/* filter */
.filter_wrap { position: relative; height: 36px; padding: 0 18px 20px; background-color: var(--gray); }
.filter_info { height: 14px; padding: 11px; border-radius: 5px; background-color: var(--white); display: flex; flex-direction: row; }
.filter_info span { margin-right: 10px; padding-right: 10px; border-right: 1px solid var(--lightgray); display: block; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: -.5px; }
.filter_info span:last-child { margin-right: 0; padding-right: 0; border-right: 0 none; }
.btn_filter { position: absolute; top: 10px; right: 30px; width: 24px; height: 14px; border-top: 3px solid var(--gray); }
.btn_filter::before, .btn_filter::after { content: ''; position: absolute; height: 3px; background-color: var(--gray); display: block; }
.btn_filter::before { top: 3px; left: 3px; width: 18px; height: 3px; }
.btn_filter::after { top: 9px; left: 6px; width: 12px; height: 3px; }

/* rank */ 
.analysis .table_row .column:nth-child(1) { flex-shrink: 0; width: 20px; }
.analysis .table_row .column:nth-child(2) { flex-shrink: 0; width: 20px; }
.analysis .table_row .column:nth-child(3) { flex-grow: 1; }
.analysis .table_row .column:nth-child(4) { flex-shrink: 0; width: 45px; }
.analysis .table_row .column:nth-child(5) { flex-shrink: 0; width: 45px; }
.analysis .table_row .column.total_qnt { font-weight: 600; }
.analysis .table_row .column.total_qnt.best { background-color: var(--clearblue); color: var(--deepdarkblue); }
.analysis .table_row .column.qnt.first { background-color: var(--clearred); color: var(--darkred); }

.limit_list { display: flex; flex-direction: row; flex-wrap: wrap; }
.limit_list span { margin: 3px; padding: 5px 8px; border-radius: 3px; background-color: var(--lightgray); display: block; }
.limit_list span.title { padding: 2px; font-size: 16px; background-color: var(--white); color: var(--darkred); }

.admin_btn_wrap { position: absolute; top: -56px; right: 18px; }
.admin_btn_wrap .btn_admin { width: 18px; height: 18px; padding: 9px; border-radius: 20px; background-color: var(--white); }
.admin_btn_wrap .btn_admin svg { fill: var(--darkgray); }

.product .table_row .column:nth-child(1) { flex-shrink: 0; width: 30px; }
.product .table_row .column:nth-child(2) { flex-grow: 1; }
.product .table_row .column:nth-child(3) { flex-shrink: 0; width: 60px; }
.product .table_row .column:nth-child(4) { flex-shrink: 0; width: 15px; }
.product .table_row .column:nth-child(5) { flex-shrink: 0; width: 15px; }
.product .table_row .column:nth-child(6) { flex-shrink: 0; width: 20px; }
.product .table_row .column:nth-child(odd) { background-color: var(--clearblackpurelight); }
.product .table_row .column:nth-child(even) { background-color: transparent; }

.status { width: 16px; height: 16px; padding: 2px; border-radius: 10px; background-color: var(--gray); }
.status::before { content: ''; width: 6px; height: 3px; margin: 2px 3px; border: 2px solid transparent; border-left-color: var(--purelightgray); border-bottom-color: var(--purelightgray); display: block; transform: rotate(-45deg); }
.status.able { background-color: var(--blue); }
.status.able::before { border-left-color: var(--white); border-bottom-color: var(--white); }
.status.on { background-color: var(--blue); }
.status.on::before { border-left-color: var(--white); border-bottom-color: var(--white); }


.input_list { display: flex; flex-direction: column; }
.input_list .row_wrap { margin-bottom: 5px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.input_list .row_wrap label { font-family: 'atomy', sans-serif; }
.input_list .row_wrap input[type='text'],
.input_list .row_wrap input[type='number'] { width: 180px; height: 30px; padding: 5px; background-color: var(--purelightgray); }
.input_list .row_wrap input:disabled { background-color: var(--white); }
.input_list .row_wrap.checkbox_wrap { margin: 20px 0; justify-content: flex-start; }
.input_list .column_wrap { width: 75px; margin-right: 10px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }