/* =====================================================================
   OTCM EXPRESS 계열 페이지 공통 스타일 (2차 개편)            [2026-08-29]
   express.html / inventory.html / ingredient.html / specialty.html
   ===================================================================== */
.ex-wrap{max-width:1200px;margin:0 auto;padding:0 20px 90px;}
.ex-lead{text-align:center;max-width:820px;margin:0 auto 60px;}
.ex-lead h2{font-size:34px;font-weight:800;color:#17b5a9;letter-spacing:-.02em;margin:0 0 18px;}
.ex-lead p{font-size:17px;line-height:1.8;color:#495057;margin:0;word-break:keep-all;}
.ex-sec{margin-bottom:80px;}
.ex-sec > h2{font-size:26px;font-weight:800;color:#212529;margin:0 0 8px;letter-spacing:-.02em;}
.ex-sec > h2 small{display:block;font-size:14px;font-weight:500;color:#868e96;margin-top:6px;}
.ex-sec > .ex-sub{font-size:15px;color:#6c757d;margin:0 0 28px;line-height:1.7;}
/* 3 Step */
.ex-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px;}
.ex-step{border:1px solid #e9ecef;border-radius:16px;padding:30px 28px;position:relative;background:#fff;}
.ex-step .no{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;color:#17b5a9;background:#e6f7f5;padding:5px 12px;border-radius:20px;margin-bottom:14px;}
.ex-step h3{font-size:20px;font-weight:800;color:#212529;margin:0 0 6px;}
.ex-step .like{font-size:13px;color:#adb5bd;margin:0 0 14px;} .ex-step .like b{color:#868e96;font-weight:600;}
.ex-step p{font-size:14px;line-height:1.75;color:#495057;margin:0;word-break:keep-all;}
.ex-step a.more{display:inline-block;margin-top:16px;font-size:13px;font-weight:600;color:#17b5a9;text-decoration:none;} .ex-step a.more:after{content:" →";}
.ex-visual{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:center;margin-top:50px;background:#f8f9fa;border-radius:20px;padding:40px;}
.ex-visual img{max-width:100%;height:auto;display:block;margin:0 auto;}
.ex-visual .tag{text-align:center;} .ex-visual .tag b{display:block;font-size:26px;font-weight:800;color:#17b5a9;line-height:1.3;margin-bottom:10px;}
.ex-visual .tag span{font-size:15px;color:#868e96;}
.ex-visual .tag img{max-height:260px;margin:18px auto;}
/* Inventory 표 */
.ex-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px;}
.ex-tabs a{padding:12px 22px;border-radius:8px;background:#f1f3f5;color:#868e96;font-size:15px;font-weight:600;text-decoration:none;} .ex-tabs a.on{background:#212529;color:#fff;}
.inv-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #e9ecef;border-radius:12px;}
.inv{width:100%;border-collapse:collapse;min-width:820px;font-size:13px;}
.inv th,.inv td{border-bottom:1px solid #eef0f2;border-right:1px solid #eef0f2;padding:12px 10px;text-align:center;vertical-align:middle;}
.inv th:last-child,.inv td:last-child{border-right:0;}
.inv thead th{background:#495057;color:#fff;font-weight:700;} .inv thead tr.grp th{background:#e9ecef;color:#212529;font-size:15px;}
.inv thead tr.grp th.mist{background:#ced4da;} .inv thead tr.lv th{background:#f1f3f5;color:#495057;font-weight:500;font-size:12px;}
.inv tbody th{background:#f8f9fa;color:#212529;font-weight:600;text-align:left;white-space:nowrap;min-width:150px;}
.inv tbody th small{display:block;font-size:11px;color:#868e96;font-weight:500;}
.inv td{color:#495057;line-height:1.5;} .inv td .f{display:inline-block;padding:4px 10px;border-radius:6px;background:#e6f7f5;color:#12988e;font-weight:600;margin:2px;white-space:nowrap;}
.inv td .f.n{background:#fff4e6;color:#e8590c;}
.inv-legend{font-size:12px;color:#868e96;margin:12px 0 0;} .inv-legend .f{display:inline-block;padding:2px 8px;border-radius:5px;margin-right:4px;}
/* Main Ingredient */
.ing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.ing-card{border:1px solid #e9ecef;border-radius:16px;padding:24px 22px;background:#fff;display:flex;flex-direction:column;}
.ing-card h3{font-size:19px;font-weight:800;color:#212529;margin:0;} .ing-card h3 small{display:block;font-size:13px;font-weight:500;color:#868e96;margin-top:3px;}
.ing-card .pic{height:120px;display:flex;align-items:center;justify-content:center;margin:18px 0 14px;} .ing-card .pic img{max-height:100%;max-width:100%;object-fit:contain;}
.ing-card p{font-size:13px;line-height:1.65;color:#6c757d;margin:0 0 14px;min-height:42px;}
.ing-card ul{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.ing-card li{background:#17b5a9;color:#fff;font-size:13px;font-weight:600;padding:7px 12px;border-radius:6px;line-height:1.3;}
/* Specialty */
.sp-qa{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:70px;}
.sp-qa:nth-child(even){direction:rtl;} .sp-qa:nth-child(even) > *{direction:ltr;}
.sp-qa h3{font-size:24px;font-weight:800;color:#212529;margin:0 0 16px;line-height:1.4;word-break:keep-all;} .sp-qa h3 em{font-style:normal;color:#17b5a9;margin-right:8px;}
.sp-qa p{font-size:15px;line-height:1.85;color:#495057;margin:0 0 12px;word-break:keep-all;} .sp-qa p strong{color:#212529;}
.sp-qa figure{margin:0;background:#f8f9fa;border-radius:16px;padding:22px;} .sp-qa figure img{width:100%;height:auto;display:block;border-radius:8px;} .sp-qa figcaption{font-size:13px;color:#868e96;text-align:center;margin-top:10px;}
.plant-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;}
.plant{background:#fff;border:1px solid #eef0f2;border-radius:12px;padding:14px 12px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.04);}
.plant img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;}
.plant b{display:block;font-size:13px;font-weight:700;color:#212529;margin-top:10px;line-height:1.3;} .plant span{display:block;font-size:11px;color:#868e96;margin-top:3px;}
.ex-note{font-size:13px;color:#868e96;margin-top:22px;line-height:1.6;}
.ex-cta{margin-top:50px;text-align:center;} .ex-cta a{display:inline-block;padding:16px 36px;border-radius:40px;background:#212529;color:#fff;font-size:15px;font-weight:600;text-decoration:none;} .ex-cta a:hover{background:#17b5a9;}
@media (max-width:1100px){ .ing-grid{grid-template-columns:repeat(3,1fr);} .plant-grid{grid-template-columns:repeat(5,1fr);} }
@media (max-width:991px){ .ex-steps{grid-template-columns:1fr;} .ex-visual{grid-template-columns:1fr;padding:26px;} .sp-qa{grid-template-columns:1fr;gap:22px;} .sp-qa:nth-child(even){direction:ltr;} .ex-lead h2{font-size:26px;} .ex-sec > h2{font-size:22px;} .ing-grid{grid-template-columns:repeat(2,1fr);} .plant-grid{grid-template-columns:repeat(4,1fr);} }
@media (max-width:600px){ .ex-wrap{padding:0 16px 60px;} .ing-grid{grid-template-columns:1fr;} .plant-grid{grid-template-columns:repeat(2,1fr);} .ex-tabs a{padding:10px 14px;font-size:13px;} }

/* [2026-08-29] Key Ingredient Technologies (카탈로그 29·30·51~54p) */
.tech-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.tech{border:1px solid #e9ecef;border-radius:16px;padding:24px;background:#fff;}
.tech .pics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
.tech .pics img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#f8f9fa;border-radius:10px;padding:8px;box-sizing:border-box;}
.tech h3{font-size:19px;font-weight:800;color:#212529;margin:0 0 10px;} .tech h3 small{display:block;font-size:12px;font-weight:500;color:#17b5a9;margin-top:4px;line-height:1.5;}
.tech p{font-size:14px;line-height:1.75;color:#495057;margin:0 0 12px;word-break:keep-all;}
.tech ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;} .tech li{font-size:12px;color:#495057;background:#f1f3f5;padding:6px 10px;border-radius:6px;}
@media (max-width:991px){ .tech-grid{grid-template-columns:1fr;} }

/* [2026-08-29 모바일 점검] Inventory 표 : 첫 열(피부 고민) 고정, 셀 축소 */
.inv tbody th{position:sticky;left:0;z-index:2;box-shadow:2px 0 0 #eef0f2;}
.inv thead tr th:first-child{position:sticky;left:0;z-index:3;}
@media (max-width:600px){ .inv{font-size:12px;} .inv th,.inv td{padding:9px 7px;} .inv tbody th{min-width:118px;font-size:12px;} .inv td .f{padding:3px 7px;font-size:11px;} }

/* [2026-08-30] slide-left/right reveal offsets must not widen the page (mobile sideways scroll) */
.ex-wrap{overflow-x:clip;}