@charset "UTF-8";

/* --- ダークモード変数設定 --- */
:root {
    --primary: #6699CC; 
    --accent: #E27272; 
    --success: #334155; 
    --bg: #0f172a; 
    --card: #1e293b; 
    --inner-bg: #0f172a; 
    --border: #334155; 
    --radius: 8px;
    --text: #f8fafc; 
    --text-muted: #94a3b8; 
}

body { font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans", sans-serif; background-color: var(--bg); margin: 0; padding: 10px; font-size: 13px; color: var(--text); line-height: 1.5; }

/* --- レイアウト --- */
.container { width: 53%; }
#sidememo-container { width: 45%; height: 98vh; position: fixed; right: 10px; top: 1%; background: var(--card); border-radius: var(--radius); padding: 10px; border: 1px solid var(--border); box-sizing: border-box; 
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
#sidememo-container.is-hidden { transform: translateX(100%); }
.sidememo-up { width: 100%; height: 59%; margin-bottom: 1%; }
#sidememo { width: 80%; height: 100%; resize: none; border: none; background: #0f172a; padding: 8px; font-size: 12px; color: var(--text); }

/*  サイドリンク  */
.sidelink-area { width: 17%; margin-left: 2%; }
.sidelink-item { position: relative; padding: 10px; background: var(--bg); cursor: pointer; border: 1px solid var(--border); border-radius: 4px; }
.dropdown-menu { display: none; position: absolute; top: 0; right: 100%; width: 150px; background: var(--bg); border: 1px solid var(--border); box-shadow: -4px 4px 10px rgba(0,0,0,0.1); border-radius: 4px; overflow: hidden; }
.sidelink-item:hover{ background-color: var(--border); }
.sidelink-item:hover .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: 10px 15px; text-align: left; transition: background 0.2s; border-bottom: 1px solid var(--border); }
.dropdown-menu a:hover { background-color: var(--border); }
.dropdown-menu a:last-child { border-bottom: none;  }
.wide { width: 650px; }
.topdown { top: -320%; }
.paddmore { padding: 10px;  }
th { padding: 0 10px; }
td { padding: 0 5px; }
.table { border-collapse: collapse;   }


.section { position: relative; background: var(--card); margin-bottom: 8px; padding: 12px 15px; border-radius: var(--radius); border: 1px solid var(--border); box-sizing: border-box; }
#honyakumemo { width: 100%; height: 100%; resize: none; border: none; background: #0f172a; padding: 8px; font-size: 12px; color: var(--text); margin-top: 2%; }
#drop-area { height: 100%; background-color: var(--bg); margin-top: 2%; border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#image-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
#image-container img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
#image-container:empty::before { content: "Paste Image"; color: var(--border); font-size: 1.5rem; font-weight: bold; pointer-events: none; }

/* --- クイックコピーセクション --- */
.hanbun { width: 50%; }
.migi{ margin-left: 1%; }
.yokonarabi { display: flex; }
.boxheight { height: 34%; }
.sanwari { width: 29%; }
.sanbun { width: 32.7%; }
.nanawari { width: 70%; }
.btnfix {  margin-top: 2%; }

/* --- 入力ボックス・テキストエリア --- */
textarea, input:not(.idcheck):not([type="radio"]), select { border: 1px solid var(--border); border-radius: 4px; font-size: 13px; background-color: var(--inner-bg) !important;
color: var(--text) !important; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; }
textarea:focus, input:focus, select:focus { outline: none !important; border: 1px solid var(--primary) !important; box-shadow: 0 0 4px rgba(59, 130, 246, 0.4); }
input { padding-left: 8px }

/* テキストエリアの幅 (80%) */
textarea { display: block !important; width: 85%; padding: 8px; margin-top: 5px; min-height: 60px; }
#oden { min-height: 34px !important; height: 34px !important; resize: none; overflow: hidden; }

/* --- ボタンエリア --- */
.btn-area { position: absolute; right: 15px; top: 12px; display: flex; gap: 6px; }
.cpbtn { height: 30px; padding: 0 14px; border-radius: 15px; font-weight: 600; cursor: pointer; color: #fff; font-size: 11px; border: none; display: flex; align-items: center; justify-content: center; }
.cpbtn:active { transform: scale(0.95) translateY(1px); filter: brightness(0.9);  }
.active-blue { background-color: var(--success) !important; color: white !important; } 

#yohyaku-btn { width: 100%; }
#addIDBtn{ width: 100%; margin-top: 1%; height: 30px; border-radius: 4px; border: 1px solid var(--border); color: var(--text); }
.imgbtn { width: 32%; margin: 0 1%; background-color: var(--border); }
.icon-btn { height: 30px; padding: 0 10px; border-radius: 10px; font-weight: 600; font-size: 1.2rem; color: var(--text-muted); transition: all 0.1s; }
.icon-btn:hover {  color: white; }
.icon-btn:active {  transform: scale(0.95) translateY(1px); filter: brightness(2); }
#assetaddBtn { width: 100%; border-radius: 4px; border: 1px solid var(--border); color: var(--text); height: 25px;}
#assetaddBtn:hover {  border: 1px solid var(--text-muted); }
#deleterowBtn { border-radius: 4px; border: 1px solid var(--border); color: var(--text); height: 25px;}
#deleterowBtn:hover {  border: 1px solid var(--text-muted); }
.assetBtn-area { margin-left: 2%;}
.assetBtn {  display: flex;  align-items: center; justify-content: center; width: 40px; background-color: var(--border); border-radius: 3px;  margin-right: 10px; height: 29px; }

/* --- ★アセット確認リストの修正（80%に調整） --- */
.idbox2 { display: flex !important; align-items: center !important; margin-top: 4px !important; width: 90% !important; }
.idright { margin-left: 1%; }
.idinput { background: transparent !important; color: var(--text) !important; font-size: 12px !important; height: 30px !important; width: 45% !important; }

/* --- 生成されたセレクトボックス行 --- */
.generated-idbox { display: flex !important; align-items: center !important; gap: 3px !important; background: var(--card) !important; margin-bottom: 5px !important; border-radius: 4px !important; width: 100% !important; box-sizing: border-box; }
#hfix{ height: 25px !important; }
div.generated-idbox select { padding: 2px 15px 2px 8px; height: 25px; }

select { appearance: none !important; 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8fafc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; 
background-repeat: no-repeat !important; background-position: right 8px center !important; background-size: 14px !important;
}

/* --- ラジオボタン --- */
input[type="radio"] { display: none !important; }
.radio-label {
  display: inline-flex !important; align-items: center; justify-content: center; min-width: 50px; height: 24px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; 
  font-size: 11px; cursor: pointer; background: var(--inner-bg); margin-left: 8px; color: var(--text-muted); transition: all 0.2s; user-select: none;
}
input[type="radio"]:checked + .radio-label { color: #fff !important; border: none !important; }
input[type="radio"]:nth-of-type(1):checked + .radio-label { background-color: var(--primary) !important; }
input[type="radio"]:nth-of-type(2):checked + .radio-label { background-color: var(--accent) !important; }
input[type="radio"]:nth-of-type(3):checked + .radio-label { background-color: var(--success) !important; }

/* --- インターナルノート：レイアウト --- */
.content { margin-top: 10px; }
.content label { display: block; margin-bottom: 4px; font-weight: normal; color: var(--text-muted); }
.content-flex { display: flex !important; align-items: center !important; margin-top: 10px; }
.row-item { display: flex !important; align-items: center !important; margin-top: 10px; }
.row-item label { width: 180px !important; margin-right: 10px !important; white-space: nowrap !important; flex-shrink: 0 !important; color: var(--text); }
.small-input, .nano-input { width: 200px !important; height: 26px !important; padding: 0 8px !important; }
.hund{ width: 100% !important; }
.paddtop{ margin-top: 20px; }
#musubi { margin-top: 20px; text-align: right; }

/* --- KB検索&アクセス --- */
.kbsna-top {  display: flex;  align-items: center; }
.serch-area {  margin-left: 7%; }
.kbinput {  padding-right: 10px; }
.kbinputbox {  padding-left: 5px; }
.kbsna-main {  margin: 30px 0px 5px 0; }
.ichiwari { width: 10%; }
.niwari { width: 20%; }
.sanwarigo { width: 35%; }
.yonwari { width: 40%; }
.gowari { width: 50%; }
.rokuwarigo { width: 65%; }
.hachiwari { width: 80%;}
.kbcolum { padding-bottom: 7px; margin: 7px 0; border-bottom: 1px solid var(--border); }
.serchBtn-area {  display: flex;  align-items: center; justify-content: center; width: 30px; background-color: var(--border); border-radius: 3px;  margin-right: 10px; }
.serchBtn { color: var(--text-muted); width: 100%; }
.serchBtn:hover {  color: white; }
.serchBtn:active { transform: scale(0.95) translateY(1px); filter: brightness(2); }
a { text-decoration: none; }
a:link { color: var(--text-muted); }
a:visited { color: var(--text-muted); }
a:hover { color: var(--text); }
a:active { color: var(--accent); }

/* --- toggle --- */
.toggleBtn-area { display: flex;  align-items: center; justify-content: center; width: 30px; background-color: var(--border); border-radius: 3px; position: fixed; right: 45%; top: 0.5%; }
#toggleBtn:hover {  color: white; }
#toggleBtn:active { transform: scale(0.95) translateY(1px); filter: brightness(2); }
#toggleBtn { color: var(--text-muted); position: relative; }

/* --- toggle --- */
.right-area { width: 45%; margin-right: 10px; position: fixed; right: 10px; top: 1%; }
.hachiwari textarea { width: 100% !important; }

/* --- 電話メモ --- */
.daimei { margin-bottom: 15px; }
.calltext{ margin-bottom: 5px;  }
.btn-area-add { position: absolute; right: 15px; bottom: 25%; display: flex; gap: 6px; }
.callmemocont { margin-top: 20px; }
#callimport-area { top: 20%; }

/* --- メモ --- */
.memo-export { position: absolute; left: 1%; top: 55%; display: flex; gap: 6px; }
.textFormatting { margin-top: 5%;}
.rrhonyaku { text-align: right;  }