:root{--page-margin:10px;--font-size:18px;--card-gap:5px;--header-height:58px}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{padding:0 var(--page-margin);font-family:Arial,sans-serif;font-size:var(--font-size);background:#f5f5f5;color:#222;overflow:hidden}
.top-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--header-height);padding:7px 0;background:#f5f5f5}
.icon-toolbar{display:flex;align-items:center;gap:6px;min-width:0;width:100%}
.icon-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;padding:0;border:1px solid #d4d4d4;border-radius:10px;background:#fff;color:#333;font-size:20px;line-height:1;cursor:pointer;touch-action:manipulation}
.icon-button:active{background:#e9eef5;transform:scale(.97)}
.icon-button[aria-pressed="true"]{background:#e2edf9;border-color:#7da7d5;color:#155b9e}
.settings-icon{margin-left:auto;font-size:23px}
.header-current{display:none}
main{height:calc(100dvh - var(--header-height));min-height:0}
#phoneView{height:100%;min-height:0}
.phrase-list{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:var(--card-gap);padding-bottom:0;scrollbar-width:none}
/* 스크롤 영역 내부에 실제 하단 여유 5칸을 만든다 */
.phrase-list::after{content:"";display:block;flex:0 0 calc(5 * 72px + 4 * var(--card-gap));width:100%;pointer-events:none}
.phrase-list::-webkit-scrollbar{display:none}
.phrase-card{display:grid;column-gap:5px;row-gap:5px;border-radius:0;overflow:visible;background:transparent;flex:none;scroll-margin-top:8px}
.phrase-cell{min-width:0;padding:7px;background:#f3f3f3;overflow-wrap:anywhere;white-space:pre-wrap;line-height:1.35;border:1px solid #999;border-radius:0}
.phrase-cell.main-language-cell{font-weight:500;display:flex;flex-direction:column;justify-content:center;text-align:left;border-radius:5px 0 0 5px}
.phrase-cell.last-language-cell{border-radius:0 5px 5px 0}
.phrase-cell.single-language-cell{border-radius:5px}
.language-line{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.55em;row-gap:0;min-width:0}
.phrase-text,.pronunciation,.roman{display:inline;min-width:0;overflow-wrap:anywhere;white-space:pre-wrap;font-weight:400}
.phrase-text{font-size:1em;color:inherit}
.pronunciation,.roman{font-size:.72em}
.pronunciation{color:#1769c2}
.roman{color:#8a5a35}
.memo{display:block;margin-top:5px;font-size:.72em;color:#47704b;font-weight:400;line-height:1.35}
.memo-indicator{margin-left:auto;flex:0 0 auto;font-size:.68em;line-height:1;color:#47704b;opacity:.9}
.pronunciation.hidden{display:none}
.bottom-scroll-space{display:none}
#pcView{display:none;margin-top:20px}.table-container{width:100%;overflow:auto}table{width:100%;border-collapse:collapse;background:#fff;font-size:13px}th,td{border:1px solid #ccc;padding:6px;vertical-align:top;min-width:90px}th{background:#e9e9e9}
.modal{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.48);justify-content:center;align-items:center;padding:15px}.modal.active{display:flex}
.modal-content{width:min(100%,420px);max-height:85dvh;overflow-y:auto;padding:20px;border-radius:14px;background:#fff;box-shadow:0 12px 36px rgba(0,0,0,.2)}
.modal-content h3{margin:0 0 18px;font-size:19px}
.modal-content>label:not(.check-label),.dialog-select-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0}
.modal-content select{width:65%;max-width:65%;padding:10px;border:1px solid #ccc;border-radius:8px;background:#fff;font-size:16px}
.check-label{display:flex;align-items:center;gap:8px;margin:12px 0}
.modal-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.modal-buttons button,.settings-actions button{padding:10px 16px;border:1px solid #ccc;border-radius:8px;background:#f8f8f8;font-size:15px;cursor:pointer}
.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.settings-actions button{flex:1;min-width:120px}
body.pc-mode #phoneView{display:none}body.pc-mode #pcView{display:block}
@media(max-width:700px){body{--page-margin:5px;--header-height:54px}.top-header{padding:5px 0}.icon-toolbar{gap:4px;justify-content:space-between}.icon-button{flex-basis:clamp(34px,10vw,42px);width:clamp(34px,10vw,42px);height:40px;border-radius:9px;font-size:18px}.settings-icon{margin-left:2px}.phrase-cell{padding:6px;font-size:.93em}body.pc-mode #pcView{display:none}body.pc-mode #phoneView{display:block}.modal-content{padding:18px}.modal-content select{font-size:16px}}

/* 선택 다이얼로그: 제목/풀다운 없이 버튼 목록으로 표시 */
.list-modal-content{padding:12px;max-height:85dvh;overflow-y:auto}
.choice-list{display:flex;flex-direction:column;gap:7px;max-height:calc(85dvh - 24px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.choice-button{width:100%;min-height:44px;padding:10px 14px;border:1px solid #d5d9df;border-radius:9px;background:#f5f6f8;color:#333;text-align:left;font-size:16px;cursor:pointer;touch-action:manipulation}
.choice-button[aria-pressed="true"]{background:#e2edf9;border-color:#7da7d5;color:#155b9e;font-weight:600}
.icon-button[aria-pressed="false"]{background:#f0f0f0;border-color:#ddd;color:#999}
.icon-button[aria-pressed="true"]{background:#dcecff;border-color:#6d9ed5;color:#145a9c}


/* 항목 더블클릭/더블터치 편집 창 */
.edit-modal-content{width:min(100%,680px);max-height:88dvh;display:flex;flex-direction:column;gap:12px;padding:14px}
.edit-language-list{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.edit-language-item{border:1px solid #d8dce2;border-radius:10px;padding:8px 10px;background:#fafbfc}
.edit-language-heading{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;padding:9px 12px;border:1px solid #d5d9df;border-radius:8px;background:#eef1f5;font-weight:700;font-size:15px;touch-action:manipulation}
.edit-language-heading::-webkit-details-marker{display:none}
.edit-language-heading::before{content:"＋";display:inline-block;width:1em;font-weight:700;color:#526579}
.edit-language-item[open] > .edit-language-heading{margin-bottom:8px;background:#e5edf6}
.edit-language-item[open] > .edit-language-heading::before{content:"−"}
.edit-field{display:flex;align-items:flex-start;gap:10px;margin:7px 0}
.edit-field>span{flex:0 0 76px;padding-top:9px;font-size:13px;color:#555}
.edit-field textarea{flex:1;min-width:0;resize:vertical;min-height:38px;padding:8px 10px;border:1px solid #cfd4dc;border-radius:7px;font:inherit;font-size:16px;line-height:1.4;background:#fff}
.edit-field textarea:focus{outline:2px solid #8ab4e8;border-color:#5d91ce}
@media(max-width:700px){.edit-modal-content{max-height:90dvh;padding:10px}.edit-field>span{flex-basis:68px}.edit-language-item{padding:8px}}


/* 첫 번째와 마지막 언어 필드의 모서리는 CSS에서 직접 지정 */
.phrase-card > .phrase-cell:first-of-type{border-top-left-radius:6px;border-bottom-left-radius:6px}
.phrase-card > .phrase-cell:last-of-type{border-top-right-radius:6px;border-bottom-right-radius:6px}
.phrase-card > .phrase-cell:only-of-type{border-radius:6px}