@stn-uiux/pub-ui 0.1.57 → 0.1.59

package/styles/components/stn-text-field.css

@@ -1,374 +1,396 @@
-@charset "utf-8";
-/**
- * STN Pub TextField — Infomap input (Figma 40000042:186898)
- * Variant: `.outlined` / `--outlined` (box) · `.filled` / `--filled` (fill) · `.standard` / `--standard` (underline)
- * Classes: `.stn-text-field` · `--size-s|m|l|xl` · `--width-*` · `--full` · `--with-prefix` · `--with-icon`
- * Color: `.success` / `.error` / `.warning` / `.info` (feedback tokens)
- * Wrap: `.stn-text-field-wrap` + `.stn-text-field__helper` when helper text is present
- * React: `<StnTextField variant="outlined"|"filled"|"standard" color="success" icon="line/search" iconPosition="left">`
- */
-
-.stn-text-field {
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 0;
-  width: var(--stn-text-field-width);
-  min-width: var(--stn-text-field-min-width);
-  max-width: 100%;
-  height: var(--stn-text-field-height, var(--stn-text-field-height-md)) !important;
-  max-height: var(--stn-text-field-height, var(--stn-text-field-height-md)) !important;
-  min-height: var(--stn-text-field-height, var(--stn-text-field-height-md)) !important;
-  padding: 0 var(--stn-text-field-padding-x, var(--stn-text-field-padding-x-md));
-  border: var(--stn-input-border-width, var(--stn-size-1)) solid var(--stn-input-border);
-  border-radius: var(--stn-text-field-radius, var(--stn-radius-input-md));
-  background-color: var(--stn-input-bg);
-  color: var(--stn-input-fg);
-  font-family: var(--stn-font-body, inherit);
-  font-size: var(--stn-text-field-font-size, var(--stn-text-body-small-size));
-  font-weight: var(--stn-font-weight-medium);
-  line-height: var(--stn-text-field-line-height, var(--stn-line-height-px-30));
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-}
-
-.stn-text-field::placeholder {
-  color: var(--stn-input-placeholder);
-  font-weight: var(--stn-font-weight-medium);
-}
-
-.stn-text-field:focus:not([readonly]) {
-  border: var(--stn-input-focus);
-  background-color: var(--stn-input-focus-bg, var(--stn-input-bg));
-  color: var(--stn-input-focus-fg, var(--stn-input-fg));
-}
-
-.stn-text-field[readonly] {
-  cursor: default;
-}
-
-.stn-text-field[readonly]:focus-visible {
-  outline: var(--stn-focus-ring-width, var(--stn-size-2)) solid var(--stn-focus-ring);
-  outline-offset: var(--stn-focus-ring-offset, var(--stn-size-2));
-}
-
-.stn-text-field:disabled {
-  cursor: not-allowed;
-  opacity: var(--stn-input-disabled-opacity);
-}
-
-.stn-text-field:is(.outlined, .stn-text-field--outlined) {
-  border: var(--stn-input-border-width, var(--stn-size-1)) solid var(--stn-input-border);
-  background-color: var(--stn-input-bg);
-}
-
-.stn-text-field:is(.filled, .stn-text-field--filled) {
-  border: var(--stn-input-border-width, var(--stn-size-1)) solid var(--stn-input-filled-border, transparent);
-  background-color: var(--stn-input-filled-bg, var(--stn-input-bg));
-}
-
-.stn-text-field:is(.filled, .stn-text-field--filled):focus:not([readonly]) {
-  border: var(--stn-input-focus);
-  background-color: var(--stn-input-filled-bg, var(--stn-input-bg));
-  color: var(--stn-input-focus-fg, var(--stn-input-fg));
-}
-
-.stn-text-field:is(.standard, .stn-text-field--standard) {
-  border: none;
-  border-bottom: var(--stn-input-border-width, var(--stn-size-1)) solid var(--stn-input-border);
-  border-radius: var(--stn-radius-0);
-  background-color: transparent;
-}
-
-.stn-text-field:is(.standard, .stn-text-field--standard):focus:not([readonly]) {
-  border: none;
-  border-bottom: var(--stn-input-focus);
-  background-color: transparent;
-  color: var(--stn-input-focus-fg, var(--stn-input-fg));
-}
-
-.stn-text-field[aria-invalid='true'],
-.stn-text-field.stn-text-field--invalid {
-  border-color: var(--stn-feedback-error);
-}
-
-.stn-text-field:is(.standard, .stn-text-field--standard)[aria-invalid='true'],
-.stn-text-field:is(.standard, .stn-text-field--standard).stn-text-field--invalid {
-  border-color: transparent;
-  border-bottom-color: var(--stn-feedback-error);
-}
-
-/* —— Color (button-like feedback tokens) —— */
-.stn-text-field:is(.success, .stn-text-field--success) {
-  --stn-text-field-accent: var(--stn-feedback-success);
-}
-
-.stn-text-field:is(.error, .stn-text-field--error) {
-  --stn-text-field-accent: var(--stn-feedback-error);
-}
-
-.stn-text-field:is(.warning, .stn-text-field--warning) {
-  --stn-text-field-accent: var(--stn-feedback-warning);
-}
-
-.stn-text-field:is(.info, .stn-text-field--info) {
-  --stn-text-field-accent: var(--stn-feedback-info);
-}
-
-.stn-text-field:is(.success, .error, .warning, .info, .stn-text-field--success, .stn-text-field--error, .stn-text-field--warning, .stn-text-field--info) {
-  --stn-input-border: var(--stn-text-field-accent);
-  --stn-input-filled-border: var(--stn-text-field-accent);
-  --stn-input-focus: var(--stn-input-focus-width, var(--stn-size-1)) solid var(--stn-text-field-accent);
-  --stn-input-focus-fg: var(--stn-text-field-accent);
-}
-
-.stn-text-field:is(.stn-text-field--invalid, [aria-invalid='true']) {
-  --stn-input-focus: var(--stn-input-focus-width, var(--stn-size-1)) solid var(--stn-feedback-error);
-  --stn-input-focus-fg: var(--stn-feedback-error);
-}
-
-/* —— Width (size와 독립, .stn-text-field 및 .stn-text-field-wrap 공통 지원) —— */
-:is(.stn-text-field, .stn-text-field-wrap).w80 {
-  --stn-text-field-width: var(--stn-size-80, 80px);
-}
-
-:is(.stn-text-field, .stn-text-field-wrap).w100 {
-  --stn-text-field-width: var(--stn-size-100, 100px);
-}
-
-:is(.stn-text-field, .stn-text-field-wrap).w120 {
-  --stn-text-field-width: var(--stn-size-120, 120px);
-}
-
-:is(.stn-text-field, .stn-text-field-wrap).w140 {
-  --stn-text-field-width: var(--stn-size-140, 140px);
-}
-
-:is(.stn-text-field, .stn-text-field-wrap).w160 {
-  --stn-text-field-width: var(--stn-size-160, 160px);
-}
-
-:is(.stn-text-field, .stn-text-field-wrap).w180 {
-  --stn-text-field-width: var(--stn-size-180, 180px);
-}
-
-:is(.stn-text-field, .stn-text-field-wrap).w200 {
-  --stn-text-field-width: var(--stn-size-200, 200px);
-}
-
-:is(.stn-text-field, .stn-text-field-wrap).full {
-  --stn-text-field-width: 100%;
-  width: 100%;
-}
-
-/* —— Size (sm / md / lg / xl) —— */
-.stn-text-field.sm {
-  --stn-text-field-height: var(--stn-text-field-height-sm);
-  --stn-text-field-padding-x: var(--stn-text-field-padding-x-sm);
-  --stn-text-field-radius: var(--stn-radius-input-sm);
-  --stn-text-field-font-size: var(--stn-text-body-small-size);
-  --stn-text-field-line-height: var(--stn-line-height-px-22);
-}
-
-.stn-text-field.md {
-  --stn-text-field-height: var(--stn-text-field-height-md);
-  --stn-text-field-padding-x: var(--stn-text-field-padding-x-md);
-  --stn-text-field-radius: var(--stn-radius-input-md);
-  --stn-text-field-font-size: var(--stn-text-body-small-size);
-  --stn-text-field-line-height: var(--stn-line-height-px-30);
-}
-
-.stn-text-field.lg {
-  --stn-text-field-height: var(--stn-text-field-height-lg);
-  --stn-text-field-padding-x: var(--stn-text-field-padding-x-lg);
-  --stn-text-field-radius: var(--stn-radius-input-lg);
-  --stn-text-field-font-size: var(--stn-text-body-medium-size);
-  --stn-text-field-line-height: var(--stn-line-height-px-38);
-  min-width: var(--stn-text-field-min-width-lg);
-}
-
-.stn-text-field.xl {
-  --stn-text-field-height: var(--stn-text-field-height-xl);
-  --stn-text-field-padding-x: var(--stn-text-field-padding-x-xl);
-  --stn-text-field-radius: var(--stn-radius-input-xl);
-  --stn-text-field-font-size: var(--stn-text-body-small-size);
-  --stn-text-field-line-height: var(--stn-line-height-px-30);
-}
-
-/* —— Icon slots (left prefix · right suffix) —— */
-.stn-text-field:is(.stn-text-field--with-prefix, .stn-text-field--with-icon) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--stn-text-field-prefix-gap, var(--stn-space-16));
-  padding-inline: var(--stn-text-field-padding-x, var(--stn-text-field-padding-x-md));
-}
-
-.stn-text-field:is(.stn-text-field--with-prefix, .stn-text-field--with-icon):focus-within:not(:has(.stn-text-field__control[readonly])) {
-  border: var(--stn-input-focus);
-  background-color: var(--stn-input-focus-bg, var(--stn-input-bg));
-  color: var(--stn-input-focus-fg, var(--stn-input-fg));
-}
-
-.stn-text-field:is(.stn-text-field--with-prefix, .stn-text-field--with-icon):is(.filled, .stn-text-field--filled):focus-within:not(:has(.stn-text-field__control[readonly])) {
-  border: var(--stn-input-focus);
-  background-color: var(--stn-input-filled-bg, var(--stn-input-bg));
-}
-
-.stn-text-field:is(.stn-text-field--with-prefix, .stn-text-field--with-icon):is(.standard, .stn-text-field--standard):focus-within:not(:has(.stn-text-field__control[readonly])) {
-  border: none;
-  border-bottom: var(--stn-input-focus);
-  background-color: transparent;
-}
-
-.stn-text-field:is(.stn-text-field--with-prefix, .stn-text-field--with-icon):has(.stn-text-field__control[readonly]:focus-visible) {
-  outline: var(--stn-focus-ring-width, var(--stn-size-2)) solid var(--stn-focus-ring);
-  outline-offset: var(--stn-focus-ring-offset, var(--stn-size-2));
-}
-
-.stn-text-field:is(.stn-text-field--with-prefix, .stn-text-field--with-icon).stn-text-field--invalid,
-.stn-text-field:is(.stn-text-field--with-prefix, .stn-text-field--with-icon):has([aria-invalid='true']) {
-  border-color: var(--stn-feedback-error);
-}
-
-.stn-text-field:is(.stn-text-field--with-prefix, .stn-text-field--with-icon):is(.standard, .stn-text-field--standard).stn-text-field--invalid,
-.stn-text-field:is(.stn-text-field--with-prefix, .stn-text-field--with-icon):is(.standard, .stn-text-field--standard):has([aria-invalid='true']) {
-  border-color: transparent;
-  border-bottom-color: var(--stn-feedback-error);
-}
-
-.stn-text-field__prefix,
-.stn-text-field__suffix {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-}
-
-.stn-text-field__icon-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-
-.stn-text-field__control {
-  box-sizing: border-box;
-  flex: 1 1 auto;
-  min-width: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-}
-
-.stn-text-field__control::placeholder {
-  color: var(--stn-input-placeholder);
-  font-weight: var(--stn-font-weight-medium);
-}
-
-/* —— Helper text (bottom-left caption) —— */
-.stn-text-field-wrap {
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: stretch;
-  flex-shrink: 0;
-  width: var(--stn-text-field-width);
-  min-width: var(--stn-text-field-min-width);
-  max-width: 100%;
-  vertical-align: top;
-}
-
-.stn-text-field-wrap .stn-text-field,
-.stn-text-field-wrap > .stn-text-field {
-  width: 100%;
-  min-width: 0;
-  max-width: 100%;
-}
-
-.stn-text-field-wrap.stn-text-field--full,
-.stn-text-field-wrap.w100p {
-  --stn-text-field-width: 100%;
-  width: 100%;
-}
-
-.stn-text-field__helper {
-  box-sizing: border-box;
-  margin: var(--stn-text-field-helper-gap, var(--stn-space-4)) 0 0;
-  padding: 0;
-  font-family: var(--stn-font-body, inherit);
-  font-size: var(--stn-text-field-helper-size, var(--stn-text-caption-medium-size));
-  font-weight: var(--stn-text-field-helper-weight, var(--stn-font-weight-regular));
-  line-height: var(--stn-text-field-helper-line-height, var(--stn-text-caption-medium-line-height));
-  color: var(--stn-text-secondary);
-  text-align: left;
-  word-break: break-word;
-}
-
-.stn-text-field__helper--error {
-  color: var(--stn-feedback-error);
-}
-
-/* —— Label & Wrap Layout —— */
-.stn-text-field__label {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--stn-text-field-label-gap, var(--stn-space-4));
-  font-family: var(--stn-font-body, inherit);
-  font-size: var(--stn-text-field-label-size, var(--stn-text-field-font-size, var(--stn-text-body-small-size)));
-  font-weight: var(--stn-text-field-label-weight, var(--stn-font-weight-medium));
-  color: var(--stn-text-primary);
-  line-height: var(--stn-text-field-label-line-height, var(--stn-line-height-default));
-  white-space: nowrap;
-  user-select: none;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
-.stn-text-field__required {
-  color: var(--stn-feedback-error);
-  font-weight: var(--stn-font-weight-bold);
-  line-height: var(--stn-line-height-tight);
-}
-
-/* 가로(Row) 배치: 왼쪽 또는 오른쪽 라벨 */
-.stn-text-field-wrap--row {
-  flex-direction: row;
-  align-items: center;
-  gap: var(--stn-text-field-wrap-row-gap, var(--stn-space-12));
-}
-
-.stn-text-field-wrap--row .stn-text-field-wrap__body {
-  display: inline-flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.stn-text-field-wrap--row .stn-text-field {
-  width: 100%;
-  min-width: 0;
-}
-
-/* 세로(Column) 배치: 상단 라벨 */
-.stn-text-field-wrap--col {
-  flex-direction: column;
-  gap: var(--stn-text-field-wrap-col-gap, var(--stn-space-6));
-}
-
-.stn-text-field-wrap--col .stn-text-field-wrap__body {
-  display: inline-flex;
-  flex-direction: column;
-  width: 100%;
-}
+@charset "utf-8";
+/**
+ * STN Pub TextField ??Infomap input (Figma 40000042:186898)
+ * Variant: `.outlined` / `--outlined` (box) 쨌 `.filled` / `--filled` (fill) 쨌 `.standard` / `--standard` (underline)
+ * Classes: `.stn-text-field` · `--size-s|m|l|xl` · `--width-*` · `--full` · `--with-icon`
+ * Color: `.success` / `.error` / `.warning` / `.info` (feedback tokens)
+ * Wrap: `.stn-text-field-wrap` + `.stn-text-field__helper` when helper text is present
+ * React: `<StnTextField variant="outlined"|"filled"|"standard" color="success" icon="line/search" iconPosition="left">`
+ */
+
+.stn-text-field {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  width: var(--stn-text-field-width);
+  min-width: var(--stn-text-field-min-width);
+  max-width: 100%;
+  height: var(--stn-text-field-height, var(--stn-text-field-height-md));
+  max-height: var(--stn-text-field-height, var(--stn-text-field-height-md));
+  min-height: var(--stn-text-field-height, var(--stn-text-field-height-md));
+  padding: 0 var(--stn-text-field-padding-x, var(--stn-text-field-padding-x-md));
+  border: var(--stn-input-border-width, var(--stn-size-1)) solid var(--stn-input-border);
+  border-radius: var(--stn-text-field-radius, var(--stn-radius-input-md));
+  background-color: var(--stn-input-bg);
+  color: var(--stn-input-fg);
+  font-family: var(--stn-font-body, inherit);
+  font-size: var(--stn-text-field-font-size, var(--stn-text-body-small-size));
+  font-weight: var(--stn-font-weight-medium);
+  line-height: var(--stn-text-field-line-height, var(--stn-line-height-px-30));
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.stn-text-field::placeholder {
+  color: var(--stn-input-placeholder);
+  font-weight: var(--stn-font-weight-medium);
+}
+
+.stn-text-field:focus:not([readonly]) {
+  border: var(--stn-input-focus);
+  background-color: var(--stn-input-focus-bg, var(--stn-input-bg));
+  color: var(--stn-input-focus-fg, var(--stn-input-fg));
+}
+
+.stn-text-field[readonly] {
+  cursor: default;
+}
+
+.stn-text-field[readonly]:focus-visible {
+  outline: var(--stn-focus-ring-width, var(--stn-size-2)) solid var(--stn-focus-ring);
+  outline-offset: var(--stn-focus-ring-offset, var(--stn-size-2));
+}
+
+.stn-text-field:disabled {
+  cursor: not-allowed;
+  opacity: var(--stn-input-disabled-opacity);
+}
+
+.stn-text-field.outlined {
+  border: var(--stn-input-border-width, var(--stn-size-1)) solid var(--stn-input-border);
+  background-color: var(--stn-input-bg);
+}
+
+.stn-text-field.filled {
+  border: var(--stn-input-border-width, var(--stn-size-1)) solid var(--stn-input-filled-border, transparent);
+  background-color: var(--stn-input-filled-bg, var(--stn-input-bg));
+}
+
+.stn-text-field.filled:focus:not([readonly]) {
+  border: var(--stn-input-focus);
+  background-color: var(--stn-input-filled-bg, var(--stn-input-bg));
+  color: var(--stn-input-focus-fg, var(--stn-input-fg));
+}
+
+.stn-text-field.standard {
+  border: none;
+  border-bottom: var(--stn-input-border-width, var(--stn-size-1)) solid var(--stn-input-border);
+  border-radius: var(--stn-radius-0);
+  background-color: transparent;
+}
+
+.stn-text-field.standard:focus:not([readonly]) {
+  border: none;
+  border-bottom: var(--stn-input-focus);
+  background-color: transparent;
+  color: var(--stn-input-focus-fg, var(--stn-input-fg));
+}
+
+.stn-text-field.transparent {
+  border: none;
+  background-color: transparent;
+}
+
+.stn-text-field.transparent:focus:not([readonly]) {
+  border: none;
+  background-color: transparent;
+}
+
+.stn-text-field.with-icon.transparent:focus-within:not(:has(.stn-text-field__control[readonly])) {
+  border: none;
+  background-color: transparent;
+}
+
+.stn-text-field.transparent[aria-invalid='true'],
+.stn-text-field.transparent.invalid {
+  border-bottom: var(--stn-size-1, 1px) solid var(--stn-feedback-error);
+}
+
+.stn-text-field[aria-invalid='true'],
+.stn-text-field.invalid {
+  border-color: var(--stn-feedback-error);
+}
+
+.stn-text-field.standard[aria-invalid='true'],
+.stn-text-field.standard.invalid {
+  border-color: transparent;
+  border-bottom-color: var(--stn-feedback-error);
+}
+
+/* Color (button-like feedback tokens) */
+.stn-text-field.success {
+  --stn-text-field-accent: var(--stn-feedback-success);
+}
+
+.stn-text-field.error {
+  --stn-text-field-accent: var(--stn-feedback-error);
+}
+
+.stn-text-field.warning {
+  --stn-text-field-accent: var(--stn-feedback-warning);
+}
+
+.stn-text-field.info {
+  --stn-text-field-accent: var(--stn-feedback-info);
+}
+
+.stn-text-field:is(.success, .error, .warning, .info) {
+  --stn-input-border: var(--stn-text-field-accent);
+  --stn-input-filled-border: var(--stn-text-field-accent);
+  --stn-input-focus: var(--stn-input-focus-width, var(--stn-size-1)) solid var(--stn-text-field-accent);
+  --stn-input-focus-fg: var(--stn-text-field-accent);
+}
+
+.stn-text-field:is(.invalid, [aria-invalid='true']) {
+  --stn-input-focus: var(--stn-input-focus-width, var(--stn-size-1)) solid var(--stn-feedback-error);
+  --stn-input-focus-fg: var(--stn-feedback-error);
+}
+
+/* ?붴€?Width (size?€ ?낅┰, .stn-text-field 諛?.stn-text-field-wrap 怨듯넻 吏€?? ?붴€?*/
+:is(.stn-text-field, .stn-text-field-wrap).w80 {
+  --stn-text-field-width: var(--stn-size-80, 80px);
+}
+
+:is(.stn-text-field, .stn-text-field-wrap).w100 {
+  --stn-text-field-width: var(--stn-size-100, 100px);
+}
+
+:is(.stn-text-field, .stn-text-field-wrap).w120 {
+  --stn-text-field-width: var(--stn-size-120, 120px);
+}
+
+:is(.stn-text-field, .stn-text-field-wrap).w140 {
+  --stn-text-field-width: var(--stn-size-140, 140px);
+}
+
+:is(.stn-text-field, .stn-text-field-wrap).w160 {
+  --stn-text-field-width: var(--stn-size-160, 160px);
+}
+
+:is(.stn-text-field, .stn-text-field-wrap).w180 {
+  --stn-text-field-width: var(--stn-size-180, 180px);
+}
+
+:is(.stn-text-field, .stn-text-field-wrap).w200 {
+  --stn-text-field-width: var(--stn-size-200, 200px);
+}
+
+:is(.stn-text-field, .stn-text-field-wrap).full {
+  --stn-text-field-width: 100%;
+  width: 100%;
+}
+
+/* ?붴€?Size (sm / md / lg / xl) ?붴€?*/
+.stn-text-field.sm {
+  --stn-text-field-height: var(--stn-text-field-height-sm);
+  --stn-text-field-padding-x: var(--stn-text-field-padding-x-sm);
+  --stn-text-field-radius: var(--stn-radius-input-sm);
+  --stn-text-field-font-size: var(--stn-text-body-small-size);
+  --stn-text-field-line-height: var(--stn-line-height-px-22);
+}
+
+.stn-text-field.md {
+  --stn-text-field-height: var(--stn-text-field-height-md);
+  --stn-text-field-padding-x: var(--stn-text-field-padding-x-md);
+  --stn-text-field-radius: var(--stn-radius-input-md);
+  --stn-text-field-font-size: var(--stn-text-body-small-size);
+  --stn-text-field-line-height: var(--stn-line-height-px-30);
+}
+
+.stn-text-field.lg {
+  --stn-text-field-height: var(--stn-text-field-height-lg);
+  --stn-text-field-padding-x: var(--stn-text-field-padding-x-lg);
+  --stn-text-field-radius: var(--stn-radius-input-lg);
+  --stn-text-field-font-size: var(--stn-text-body-medium-size);
+  --stn-text-field-line-height: var(--stn-line-height-px-38);
+  min-width: var(--stn-text-field-min-width-lg);
+}
+
+.stn-text-field.xl {
+  --stn-text-field-height: var(--stn-text-field-height-xl);
+  --stn-text-field-padding-x: var(--stn-text-field-padding-x-xl);
+  --stn-text-field-radius: var(--stn-radius-input-xl);
+  --stn-text-field-font-size: var(--stn-text-body-small-size);
+  --stn-text-field-line-height: var(--stn-line-height-px-30);
+}
+
+/* —— Icon slots (.with-icon / __icon-left · __icon-right) —— */
+.stn-text-field.with-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-text-field-icon-gap, var(--stn-space-16));
+  padding-inline: var(--stn-text-field-padding-x, var(--stn-text-field-padding-x-md));
+}
+
+.stn-text-field.with-icon:focus-within:not(:has(.stn-text-field__control[readonly])) {
+  border: var(--stn-input-focus);
+  background-color: var(--stn-input-focus-bg, var(--stn-input-bg));
+  color: var(--stn-input-focus-fg, var(--stn-input-fg));
+}
+
+.stn-text-field.with-icon.filled:focus-within:not(:has(.stn-text-field__control[readonly])) {
+  border: var(--stn-input-focus);
+  background-color: var(--stn-input-filled-bg, var(--stn-input-bg));
+}
+
+.stn-text-field.with-icon.standard:focus-within:not(:has(.stn-text-field__control[readonly])) {
+  border: none;
+  border-bottom: var(--stn-input-focus);
+  background-color: transparent;
+}
+
+.stn-text-field.with-icon:has(.stn-text-field__control[readonly]:focus-visible) {
+  outline: var(--stn-focus-ring-width, var(--stn-size-2)) solid var(--stn-focus-ring);
+  outline-offset: var(--stn-focus-ring-offset, var(--stn-size-2));
+}
+
+.stn-text-field.with-icon.invalid,
+.stn-text-field.with-icon:has([aria-invalid='true']) {
+  border-color: var(--stn-feedback-error);
+}
+
+.stn-text-field.with-icon.standard.invalid,
+.stn-text-field.with-icon.standard:has([aria-invalid='true']) {
+  border-color: transparent;
+  border-bottom-color: var(--stn-feedback-error);
+}
+
+.stn-text-field__icon-left,
+.stn-text-field__icon-right {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.stn-text-field__icon-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.stn-text-field__control {
+  box-sizing: border-box;
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.stn-text-field__control::placeholder {
+  color: var(--stn-input-placeholder);
+  font-weight: var(--stn-font-weight-medium);
+}
+
+/* ?붴€?Helper text (bottom-left caption) ?붴€?*/
+.stn-text-field-wrap {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex-shrink: 0;
+  width: var(--stn-text-field-width);
+  min-width: var(--stn-text-field-min-width);
+  max-width: 100%;
+  vertical-align: top;
+}
+
+.stn-text-field-wrap .stn-text-field,
+.stn-text-field-wrap > .stn-text-field {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+
+.stn-text-field__helper {
+  box-sizing: border-box;
+  margin: var(--stn-text-field-helper-gap, var(--stn-space-4)) 0 0;
+  padding: 0;
+  font-family: var(--stn-font-body, inherit);
+  font-size: var(--stn-text-field-helper-size, var(--stn-text-caption-medium-size));
+  font-weight: var(--stn-text-field-helper-weight, var(--stn-font-weight-regular));
+  line-height: var(--stn-text-field-helper-line-height, var(--stn-text-caption-medium-line-height));
+  color: var(--stn-text-secondary);
+  text-align: left;
+  word-break: break-word;
+}
+
+.stn-text-field__helper--error {
+  color: var(--stn-feedback-error);
+}
+
+/* ?붴€?Label & Wrap Layout ?붴€?*/
+.stn-text-field__label {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-text-field-label-gap, var(--stn-space-4));
+  font-family: var(--stn-font-body, inherit);
+  font-size: var(--stn-text-field-label-size, var(--stn-text-field-font-size, var(--stn-text-body-small-size)));
+  font-weight: var(--stn-text-field-label-weight, var(--stn-font-weight-medium));
+  color: var(--stn-text-primary);
+  line-height: var(--stn-text-field-label-line-height, var(--stn-line-height-default));
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.stn-text-field__label-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--stn-text-secondary);
+}
+
+.stn-text-field__required {
+  color: var(--stn-feedback-error);
+  font-weight: var(--stn-font-weight-bold);
+  line-height: var(--stn-line-height-tight);
+}
+
+/* 媛€濡?Row) 諛곗튂: ?쇱そ ?먮뒗 ?ㅻⅨ履??쇰꺼 */
+.stn-text-field-wrap--row {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--stn-text-field-wrap-row-gap, var(--stn-space-12));
+}
+
+.stn-text-field-wrap--row .stn-text-field-wrap__body {
+  display: inline-flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.stn-text-field-wrap--row .stn-text-field {
+  width: 100%;
+  min-width: 0;
+}
+
+/* ?몃줈(Column) 諛곗튂: ?곷떒 ?쇰꺼 */
+.stn-text-field-wrap--col {
+  flex-direction: column;
+  gap: var(--stn-text-field-wrap-col-gap, var(--stn-space-6));
+}
+
+.stn-text-field-wrap--col .stn-text-field-wrap__body {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+}